Skip to content

Commit a2f2abe

Browse files
vonovakvonovak
committed
feat: copy over sources
1 parent 11ada78 commit a2f2abe

14 files changed

+927
-0
lines changed

‎rnta-example/src/App.tsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import * as React from 'react';
2+
import { DevSettings, View, Text, StatusBar } from 'react-native';
3+
import AsyncStorage from '@react-native-async-storage/async-storage';
4+
import HooksExample from './HooksExample';
5+
import SafeAreaViewExample from './SafeAreaViewExample';
6+
import SafeAreaViewEdgesExample from './SafeAreaViewEdgesExample';
7+
// import ReactNavigationExample from './ReactNavigationExample';
8+
import ReactNavigationNativeStackExample from './ReactNavigationNativeStackExample';
9+
10+
const STORAGE_KEY = 'rnsac-current-example-v2';
11+
12+
type Example =
13+
| 'safe-area-view'
14+
| 'safe-area-view-edges'
15+
| 'hooks'
16+
| 'react-navigation'
17+
| 'native-stack';
18+
19+
export default function App() {
20+
const [currentExample, setCurrentExample] = React.useState<Example | null>(
21+
null,
22+
);
23+
const [statusBarHidden, setStatusBarHidden] = React.useState(false);
24+
25+
React.useEffect(() => {
26+
async function loadCurrentExample() {
27+
const example = await AsyncStorage.getItem(STORAGE_KEY);
28+
setCurrentExample((example as Example | null) ?? null);
29+
}
30+
loadCurrentExample();
31+
}, []);
32+
33+
React.useEffect(() => {
34+
async function saveCurrentExample() {
35+
if (currentExample != null) {
36+
await AsyncStorage.setItem(STORAGE_KEY, currentExample);
37+
}
38+
}
39+
saveCurrentExample();
40+
}, [currentExample]);
41+
42+
React.useEffect(() => {
43+
DevSettings.addMenuItem('Toggle Status Bar', () => {
44+
setStatusBarHidden((s) => !s);
45+
});
46+
DevSettings.addMenuItem('Show SafeAreaView Example', () => {
47+
setCurrentExample('safe-area-view');
48+
});
49+
DevSettings.addMenuItem('Show SafeAreaView Edges Example', () => {
50+
setCurrentExample('safe-area-view-edges');
51+
});
52+
DevSettings.addMenuItem('Show Hooks Example', () => {
53+
setCurrentExample('hooks');
54+
});
55+
DevSettings.addMenuItem('Show React Navigation Example', () => {
56+
setCurrentExample('react-navigation');
57+
});
58+
DevSettings.addMenuItem('Show Native Stack Example', () => {
59+
setCurrentExample('native-stack');
60+
});
61+
}, []);
62+
63+
let content: React.ReactElement<unknown>;
64+
switch (currentExample) {
65+
case 'safe-area-view':
66+
content = <SafeAreaViewExample />;
67+
break;
68+
case 'safe-area-view-edges':
69+
content = <SafeAreaViewEdgesExample />;
70+
break;
71+
case 'hooks':
72+
content = <HooksExample />;
73+
break;
74+
// case 'react-navigation':
75+
// content = <ReactNavigationExample />;
76+
// break;
77+
case 'native-stack':
78+
content = <ReactNavigationNativeStackExample />;
79+
break;
80+
default:
81+
content = (
82+
<View
83+
style={{
84+
flex: 1,
85+
alignItems: 'center',
86+
justifyContent: 'center',
87+
padding: 24,
88+
backgroundColor: 'white',
89+
}}
90+
>
91+
<Text style={{ textAlign: 'center', fontSize: 14 }}>
92+
Open the dev menu to choose an example
93+
</Text>
94+
</View>
95+
);
96+
break;
97+
}
98+
99+
return (
100+
<>
101+
<StatusBar
102+
hidden={statusBarHidden}
103+
backgroundColor="rgba(0, 0, 0, 0.3)"
104+
/>
105+
{content}
106+
</>
107+
);
108+
}

‎rnta-example/src/HooksExample.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import * as React from 'react';
2+
import { View, Text, StatusBar, ScrollView, TextInput } from 'react-native';
3+
4+
import {
5+
SafeAreaProvider,
6+
useSafeAreaInsets,
7+
initialWindowMetrics,
8+
useSafeAreaFrame,
9+
} from 'react-native-safe-area-context';
10+
11+
const DataView = ({ data }: { data: object | null | undefined }) => (
12+
<Text style={{ fontSize: 16, lineHeight: 24, color: '#292929' }}>
13+
{data == null
14+
? 'null'
15+
: Object.entries(data)
16+
.map(([key, value]) => `${key}: ${value}`)
17+
.join('\n')}
18+
</Text>
19+
);
20+
21+
const Card = ({
22+
title,
23+
children,
24+
}: {
25+
title: string;
26+
children: React.ReactNode;
27+
}) => (
28+
<View style={{ padding: 16, backgroundColor: 'white', marginBottom: 4 }}>
29+
<Text
30+
style={{
31+
fontSize: 20,
32+
fontWeight: 'bold',
33+
marginBottom: 16,
34+
color: '#292929',
35+
}}
36+
>
37+
{title}
38+
</Text>
39+
{children}
40+
</View>
41+
);
42+
43+
const BORDER_WIDTH = 8;
44+
45+
function SimpleExampleScreen() {
46+
const insets = useSafeAreaInsets();
47+
const frame = useSafeAreaFrame();
48+
49+
return (
50+
<>
51+
<StatusBar barStyle="dark-content" backgroundColor="transparent" />
52+
<View
53+
style={{
54+
width: frame.width,
55+
height: frame.height,
56+
backgroundColor: 'red',
57+
paddingTop: insets.top - BORDER_WIDTH,
58+
paddingLeft: insets.left - BORDER_WIDTH,
59+
paddingBottom: insets.bottom - BORDER_WIDTH,
60+
paddingRight: insets.right - BORDER_WIDTH,
61+
borderColor: 'blue',
62+
borderWidth: BORDER_WIDTH,
63+
}}
64+
>
65+
<ScrollView style={{ flex: 1, backgroundColor: '#eee' }}>
66+
<Card title="Input">
67+
<TextInput style={{ backgroundColor: '#eee', borderRadius: 3 }} />
68+
</Card>
69+
<Card title="Provider insets">
70+
<DataView data={insets} />
71+
</Card>
72+
<Card title="Provider frame">
73+
<DataView data={frame} />
74+
</Card>
75+
<Card title="Initial window insets">
76+
<DataView data={initialWindowMetrics?.insets} />
77+
</Card>
78+
<Card title="Initial window frame">
79+
<DataView data={initialWindowMetrics?.frame} />
80+
</Card>
81+
</ScrollView>
82+
</View>
83+
</>
84+
);
85+
}
86+
87+
export default function SimpleExample() {
88+
return (
89+
<View style={{ marginTop: 0, flex: 1 }}>
90+
<SafeAreaProvider>
91+
<SimpleExampleScreen />
92+
</SafeAreaProvider>
93+
</View>
94+
);
95+
}

‎rnta-example/src/ReactNavigationExample.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
2+
import { NavigationContainer } from '@react-navigation/native';
3+
import { createStackNavigator } from '@react-navigation/stack';
4+
import * as React from 'react';
5+
import ReactNavigationDetailScreen from './components/ReactNavigationDetailScreen';
6+
import ReactNavigationHomeScreen from './components/ReactNavigationHomeScreen';
7+
import ReactNavigationSettingsScreen from './components/ReactNavigationSettingsScreen';
8+
import { SafeAreaProvider } from 'react-native-safe-area-context';
9+
import ReactNavigationModalDetailScreen from './components/ReactNavigationModalDetailScreen';
10+
11+
const Tab = createBottomTabNavigator();
12+
13+
function TabsScreen() {
14+
return (
15+
<Tab.Navigator>
16+
<Tab.Screen name="Home" component={ReactNavigationHomeScreen} />
17+
<Tab.Screen name="Settings" component={ReactNavigationSettingsScreen} />
18+
</Tab.Navigator>
19+
);
20+
}
21+
22+
const Stack = createStackNavigator();
23+
24+
export default function ReactNavigationExample() {
25+
return (
26+
<SafeAreaProvider>
27+
<NavigationContainer>
28+
<Stack.Navigator
29+
screenOptions={{
30+
headerShown: false,
31+
gestureEnabled: true,
32+
}}
33+
>
34+
<Stack.Screen name="Root">
35+
{() => (
36+
<Stack.Navigator>
37+
<Stack.Screen
38+
name="Tabs"
39+
component={TabsScreen}
40+
options={{ title: 'React Navigation 5' }}
41+
/>
42+
<Stack.Screen
43+
name="Details"
44+
component={ReactNavigationDetailScreen}
45+
/>
46+
</Stack.Navigator>
47+
)}
48+
</Stack.Screen>
49+
<Stack.Screen
50+
name="ModalDetails"
51+
component={ReactNavigationModalDetailScreen}
52+
/>
53+
</Stack.Navigator>
54+
</NavigationContainer>
55+
</SafeAreaProvider>
56+
);
57+
}

‎rnta-example/src/ReactNavigationNativeStackExample.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
2+
import { NavigationContainer } from '@react-navigation/native';
3+
import * as React from 'react';
4+
import { SafeAreaProvider } from 'react-native-safe-area-context';
5+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
6+
import ReactNavigationDetailScreen from './components/ReactNavigationDetailScreen';
7+
import ReactNavigationHomeScreen from './components/ReactNavigationHomeScreen';
8+
import ReactNavigationModalDetailScreen from './components/ReactNavigationModalDetailScreen';
9+
import ReactNavigationSettingsScreen from './components/ReactNavigationSettingsScreen';
10+
import { withProvider } from './components/withProvider';
11+
12+
const HomeScreenWithProvider = withProvider(ReactNavigationHomeScreen);
13+
const SettingsScreenWithProvider = withProvider(ReactNavigationSettingsScreen);
14+
const DetailScreenWithProvider = withProvider(ReactNavigationDetailScreen);
15+
const ModalDetailScreenWithProvider = withProvider(
16+
ReactNavigationModalDetailScreen,
17+
);
18+
19+
const Tab = createBottomTabNavigator();
20+
21+
const TabsScreenWithProvider = withProvider(() => {
22+
return (
23+
<Tab.Navigator>
24+
<Tab.Screen name="Home" component={HomeScreenWithProvider} />
25+
<Tab.Screen name="Settings" component={SettingsScreenWithProvider} />
26+
</Tab.Navigator>
27+
);
28+
});
29+
30+
const Stack = createNativeStackNavigator();
31+
32+
export default function ReactNavigationNativeStackExample() {
33+
return (
34+
<SafeAreaProvider>
35+
<NavigationContainer>
36+
<Stack.Navigator
37+
screenOptions={{ headerShown: false, presentation: 'modal' }}
38+
>
39+
<Stack.Screen name="Root">
40+
{() => (
41+
<Stack.Navigator>
42+
<Stack.Screen
43+
name="Tabs"
44+
component={TabsScreenWithProvider}
45+
options={{ title: 'Native Stack' }}
46+
/>
47+
<Stack.Screen
48+
name="Details"
49+
component={DetailScreenWithProvider}
50+
/>
51+
</Stack.Navigator>
52+
)}
53+
</Stack.Screen>
54+
<Stack.Screen
55+
name="ModalDetails"
56+
component={ModalDetailScreenWithProvider}
57+
/>
58+
</Stack.Navigator>
59+
</NavigationContainer>
60+
</SafeAreaProvider>
61+
);
62+
}

0 commit comments

Comments
 (0)