Skip to content

Commit 389e5bc

Browse files
kmichalikkkmichalikk
committed
Fix safe area
1 parent 9d3da39 commit 389e5bc

2 files changed

Lines changed: 81 additions & 75 deletions

File tree

‎apps/Example.tsx‎

Lines changed: 60 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import { ScreensDarkTheme, ScreensLightTheme } from './src/shared/styling/adapte
3838
import LegacyTestsScreen from './src/tests/LegacyTestsScreen';
3939
import SingleFeatureTests from './src/tests/single-feature-tests';
4040
import ComponentIntegrationTests from './src/tests/component-integration-tests';
41+
import { SafeAreaView } from 'react-native-safe-area-context';
4142

4243
function isPlatformReady(name: keyof typeof SCREENS) {
4344
if (Platform.isTV) {
@@ -157,67 +158,69 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
157158
const isDark = useTheme().dark;
158159

159160
return (
160-
<ScrollView testID="root-screen-examples-scrollview" contentInsetAdjustmentBehavior="automatic">
161-
<SettingsSwitch
162-
style={styles.switch}
163-
label="Right to left"
164-
value={I18nManager.isRTL}
165-
onValueChange={() => {
166-
I18nManager.forceRTL(!I18nManager.isRTL);
167-
RNRestart.Restart();
168-
}}
169-
testID="root-screen-switch-rtl"
170-
/>
171-
<SettingsSwitch
172-
style={styles.switch}
173-
label="Dark mode"
174-
value={isDark}
175-
onValueChange={toggleTheme}
176-
/>
177-
<ThemedText style={styles.label} testID="root-screen-examples-header">
178-
Examples
179-
</ThemedText>
180-
{examples.map(name => (
161+
<SafeAreaView edges={{ top: 'off', bottom: 'maximum' }}>
162+
<ScrollView testID="root-screen-examples-scrollview">
163+
<SettingsSwitch
164+
style={styles.switch}
165+
label="Right to left"
166+
value={I18nManager.isRTL}
167+
onValueChange={() => {
168+
I18nManager.forceRTL(!I18nManager.isRTL);
169+
RNRestart.Restart();
170+
}}
171+
testID="root-screen-switch-rtl"
172+
/>
173+
<SettingsSwitch
174+
style={styles.switch}
175+
label="Dark mode"
176+
value={isDark}
177+
onValueChange={toggleTheme}
178+
/>
179+
<ThemedText style={styles.label} testID="root-screen-examples-header">
180+
Examples
181+
</ThemedText>
182+
{examples.map(name => (
183+
<ListItem
184+
key={name}
185+
testID={`root-screen-example-${name}`}
186+
title={SCREENS[name].title}
187+
onPress={() => navigation.navigate(name)}
188+
disabled={!isPlatformReady(name)}
189+
/>
190+
))}
191+
<ThemedText style={styles.label}>Playgrounds</ThemedText>
192+
{playgrounds.map(name => (
193+
<ListItem
194+
key={name}
195+
testID={`root-screen-playground-${name}`}
196+
title={SCREENS[name].title}
197+
onPress={() => navigation.navigate(name)}
198+
disabled={!isPlatformReady(name)}
199+
/>
200+
))}
201+
<ThemedText style={styles.label}>Single Feature Tests</ThemedText>
202+
<ListItem
203+
key="SingleFeatureTests"
204+
testID="root-screen-single-feature-tests"
205+
title="Single Feature Tests"
206+
onPress={() => navigation.navigate("SingleFeatureTests")}
207+
/>
208+
<ThemedText style={styles.label}>Component Integration Tests</ThemedText>
181209
<ListItem
182-
key={name}
183-
testID={`root-screen-example-${name}`}
184-
title={SCREENS[name].title}
185-
onPress={() => navigation.navigate(name)}
186-
disabled={!isPlatformReady(name)}
210+
key="ComponentIntegrationTests"
211+
testID="root-screen-component-integration-tests"
212+
title="Component Integration Tests"
213+
onPress={() => navigation.navigate("ComponentIntegrationTests")}
187214
/>
188-
))}
189-
<ThemedText style={styles.label}>Playgrounds</ThemedText>
190-
{playgrounds.map(name => (
215+
<ThemedText style={styles.label}>Legacy Tests</ThemedText>
191216
<ListItem
192-
key={name}
193-
testID={`root-screen-playground-${name}`}
194-
title={SCREENS[name].title}
195-
onPress={() => navigation.navigate(name)}
196-
disabled={!isPlatformReady(name)}
217+
key="LegacyTests"
218+
testID="root-screen-legacy-tests"
219+
title="Legacy Tests"
220+
onPress={() => navigation.navigate("LegacyTests")}
197221
/>
198-
))}
199-
<ThemedText style={styles.label}>Single Feature Tests</ThemedText>
200-
<ListItem
201-
key="SingleFeatureTests"
202-
testID="root-screen-single-feature-tests"
203-
title="Single Feature Tests"
204-
onPress={() => navigation.navigate("SingleFeatureTests")}
205-
/>
206-
<ThemedText style={styles.label}>Component Integration Tests</ThemedText>
207-
<ListItem
208-
key="ComponentIntegrationTests"
209-
testID="root-screen-component-integration-tests"
210-
title="Component Integration Tests"
211-
onPress={() => navigation.navigate("ComponentIntegrationTests")}
212-
/>
213-
<ThemedText style={styles.label}>Legacy Tests</ThemedText>
214-
<ListItem
215-
key="LegacyTests"
216-
testID="root-screen-legacy-tests"
217-
title="Legacy Tests"
218-
onPress={() => navigation.navigate("LegacyTests")}
219-
/>
220-
</ScrollView>
222+
</ScrollView>
223+
</SafeAreaView>
221224
);
222225
};
223226

‎apps/src/tests/LegacyTestsScreen.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ScrollView, StyleSheet, useColorScheme } from 'react-native';
55
import { ListItem, SettingsSwitch } from '../shared';
66
import { ScreensDarkTheme, ScreensLightTheme } from '../shared/styling/adapter/react-navigation';
77
import { createNativeStackNavigator } from '@react-navigation/native-stack';
8+
import { SafeAreaView } from 'react-native-safe-area-context';
89

910
const SCREENS: Record<
1011
string,
@@ -90,24 +91,26 @@ function MainScreen (props: { navigation: NavigationProp<LegacyTestStackParamLis
9091
const filteredTests = screens.filter(searchFilter);
9192

9293
return (
93-
<ScrollView testID="legacy-tests-scrollview" contentInsetAdjustmentBehavior="automatic">
94-
<SettingsSwitch
95-
style={styles.switch}
96-
label="Search bar"
97-
value={searchBarEnabled}
98-
onValueChange={() => setSearchBarEnabled(!searchBarEnabled)}
99-
testID="legacy-tests-search-bar"
100-
/>
101-
{filteredTests.map(name => (
102-
<ListItem
103-
key={name}
104-
testID={`legacy-tests-${name}`}
105-
title={SCREENS[name].title}
106-
onPress={() => navigation.navigate(name)}
107-
disabled={false}
108-
/>
109-
))}
110-
</ScrollView>
94+
<SafeAreaView edges={{ top: 'off', bottom: 'maximum' }}>
95+
<ScrollView testID="legacy-tests-scrollview">
96+
<SettingsSwitch
97+
style={styles.switch}
98+
label="Search bar"
99+
value={searchBarEnabled}
100+
onValueChange={() => setSearchBarEnabled(!searchBarEnabled)}
101+
testID="legacy-tests-search-bar"
102+
/>
103+
{filteredTests.map(name => (
104+
<ListItem
105+
key={name}
106+
testID={`legacy-tests-${name}`}
107+
title={SCREENS[name].title}
108+
onPress={() => navigation.navigate(name)}
109+
disabled={false}
110+
/>
111+
))}
112+
</ScrollView>
113+
</SafeAreaView>
111114
);
112115
};
113116

0 commit comments

Comments
 (0)