Update common example not to disable E2E (#3531)

## Description

Removes usage of `StatusBar` component, which disables edge-to-edge mode
and replaces RN's `SafeAreaView` with `useSafeAreaInsets` from
`react-native-safe-area-context`, which also works on Android.

## Test plan

iOS:
|Before|After|
|-|-|
|<img width="544" alt="Screenshot 2025-05-26 at 09 18 52"
src="https://github.com/user-attachments/assets/7c4eb741-e5c5-4176-9465-431d399f480a"
/>|<img width="544" alt="Screenshot 2025-05-26 at 09 19 18"
src="https://github.com/user-attachments/assets/5ad4e627-abf2-42fc-851b-cd6710b461a8"
/>|

Android:
|Before|After|
|-|-|
|<img width="436" alt="Screenshot 2025-05-26 at 09 18 57"
src="https://github.com/user-attachments/assets/57a316d3-5344-40e9-b161-2da2a7a55f99"
/>|<img width="436" alt="Screenshot 2025-05-26 at 09 36 45"
src="https://github.com/user-attachments/assets/55aab0ac-08f8-48e1-aaad-3bf7a6878b75"
/>|

Author: j-piasecki

apps/common-app/App.tsx

@@ -1,13 +1,5 @@
 import React, { useEffect } from 'react';
-import {
-  Text,
-  View,
-  StyleSheet,
-  Platform,
-  Dimensions,
-  StatusBar,
-  SafeAreaView,
-} from 'react-native';
+import { Text, View, StyleSheet, Platform, Dimensions } from 'react-native';
 import {
   createStackNavigator,
   StackNavigationProp,
@@ -19,6 +11,7 @@ import {
   RectButton,
   Switch,
 } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import OverflowParent from './src/release_tests/overflowParent';
 import DoublePinchRotate from './src/release_tests/doubleScalePinchAndRotate';
@@ -260,7 +253,6 @@ const Stack = createStackNavigator<RootStackParamList>();
 export default function App() {
   return (
     <GestureHandlerRootView>
-      <StatusBar barStyle="dark-content" />
       <NavigationContainer>
         <Stack.Navigator
           screenOptions={{
@@ -306,6 +298,8 @@ function navigate(
 }
 
 function MainScreen({ navigation }: StackScreenProps<ParamListBase>) {
+  const insets = useSafeAreaInsets();
+
   useEffect(() => {
     void AsyncStorage.multiGet([OPEN_LAST_EXAMPLE_KEY, LAST_EXAMPLE_KEY]).then(
       ([openLastExample, lastExample]) => {
@@ -321,12 +315,16 @@ function MainScreen({ navigation }: StackScreenProps<ParamListBase>) {
   }, []);
 
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <ListWithHeader
         style={styles.list}
         sections={EXAMPLES}
         keyExtractor={(example) => example.name}
         ListHeaderComponent={OpenLastExampleSetting}
+        contentContainerStyle={{
+          paddingBottom: insets.bottom,
+          paddingTop: insets.top,
+        }}
         renderItem={({ item }) => (
           <MainScreenItem
             name={item.name}
@@ -339,7 +337,7 @@ function MainScreen({ navigation }: StackScreenProps<ParamListBase>) {
         )}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
       />
-    </SafeAreaView>
+    </View>
   );
 }
 

apps/common-app/src/ListWithHeader/ListWithHeader.tsx

@@ -4,6 +4,7 @@ import {
   ScrollViewProps,
   SectionList,
   SectionListProps,
+  StyleSheet,
 } from 'react-native';
 import Animated, {
   SharedValue,
@@ -73,9 +74,22 @@ export function ListWithHeader<ItemT, SectionT>(
     };
   });
 
+  const contentContainerStyle =
+    StyleSheet.flatten(props.contentContainerStyle) || {};
+  if (typeof contentContainerStyle.paddingTop !== 'number') {
+    contentContainerStyle.paddingTop = 0;
+    console.error(
+      'ListWithHeader: contentContainerStyle.paddingTop should be a number.'
+    );
+  }
+
   return (
     <GestureDetector gesture={dragGesture}>
-      <Animated.View style={[{ flex: 1 }, containerProps]}>
+      <Animated.View
+        style={[
+          { flex: 1, marginTop: contentContainerStyle.paddingTop },
+          containerProps,
+        ]}>
         <Header scrollOffset={scrollOffset} />
         <SectionList
           {...props}
@@ -137,7 +151,10 @@ const ScrollComponentWithOffset = ({
       <Animated.ScrollView
         {...props}
         ref={scrollRef}
-        contentContainerStyle={{ paddingTop: HEADER_HEIGHT }}
+        contentContainerStyle={[
+          props.contentContainerStyle,
+          { paddingTop: HEADER_HEIGHT },
+        ]}
         scrollEventThrottle={1}
         animatedProps={scrollProps}
       />