From 6f3a779d52286665fd5ff243401dd001722f7e7c Mon Sep 17 00:00:00 2001
From: Alan Lee <alanlee2@meta.com>
Date: Mon, 18 Nov 2024 18:06:08 -0800
Subject: [PATCH 1/2] add react-native-safe-area-context to handle edge-to-edge
 on Android targetSdk 35

---
 template/App.tsx      | 75 +++++++++++++++++++++++++------------------
 template/package.json |  3 +-
 2 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/template/App.tsx b/template/App.tsx
index 125fe1b..740860b 100644
--- a/template/App.tsx
+++ b/template/App.tsx
@@ -8,7 +8,6 @@
 import React from 'react';
 import type {PropsWithChildren} from 'react';
 import {
-  SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
@@ -24,6 +23,7 @@ import {
   LearnMoreLinks,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import {SafeAreaProvider, SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 
 type SectionProps = PropsWithChildren<{
   title: string;
@@ -56,43 +56,56 @@ function Section({children, title}: SectionProps): React.JSX.Element {
 }
 
 function App(): React.JSX.Element {
+  return (
+    <SafeAreaProvider>
+      <MainContent />
+    </SafeAreaProvider>
+  );
+}
+
+function MainContent(): React.JSX.Element {
+  const insets = useSafeAreaInsets();
+
   const isDarkMode = useColorScheme() === 'dark';
 
   const backgroundStyle = {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+    bottomPadding: insets.bottom,
   };
 
+  const contentContainerStyle = { paddingBottom: insets.bottom };
+
   return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <View style={backgroundStyle}>
+        <StatusBar
+          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+          backgroundColor={backgroundStyle.backgroundColor}
+        />
+        <ScrollView
+          contentContainerStyle={contentContainerStyle}
+          style={backgroundStyle}>
+          <Header badgeTopMargin={insets.top}/>
+          <View
+            style={{
+              backgroundColor: isDarkMode ? Colors.black : Colors.white,
+            }}>
+            <Section title="Step One">
+              Edit <Text style={styles.highlight}>App.tsx</Text> to change this
+              screen and then come back to see your edits.
+            </Section>
+            <Section title="See Your Changes">
+              <ReloadInstructions />
+            </Section>
+            <Section title="Debug">
+              <DebugInstructions />
+            </Section>
+            <Section title="Learn More">
+              Read the docs to discover what to do next:
+            </Section>
+            <LearnMoreLinks />
+          </View>
+        </ScrollView>
+      </View>
   );
 }
 
diff --git a/template/package.json b/template/package.json
index f1c93ea..a97d8ff 100644
--- a/template/package.json
+++ b/template/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "18.3.1",
-    "react-native": "1000.0.0"
+    "react-native": "1000.0.0",
+    "react-native-safe-area-context": "^4.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

From 12b44de8baeeff5206db4b6f9441b6970dd69e91 Mon Sep 17 00:00:00 2001
From: Alan Lee <alanlee2@meta.com>
Date: Mon, 18 Nov 2024 18:06:25 -0800
Subject: [PATCH 2/2] update Android targetSdk to 35

---
 template/android/build.gradle | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/template/android/build.gradle b/template/android/build.gradle
index a62d6da..9766946 100644
--- a/template/android/build.gradle
+++ b/template/android/build.gradle
@@ -3,7 +3,7 @@ buildscript {
         buildToolsVersion = "35.0.0"
         minSdkVersion = 24
         compileSdkVersion = 35
-        targetSdkVersion = 34
+        targetSdkVersion = 35
         ndkVersion = "27.1.12297006"
         kotlinVersion = "2.0.21"
     }