{"id":43854,"date":"2026-08-05T09:08:55","date_gmt":"2026-08-05T06:08:55","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/"},"modified":"2026-08-05T09:08:55","modified_gmt":"2026-08-05T06:08:55","slug":"react-native-modal-icinde-scrollview-neden-calismaz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/","title":{"rendered":"React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz?"},"content":{"rendered":"

React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz?<\/h2>\n

React Native projenizde bir payla\u015f\u0131m \u00f6nizleme modal\u0131 (Share Preview Modal) geli\u015ftirdiniz ancak ScrollView bile\u015feni bir t\u00fcrl\u00fc kayd\u0131r\u0131lm\u0131yor mu? Bu makalede, bu kilitlenmenin alt\u0131nda yatan temel nedenleri ve ad\u0131m ad\u0131m \u00e7\u00f6z\u00fcm y\u00f6ntemlerini ayr\u0131nt\u0131l\u0131 \u015fekilde inceliyoruz.<\/p>\n

1. React Native Modal ve ScrollView Odakl\u0131 Ekran Karma\u015fas\u0131<\/h2>\n

Mobil uygulama geli\u015ftirme s\u00fcrecinde kullan\u0131c\u0131 deneyimini (UX) \u00fcst seviyede tutmak son derece kritiktir. \u00d6zellikle bir i\u00e7eri\u011fi, g\u00f6rseli veya makaleyi d\u0131\u015f uygulamalarla payla\u015fmadan \u00f6nce kullan\u0131c\u0131ya sunulan Share Preview Modal<\/code> (payla\u015f\u0131m \u00f6nizleme penceresi) ekranlar\u0131, modern mobil mimarilerin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Ancak geli\u015ftiriciler, bu alt pencerelerin i\u00e7erisine y\u00fcksek miktarda i\u00e7erik yerle\u015ftirmek istediklerinde s\u0131kl\u0131kla kayd\u0131rma (scrolling) sorunlar\u0131yla kar\u015f\u0131la\u015f\u0131rlar.<\/p>\n

React Native ekosisteminde ScrollView<\/code> veya FlatList<\/code> gibi kayd\u0131r\u0131labilir bile\u015fenler, yerel (native) platformlar\u0131n dokunma duyarl\u0131l\u0131\u011f\u0131 mimarisini kullan\u0131r. Bir modal i\u00e7erisine yerle\u015ftirilen kayd\u0131rma alan\u0131 yan\u0131t vermiyorsa, problem genellikle Javascript katman\u0131ndan ziyade Native UI (yerel kullan\u0131c\u0131 aray\u00fcz\u00fc) katman\u0131ndaki boyut hesaplamalar\u0131ndan veya dokunma olay\u0131 (touch responder) \u00e7ak\u0131\u015fmalar\u0131ndan kaynaklan\u0131r. Bunun sonucunda kullan\u0131c\u0131 parma\u011f\u0131n\u0131 ekranda s\u00fcr\u00fcklese dahi i\u00e7erik sabit kal\u0131r. Bu durum mobil uygulaman\u0131n profesyonelli\u011fine g\u00f6lge d\u00fc\u015f\u00fcr\u00fcr.<\/p>\n

Bu makale boyunca, payla\u015f\u0131m \u00f6nizleme modallar\u0131nda ya\u015fanan kayd\u0131rma problemlerini k\u00f6kten \u00e7\u00f6zmek i\u00e7in gerekli olan temel layout (d\u00fczen) kurallar\u0131n\u0131, jest y\u00f6netim sistemlerini ve platform bazl\u0131 teknik n\u00fcanslar\u0131 ele alaca\u011f\u0131z. \u00dcstelik karma\u015f\u0131k akademik terimler yerine, ger\u00e7ek hayat senaryolar\u0131yla ve uygulanabilir kod bloklar\u0131yla konuyu s\u0131f\u0131rdan ileri seviyeye kadar in\u015fa edece\u011fiz.<\/p>\n

2. Layout (D\u00fczen) Esaslar\u0131: Flexbox Neden ScrollView Bile\u015fenini Kilitler?<\/h2>\n

React Native taraf\u0131nda en s\u0131k yap\u0131lan hatalardan biri, ScrollView<\/code> bile\u015feninin \u00e7al\u0131\u015fma prensibini standart bir View<\/code> bile\u015feni ile ayn\u0131 varsaymakt\u0131r. Bir View<\/code> bile\u015feni \u00e7ocuklar\u0131n\u0131n (children) boyutuna g\u00f6re geni\u015fleyebilirken, ScrollView<\/code> bile\u015feninin kayd\u0131rma i\u015flevini ger\u00e7ekle\u015ftirebilmesi i\u00e7in kesinlikle s\u0131n\u0131rland\u0131r\u0131lm\u0131\u015f bir y\u00fcksekli\u011fe (bounded height) ihtiyac\u0131 vard\u0131r. E\u011fer ebeveyn (parent) kapsay\u0131c\u0131 kendi y\u00fcksekli\u011fini belirleyemiyorsa, ScrollView<\/code> i\u00e7erik y\u00fcksekli\u011fini hesaplayamaz ve kayd\u0131rma mekanizmas\u0131n\u0131 tamamen kapat\u0131r.<\/p>\n

\u00d6zellikle Modal<\/code> bile\u015feni varsay\u0131lan olarak ekran\u0131n tamam\u0131n\u0131 kaplayan ayr\u0131 bir yerel pencere (native window) olu\u015fturur. Bu pencere i\u00e7erisine eklenen flex mimarisi do\u011fru yap\u0131land\u0131r\u0131lmazsa y\u00fckseklik zinciri k\u0131r\u0131l\u0131r. Sonu\u00e7 olarak ScrollView<\/code> sonsuz bir y\u00fckseklikte oldu\u011funu varsayar ve kayd\u0131rma \u00e7ubu\u011funu pasif hale getirir.<\/p>\n

Flex: 1 Yap\u0131s\u0131n\u0131 Do\u011fru Anlamak ve Uygulamak<\/h3>\n

Bir ScrollView<\/code> eleman\u0131n\u0131n kapsay\u0131c\u0131 modal i\u00e7inde sorunsuz \u00e7al\u0131\u015fabilmesi i\u00e7in iki temel prop (\u00f6zellik) seviyesinde d\u00fczenleme yap\u0131lmas\u0131 gerekir. Bunlardan ilki bile\u015fenin kendi d\u0131\u015f s\u0131n\u0131r\u0131n\u0131 belirleyen style<\/code> prop’u, ikincisi ise i\u00e7erideki elemanlar\u0131n dizilimini kontrol eden contentContainerStyle<\/code> prop’udur.<\/p>\n

Bu iki kavram aras\u0131ndaki farklar\u0131 anlamak sorunun \u00e7\u00f6z\u00fcm\u00fc i\u00e7in hayati \u00f6nem ta\u015f\u0131r. A\u015fa\u011f\u0131daki tabloda bu iki prop \u00fczerindeki layout davran\u0131\u015flar\u0131 kar\u015f\u0131la\u015ft\u0131r\u0131lm\u0131\u015ft\u0131r:<\/p>\n\n\n\n\n\n\n
\u00d6zellik (Prop)<\/th>\nEtki Alan\u0131<\/th>\nKritik Stil Tan\u0131m\u0131<\/th>\nHata Belirtisi<\/th>\n<\/tr>\n<\/thead>\n
style<\/code><\/td>\nScrollView’\u0131n d\u0131\u015f kapsay\u0131c\u0131 boyutunu belirler.<\/td>\nflex: 1<\/code><\/td>\n\u0130\u00e7erik tamamen g\u00f6r\u00fcnmez olur veya ekrandan ta\u015far.<\/td>\n<\/tr>\n
contentContainerStyle<\/code><\/td>\n\u0130\u00e7erideki elemanlar\u0131n toplam alan\u0131n\u0131 kapsar.<\/td>\nflexGrow: 1<\/code><\/td>\nEkran dolar ancak kayd\u0131rma hareketi ger\u00e7ekle\u015fmez.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, contentContainerStyle<\/code> i\u00e7erisinde flex: 1<\/code> kullanmak s\u0131kl\u0131kla yap\u0131lan bir hatad\u0131r. E\u011fer flex: 1<\/code> verirseniz, kayd\u0131rma alan\u0131 ekran boyutuna zorla e\u015fitlenir ve kayd\u0131rma esnekli\u011fi kaybolur. Bunun yerine flexGrow: 1<\/code> kullanmak, i\u00e7eri\u011fin minimum ekran kadar geni\u015flemesini ama ihtiya\u00e7 halinde uzayarak kayd\u0131r\u0131labilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n

3. Dokunma Olay\u0131 (Touch Event) \u00c7ak\u0131\u015fmalar\u0131 ve Gesture Handler Rol\u00fc<\/h2>\n

Payla\u015f\u0131m \u00f6nizleme modallar\u0131nda kayd\u0131rma yap\u0131lamamas\u0131n\u0131n bir di\u011fer maj\u00f6r sebebi dokunma olaylar\u0131n\u0131n (touch events) yanl\u0131\u015f bile\u015fen taraf\u0131ndan yakalanmas\u0131d\u0131r (interception). React Native, dokunma hareketlerini y\u00f6netmek i\u00e7in bir Dokunma Yan\u0131tlay\u0131c\u0131 Sistemi (Gesture Responder System) kullan\u0131r. Bir kullan\u0131c\u0131 ekrana dokundu\u011funda, bile\u015fen a\u011fac\u0131ndaki en \u00fcstteki veya en uygun olan eleman bu dokunmay\u0131 sahiplenir.<\/p>\n

\u00d6zellikle alt taraftan a\u00e7\u0131lan modal (Bottom Sheet) tasar\u0131mlar\u0131nda, modala s\u00fcr\u00fckleyerek kapatma (drag to dismiss) \u00f6zelli\u011fi eklenmi\u015fse durum karma\u015f\u0131kla\u015f\u0131r. Modal\u0131n kendi pan hareketi (PanResponder) ile ScrollView<\/code> bile\u015feninin dikey kayd\u0131rma hareketi birbiriyle rekabete girer. E\u011fer modal\u0131n jest yakalay\u0131c\u0131s\u0131 daha bask\u0131nsa, kullan\u0131c\u0131 parma\u011f\u0131n\u0131 yukar\u0131 s\u00fcr\u00fckledi\u011finde i\u00e7erik kaymak yerine modal\u0131n kendisi hareket eder veya jest tamamen yutulur.<\/p>\n

PanResponder ve Dokunma Yakalay\u0131c\u0131 Metotlar<\/h3>\n

Android ve iOS i\u015fletim sistemleri dokunma \u00f6nceliklerini farkl\u0131 \u015fekillerde y\u00f6netir. \u00d6rne\u011fin Android \u00fczerinde i\u00e7 i\u00e7e ge\u00e7mi\u015f kayd\u0131r\u0131labilir alanlar varsay\u0131lan olarak kilitlenebilir. Bu durumu a\u015fmak i\u00e7in React Native bile\u015feninde nestedScrollEnabled<\/code> \u00f6zelli\u011finin aktif edilmesi \u015fartt\u0131r.<\/p>\n

Bununla birlikte, modern uygulamalarda standart React Native jest mekanizmas\u0131 yerine react-native-gesture-handler<\/code> k\u00fct\u00fcphanesi tercih edilir. Bu k\u00fct\u00fcphane, JavaScript katman\u0131ndaki gecikmeleri (thread lag) atlayarak do\u011frudan yerel seviyede jest takibi yapar. Dolay\u0131s\u0131yla payla\u015f\u0131m modal\u0131 i\u00e7erisinde standart bir ScrollView<\/code> yerine bu k\u00fct\u00fcphanenin sundu\u011fu \u00f6zel kayd\u0131rma elemanlar\u0131n\u0131 kullanmak \u00e7ak\u0131\u015fmalar\u0131 engeller.<\/p>\n

4. Payla\u015f\u0131m \u00d6nizleme (Share Preview) Modallar\u0131ndaki \u00d6zel Nedenler<\/h2>\n

Payla\u015f\u0131m \u00f6nizleme modallar\u0131 yap\u0131lar\u0131 gere\u011fi standart bir uyar\u0131 (alert) modal\u0131ndan farkl\u0131d\u0131r. Genellikle i\u00e7eriklerinde dinamik olarak y\u00fcklenen metinler, URL \u00f6nizleme kartlar\u0131, g\u00f6rsel galerileri ve hedef platform se\u00e7ici butonlar bar\u0131nd\u0131r\u0131rlar. Bu karma\u015f\u0131k yap\u0131, render (ekrana \u00e7izdirme) s\u00fcre\u00e7lerinde gecikmelere ve boyut hesaplama hatalar\u0131na yol a\u00e7ar.<\/p>\n

\u00d6zellikle d\u0131\u015f bir uygulamadan Share Extension (payla\u015f\u0131m uzant\u0131s\u0131) kanal\u0131yla veri al\u0131nd\u0131\u011f\u0131nda, verinin modala ula\u015fmas\u0131 asenkron bir s\u00fcre\u00e7tir. Veri geldi\u011finde modal boyutu aniden de\u011fi\u015febilir. E\u011fer ScrollView<\/code> y\u00fcksekli\u011fini veri y\u00fcklenmeden \u00f6nce hesaplad\u0131ysa, i\u00e7erik gelse dahi kayd\u0131rma s\u0131n\u0131rlar\u0131 g\u00fcncellenmeyebilir.<\/p>\n

Bir di\u011fer yayg\u0131n senaryo ise modal\u0131n arkas\u0131nda kalan karart\u0131 alan\u0131na (backdrop) t\u0131klay\u0131nca modal\u0131n kapanmas\u0131 i\u00e7in eklenen TouchableOpacity<\/code> veya Pressable<\/code> bile\u015fenleridir. T\u00fcm modal i\u00e7eri\u011fi bu kapatma alan\u0131n\u0131n i\u00e7ine sarmaland\u0131ysa, dokunma olaylar\u0131 ScrollView<\/code> bile\u015fenine ula\u015famadan d\u0131\u015far\u0131daki t\u0131klama eleman\u0131 taraf\u0131ndan yutulmaktad\u0131r.<\/p>\n

5. Ad\u0131m Ad\u0131m \u00c7\u00f6z\u00fcm Rehberi: Kod \u00d6rnekleri ile D\u00fczeltme<\/h2>\n

Sorunu teorik olarak anlad\u0131ktan sonra, \u015fimdi uygulamal\u0131 \u00e7\u00f6z\u00fcm a\u015famas\u0131na ge\u00e7ebiliriz. A\u015fa\u011f\u0131da kilitlenen bir payla\u015f\u0131m \u00f6nizleme modal\u0131 kodu ile bu sorunun d\u00fczeltilmi\u015f, en iyi pratikleri (best practices) i\u00e7eren halini bulabilirsiniz.<\/p>\n

Senaryo 1: Hatal\u0131 Kod Yap\u0131s\u0131 ve Tespit Edilen Yanl\u0131\u015flar<\/h3>\n

A\u015fa\u011f\u0131daki kod \u00f6rne\u011finde, geli\u015ftiricilerin s\u0131kl\u0131kla d\u00fc\u015ft\u00fc\u011f\u00fc layout ve kapsay\u0131c\u0131 hatalar\u0131 yer almaktad\u0131r. Bu kod par\u00e7as\u0131 Android ve iOS \u00fczerinde kayd\u0131rma yapmayacakt\u0131r.<\/p>\n

\n
import React from 'react';\nimport { Modal, View, Text, ScrollView, TouchableOpacity } from 'react-native';\n\nconst BadShareModal = ({ visible, onClose, shareData }) => {\n  return (\n    <Modal visible={visible} animationType=\"slide\" transparent={true}>\n      <TouchableOpacity style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} onPress={onClose}>\n        {\/* HATA 1: TouchableOpacity t\u00fcm alan\u0131 kaplay\u0131p dokunmalar\u0131 yutuyor *\/}\n        <View style={{ backgroundColor: 'white', marginTop: 100 }}>\n          {\/* HATA 2: Y\u00fckseklik s\u0131n\u0131r\u0131 yok ve flex tan\u0131mlanmam\u0131\u015f *\/}\n          <Text style={{ fontSize: 20, padding: 15 }}>Payla\u015f\u0131m \u00d6nizleme<\/Text>\n          \n          <ScrollView style={{ height: 'auto' }} contentContainerStyle={{ flex: 1 }}>\n            {\/* HATA 3: contentContainerStyle i\u00e7inde flex: 1 kullan\u0131m\u0131 kayd\u0131rmay\u0131 kilitler *\/}\n            <Text>{shareData.longText}<\/Text>\n            {\/* Dinamik gelen uzun i\u00e7erikler *\/}\n          <\/ScrollView>\n        <\/View>\n      <\/TouchableOpacity>\n    <\/Modal>\n  );\n};\n\nexport default BadShareModal;<\/code><\/pre>\n<\/div>\n
Senaryo 2: \u00c7al\u0131\u015fan ve \u0130deal Kod Mimar\u0131s\u0131<\/h3>\n
Hatal\u0131 yap\u0131daki problemleri \u00e7\u00f6zmek i\u00e7in: Dokunma yutma sorununu engellemek amac\u0131yla karart\u0131 alan\u0131n\u0131 ayr\u0131\u015ft\u0131r\u0131yoruz, ScrollView<\/code> bile\u015fenine flex: 1<\/code> veriyoruz ve Android i\u00e7in nestedScrollEnabled<\/code> ekliyoruz. Ayr\u0131ca contentContainerStyle<\/code> i\u00e7erisinde flexGrow: 1<\/code> kullan\u0131yoruz.<\/p>\n
\n
import React from 'react';\nimport { Modal, View, Text, ScrollView, Pressable, StyleSheet } from 'react-native';\n\nconst GoodShareModal = ({ visible, onClose, shareData }) => {\n  return (\n    <Modal\n      visible={visible}\n      animationType=\"slide\"\n      transparent={true}\n      onRequestClose={onClose}\n    >\n      <View style={styles.modalOverlay}>\n        {\/* Arka plan kapatma alan\u0131 ba\u011f\u0131ms\u0131z bir Pressable olarak konumland\u0131r\u0131ld\u0131 *\/}\n        <Pressable style={styles.backdrop} onPress={onClose} \/>\n        \n        <View style={styles.modalContainer}>\n          <View style={styles.header}>\n            <Text style={styles.headerText}>Payla\u015f\u0131m \u00d6nizleme<\/Text>\n          <\/View>\n\n          <ScrollView\n            style={styles.scrollArea}\n            contentContainerStyle={styles.scrollContent}\n            nestedScrollEnabled={true}\n            keyboardShouldPersistTaps=\"handled\"\n            showsVerticalScrollIndicator={true}\n          >\n            <Text style={styles.bodyText}>{shareData?.longText}<\/Text>\n            {\/* Ek \u00f6nizleme bile\u015fenleri *\/}\n          <\/ScrollView>\n        <\/View>\n      <\/View>\n    <\/Modal>\n  );\n};\n\nconst styles = StyleSheet.create({\n  modalOverlay: {\n    flex: 1,\n    justifyContent: 'flex-end',\n  },\n  backdrop: {\n    ...StyleSheet.absoluteFillObject,\n  },\n  modalContainer: {\n    maxHeight: '80%', \/\/ Modal\u0131n ekrandan ta\u015fmas\u0131n\u0131 engeller ve s\u0131n\u0131r \u00e7izer\n    minHeight: '30%',\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n    overflow: 'hidden',\n  },\n  header: {\n    padding: 16,\n  },\n  headerText: {\n    fontSize: 18,\n    fontWeight: 'bold',\n  },\n  scrollArea: {\n    flex: 1, \/\/ ScrollView'in kalan t\u00fcm alan\u0131 kaplamas\u0131n\u0131 sa\u011flar\n  },\n  scrollContent: {\n    flexGrow: 1, \/\/ \u0130\u00e7eri\u011fin esnek \u015fekilde b\u00fcy\u00fcmesine izin verir\n    padding: 16,\n  },\n  bodyText: {\n    fontSize: 14,\n    lineHeight: 20,\n  },\n});\n\nexport default GoodShareModal;<\/code><\/pre>\n<\/div>\n
6. \u0130leri D\u00fczey \u0130pu\u00e7lar\u0131: Android ve iOS Taraf\u0131ndaki Mimari Farklar<\/h2>\n
React Native uygulamalar\u0131nda her iki platform da kendi yerel grafik i\u015fleme mod\u00fcllerini \u00e7al\u0131\u015ft\u0131r\u0131r. Dolay\u0131s\u0131yla yaz\u0131lan ayn\u0131 JavaScript kodu, iOS ve Android taraf\u0131nda farkl\u0131 sonu\u00e7lar do\u011furabilir. Payla\u015f\u0131m modallar\u0131ndaki kayd\u0131rma krizlerinde platform bazl\u0131 \u015fu ayr\u0131nt\u0131lara dikkat etmek gerekir:<\/p>\n
    \n
  • iOS Native Presentation Style:<\/strong> iOS ortam\u0131nda Modal<\/code> bile\u015fenine verilen presentationStyle=\"pageSheet\"<\/code> \u00f6zelli\u011fi, i\u015fletim sisteminin kendi alt sayfa jestlerini devreye sokar. Bu durum i\u00e7teki ScrollView<\/code> jestleri ile \u00e7at\u0131\u015fabilir. E\u011fer sorun ya\u015farsan\u0131z bu de\u011feri overFullScreen<\/code> olarak de\u011fi\u015ftirmek kontrol\u00fc tekrar React Native taraf\u0131na verir.<\/li>\n
  • Android Hardware Acceleration ve Nested Scrolling:<\/strong> Android i\u015fletim sisteminde i\u00e7 i\u00e7e ge\u00e7mi\u015f kayd\u0131rma alanlar\u0131 yerel d\u00fczeyde kapal\u0131 gelebilir. nestedScrollEnabled={true}<\/code> kullanmak sadece ScrollView<\/code> i\u00e7in de\u011fil, e\u011fer modal i\u00e7inde FlatList<\/code> veya SectionList<\/code> kullan\u0131l\u0131yorsa onlar i\u00e7in de zorunludur.<\/li>\n
  • Fabric Renderer (Yeni Mimari):<\/strong> React Native’in Yeni Mimar\u0131s\u0131 (New Architecture – Fabric) ile birlikte jest y\u00f6netiminde performans art\u0131\u015f\u0131 sa\u011fland\u0131. Ancak Fabric mimarisinde boyut hesaplamalar\u0131 senkron yap\u0131ld\u0131\u011f\u0131 i\u00e7in maxHeight<\/code> de\u011ferinin modal kapsay\u0131c\u0131s\u0131na kesin olarak verilmi\u015f olmas\u0131 eskisine g\u00f6re daha da kritik hale gelmi\u015ftir.<\/li>\n<\/ul>\n
    7. Ger\u00e7ek D\u00fcnya Senaryosu: E-Ticaret Uygulamas\u0131nda \u00dcr\u00fcn Payla\u015f\u0131m Modal\u0131<\/h2>\n
    Konunun peki\u015fmesi i\u00e7in T\u00fcrkiye pazar\u0131nda faaliyet g\u00f6steren b\u00fcy\u00fck bir e-ticaret platformunun kar\u015f\u0131la\u015ft\u0131\u011f\u0131 ger\u00e7ek bir m\u00fchendislik problemini inceleyelim.<\/p>\n
    S\u00f6z konusu \u015firket, kullan\u0131c\u0131lar\u0131n bir sepeti veya \u00fcr\u00fcn listesini WhatsApp ve Instagram \u00fczerinden payla\u015fabilmesi i\u00e7in \u00f6zel bir “Payla\u015f\u0131m \u00d6nizleme Modal\u0131” geli\u015ftirdi. Bu modal\u0131n i\u00e7inde hem se\u00e7ili \u00fcr\u00fcn g\u00f6rsellerinin oldu\u011fu yatay bir ScrollView<\/code> hem de \u00fcr\u00fcn detaylar\u0131n\u0131n, indirim kuponlar\u0131n\u0131n yaz\u0131ld\u0131\u011f\u0131 dikey bir ScrollView<\/code> yer al\u0131yordu.<\/p>\n
    Canl\u0131ya \u00e7\u0131k\u0131\u015f sonras\u0131nda \u00f6zellikle Android kullan\u0131c\u0131lar\u0131ndan “Payla\u015f\u0131m ekran\u0131nda a\u015fa\u011f\u0131ya inemiyoruz, ekran donuyor” \u015feklinde yo\u011fun geri bildirimler al\u0131nd\u0131. Yap\u0131lan teknik analizde \u015fu problemler tespit edildi:<\/p>\n
      \n
    1. Yatay ve dikey kayd\u0131rma alanlar\u0131 i\u00e7 i\u00e7e ge\u00e7mi\u015fti ancak Android i\u00e7in nestedScrollEnabled<\/code> tan\u0131m\u0131 unutulmu\u015ftu.<\/li>\n
    2. Modal alt taraftan yukar\u0131 do\u011fru a\u00e7\u0131lan bir s\u00fcr\u00fcklenebilir kart (Bottom Sheet) olarak tasarlanm\u0131\u015ft\u0131. Kart\u0131n yukar\u0131 s\u00fcr\u00fckleme jesti, dikey ScrollView<\/code> hareketini tamamen engelliyordu.<\/li>\n
    3. G\u00f6rseller internetten asenkron olarak y\u00fcklendi\u011fi i\u00e7in g\u00f6rsel geldikten sonra layout yeniden hesaplanm\u0131yor, y\u00fckseklik ilk duruma g\u00f6re kilitleniyordu.<\/li>\n<\/ol>\n
      Ekip ilk ad\u0131m olarak standart React Native Modal<\/code> yap\u0131s\u0131 yerine @gorhom\/bottom-sheet<\/code> k\u00fct\u00fcphanesine ge\u00e7i\u015f yapt\u0131. Bu k\u00fct\u00fcphanenin sundu\u011fu BottomSheetScrollView<\/code> bile\u015fenini devreye ald\u0131lar. Bu \u00f6zel bile\u015fen, modal\u0131n s\u00fcr\u00fcklenme jesti ile i\u00e7eri\u011fin kayd\u0131rma jestini otomatik olarak koordine eder (gesture delegation). Ayr\u0131ca g\u00f6rseller y\u00fcklenirken onLayout<\/code> tetikleyicisi ile boyut g\u00fcncellemeleri garanti alt\u0131na al\u0131nd\u0131. Sonu\u00e7 olarak kullan\u0131c\u0131lar\u0131n ya\u015fad\u0131\u011f\u0131 donma ve kilitlenme problemleri tamamen \u00e7\u00f6z\u00fcld\u00fc.<\/p>\n
      8. \u00d6zet ve Sonu\u00e7<\/h2>\n
      React Native projelerinde payla\u015f\u0131m \u00f6nizleme modallar\u0131 (Share Preview Modals) i\u00e7erisinde ya\u015fanan ScrollView<\/code> kaymama sorunu, san\u0131lan\u0131n aksine karma\u015f\u0131k bir yaz\u0131l\u0131m hatas\u0131 de\u011fil, temel layout ve jest y\u00f6netimi eksikli\u011fidir. Bir modal i\u00e7inde kayd\u0131rma alan\u0131n\u0131 sorunsuz \u00e7al\u0131\u015ft\u0131rmak i\u00e7in \u015fu kurallar daima hat\u0131rlanmal\u0131d\u0131r:<\/p>\n
      D\u0131\u015f kapsay\u0131c\u0131 kesinlikle s\u0131n\u0131rland\u0131r\u0131lm\u0131\u015f bir y\u00fcksekli\u011fe (maxHeight<\/code> veya flex: 1<\/code>) sahip olmal\u0131d\u0131r. ScrollView<\/code> bile\u015feninin kendisine flex: 1<\/code> verilmeli, i\u00e7 i\u00e7eri\u011fi y\u00f6neten contentContainerStyle<\/code> \u00f6zelli\u011finde ise kesinlikle flex: 1<\/code> yerine flexGrow: 1<\/code> tercih edilmelidir. T\u0131klama ve kapatma olaylar\u0131n\u0131 yakalayan katmanlar kayd\u0131rma alan\u0131n\u0131n arkas\u0131na yerle\u015ftirilmeli, Android cihazlar i\u00e7in nestedScrollEnabled<\/code> ibaresi ihmal edilmemelidir.<\/p>\n
      Bu standartlar\u0131 uygulayarak uygulaman\u0131zdaki modallar\u0131n hem iOS hem de Android platformunda ak\u0131c\u0131, esnek ve yerel (native) kalitede \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n
      9. S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
      1. ScrollView i\u00e7erisindeki style ile contentContainerStyle aras\u0131ndaki fark nedir?<\/h3>\n
      style<\/code> prop’u ScrollView bile\u015feninin ekran \u00fczerindeki d\u0131\u015f boyutunu ve s\u0131n\u0131rlar\u0131n\u0131 (frame) belirler. contentContainerStyle<\/code> ise ScrollView i\u00e7indeki elemanlar\u0131 sar\u0131p sarmalayan i\u00e7 alan\u0131 y\u00f6netir. Kayd\u0131rma yap\u0131labilmesi i\u00e7in d\u0131\u015f alan\u0131n sabit veya s\u0131n\u0131rl\u0131, i\u00e7 alan\u0131n ise esnek (flexGrow: 1<\/code>) olmas\u0131 gerekir.<\/p>\n
      2. Android cihazlarda i\u00e7 i\u00e7e kayd\u0131rma sorunu neden ya\u015fan\u0131r ve nas\u0131l \u00e7\u00f6z\u00fcl\u00fcr?<\/h3>\n
      Android i\u015fletim sistemi dokunma \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek i\u00e7in varsay\u0131lan olarak i\u00e7 i\u00e7e ge\u00e7mi\u015f kayd\u0131rma alanlar\u0131nda i\u00e7teki eleman\u0131n jestlerini k\u0131s\u0131tlayabilir. Bu durumu \u00e7\u00f6zmek i\u00e7in ScrollView<\/code> bile\u015fenine nestedScrollEnabled={true}<\/code> \u00f6zelli\u011fini eklemek yeterlidir.<\/p>\n
      3. Modal karartma alan\u0131na (backdrop) ekledi\u011fim t\u0131klama \u00f6zelli\u011fi kayd\u0131rmay\u0131 engeller mi?<\/h3>\n
      Evet, e\u011fer t\u00fcm modal i\u00e7eri\u011fini kapsayan bir TouchableOpacity<\/code> veya Pressable<\/code> kullan\u0131rsan\u0131z, bu eleman t\u00fcm dokunma olaylar\u0131n\u0131 kendi \u00fczerine alabilir ve ScrollView<\/code> bile\u015fenine dokunma ula\u015fmas\u0131n\u0131 engeller. \u00c7\u00f6z\u00fcm olarak karartma alan\u0131n\u0131 modal i\u00e7eri\u011finden ba\u011f\u0131ms\u0131z mutlak konumland\u0131r\u0131lm\u0131\u015f (position: 'absolute'<\/code>) ayr\u0131 bir eleman olarak yazmal\u0131s\u0131n\u0131z.<\/p>\n
      4. React Native standart ScrollView yerine Gesture Handler kullanmak \u015fart m\u0131d\u0131r?<\/h3>\n
      Basit modallarda standart React Native ScrollView<\/code> yeterlidir. Ancak s\u00fcr\u00fcklenerek kapat\u0131lan karma\u015f\u0131k alt modallar (Bottom Sheet) veya i\u00e7 i\u00e7e \u00e7ok say\u0131da jest i\u00e7eren yap\u0131larda react-native-gesture-handler<\/code> k\u00fct\u00fcphanesinin ScrollView<\/code> bile\u015fenini kullanmak jest \u00e7ak\u0131\u015fmalar\u0131n\u0131 tamamen ortadan kald\u0131r\u0131r.<\/p>\n
      #ReactNative #MobileDevelopment #Javascript #SoftwareArchitecture #MobileUX<\/p>\n","protected":false},"excerpt":{"rendered":"React Native projenizde bir payla\u015f\u0131m \u00f6nizleme modal\u0131 (Share Preview Modal) geli\u015ftirdiniz ancak ScrollView bile\u015feni bir t\u00fcrl\u00fc kayd\u0131r\u0131lm\u0131yor mu?","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-43854","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nReact Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz?\" \/>\n<meta property=\"og:description\" content=\"React Native projenizde bir payla\u015f\u0131m \u00f6nizleme modal\u0131 (Share Preview Modal) geli\u015ftirdiniz ancak ScrollView bile\u015feni bir t\u00fcrl\u00fc kayd\u0131r\u0131lm\u0131yor mu?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-05T06:08:55+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz?\",\"datePublished\":\"2026-08-05T06:08:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/\"},\"wordCount\":2139,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/\",\"name\":\"React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-08-05T06:08:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/","og_locale":"tr_TR","og_type":"article","og_title":"React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz?","og_description":"React Native projenizde bir payla\u015f\u0131m \u00f6nizleme modal\u0131 (Share Preview Modal) geli\u015ftirdiniz ancak ScrollView bile\u015feni bir t\u00fcrl\u00fc kayd\u0131r\u0131lm\u0131yor mu?","og_url":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-08-05T06:08:55+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"13 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz?","datePublished":"2026-08-05T06:08:55+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/"},"wordCount":2139,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/","url":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/","name":"React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-08-05T06:08:55+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-native-modal-icinde-scrollview-neden-calismaz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Native Modal \u0130\u00e7inde ScrollView Neden \u00c7al\u0131\u015fmaz?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=43854"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/43854\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=43854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=43854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=43854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}