Skip to content

Commit 3163f58

Browse files
shirakabashirakaba
committed
Merge example-prev into example
1 parent 2b3350f commit 3163f58

21 files changed

+963
-125
lines changed

‎example/.bundle/config

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
BUNDLE_PATH: "vendor/bundle"
2+
BUNDLE_FORCE_RUBY_PLATFORM: 1

‎example/App.tsx

Lines changed: 0 additions & 118 deletions
This file was deleted.

‎example/Gemfile

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
source 'https://rubygems.org'
2+
3+
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4+
ruby ">= 2.6.10"
5+
6+
# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
7+
# bound in the template on Cocoapods with next React Native release.
8+
gem 'cocoapods', '>= 1.13', '< 1.15'
9+
gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'

‎example/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
* @format
33
*/
44

5-
import {AppRegistry} from 'react-native';
6-
import App from './App';
7-
import {name as appName} from './app.json';
5+
import { AppRegistry } from 'react-native';
6+
import App from './src/App';
7+
import { name as appName } from './app.json';
88

99
AppRegistry.registerComponent(appName, () => App);

‎example/package.json

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,18 @@
2020
},
2121
"dependencies": {
2222
"@callstack/react-native-visionos": "^0.73.0",
23-
"react": "18.2.0",
24-
"react-native": "~0.73.9",
23+
"@react-native-async-storage/async-storage": "^1.23.1",
24+
"@react-navigation/bottom-tabs": "^6.5.20",
25+
"@react-navigation/native-stack": "^6.9.26",
26+
"@react-navigation/native": "^6.1.17",
27+
"@react-navigation/stack": "^6.3.29",
28+
"react-native-gesture-handler": "^2.17.1",
2529
"react-native-macos": "~0.73.30",
26-
"react-native-windows": "~0.73.17"
30+
"react-native-safe-area-context": "link:../",
31+
"react-native-screens": "^3.32.0",
32+
"react-native-windows": "~0.73.17",
33+
"react-native": "~0.73.9",
34+
"react": "18.2.0"
2735
},
2836
"devDependencies": {
2937
"@babel/core": "^7.20.0",

‎example/react-native.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const project = (() => {
77
},
88
ios: {
99
sourceDir: "ios",
10+
automaticPodsInstallation: true,
1011
},
1112
windows: {
1213
sourceDir: "windows",

‎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+
}

‎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+
}

0 commit comments

Comments
 (0)