Skip to content

Commit 29ae6f4

Browse files
brentvatnebrentvatne
authored
Safe area example (react-navigation#2890)
* Add SafeAreaEample for testing * Remove portrait default lock on SafeAreaExample and add a spacer between buttons
1 parent f899b2e commit 29ae6f4

File tree

14 files changed

+4513
-0
lines changed

14 files changed

+4513
-0
lines changed

‎examples/SafeAreaExample/.babelrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": ["babel-preset-expo"],
3+
"env": {
4+
"development": {
5+
"plugins": ["transform-react-jsx-source"]
6+
}
7+
}
8+
}

‎examples/SafeAreaExample/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/**/*
2+
.expo/*
3+
npm-debug.*

‎examples/SafeAreaExample/.watchmanconfig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎examples/SafeAreaExample/App.js

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
import React from 'react';
2+
import { ScrollView, StyleSheet, Text, View } from 'react-native';
3+
import { StackNavigator, withNavigation } from 'react-navigation';
4+
import { Constants } from 'expo';
5+
import Touchable from 'react-native-platform-touchable';
6+
import TabsScreen from './screens/TabsScreen';
7+
import DrawerScreen from './screens/DrawerScreen';
8+
import createDumbStack from './screens/createDumbStack';
9+
import createDumbTabs from './screens/createDumbTabs';
10+
11+
export default class App extends React.Component {
12+
render() {
13+
return <RootStack />;
14+
}
15+
}
16+
17+
@withNavigation
18+
class ExampleItem extends React.Component {
19+
render() {
20+
return (
21+
<View
22+
style={{
23+
borderBottomColor: '#eee',
24+
borderBottomWidth: 1,
25+
}}>
26+
<Touchable
27+
onPress={this._handlePress}
28+
style={{
29+
height: 50,
30+
alignItems: 'center',
31+
justifyContent: 'center',
32+
backgroundColor: this.props.common ? '#fffcd3' : '#fff',
33+
}}>
34+
<Text style={{ fontSize: 15 }}>
35+
{this.props.title} {this.props.common ? '(commonly used)' : null}
36+
</Text>
37+
</Touchable>
38+
</View>
39+
);
40+
}
41+
42+
_handlePress = () => {
43+
this.props.navigation.navigate(this.props.route);
44+
};
45+
}
46+
47+
class ExampleListScreen extends React.Component {
48+
render() {
49+
return (
50+
<View style={{ flex: 1 }}>
51+
<ScrollView
52+
style={{ flex: 1 }}
53+
contentContainerStyle={{ paddingTop: 50, backgroundColor: '#fff' }}>
54+
<Text
55+
style={{
56+
fontSize: 25,
57+
textAlign: 'center',
58+
marginBottom: 20,
59+
paddingBottom: 20,
60+
}}>
61+
SafeAreaView Examples
62+
</Text>
63+
64+
<ExampleItem title="Basic Tabs" route="tabs" common />
65+
{/* <ExampleItem title="Basic Drawer" route="drawer" /> */}
66+
<ExampleItem title="Header height" route="headerHeight" common />
67+
<ExampleItem title="Header padding" route="headerPadding" />
68+
<ExampleItem
69+
title="Header height and padding"
70+
route="headerHeightAndPadding"
71+
/>
72+
<ExampleItem
73+
title="Header padding as percent"
74+
route="headerPaddingPercent"
75+
/>
76+
<ExampleItem title="Header with margin" route="headerMargin" />
77+
<ExampleItem title="Tab bar height" route="tabBarHeight" common />
78+
<ExampleItem title="Tab bar padding" route="tabBarPadding" common />
79+
<ExampleItem
80+
common
81+
title="Tab bar height and padding"
82+
route="tabBarHeightAndPadding"
83+
/>
84+
<ExampleItem title="Tab bar margin" route="tabBarMargin" />
85+
</ScrollView>
86+
<View
87+
style={{
88+
position: 'absolute',
89+
top: 0,
90+
left: 0,
91+
right: 0,
92+
height: Constants.statusBarHeight,
93+
backgroundColor: '#fff',
94+
}}
95+
/>
96+
</View>
97+
);
98+
}
99+
}
100+
101+
const StackWithHeaderHeight = createDumbStack({
102+
title: 'height: 150',
103+
headerStyle: { height: 150 },
104+
});
105+
const StackWithHeaderPadding = createDumbStack({
106+
title: 'padding: 100',
107+
headerStyle: { padding: 100 },
108+
});
109+
const StackWithHeaderHeightAndPadding = createDumbStack({
110+
title: 'height: 150, padding: 100',
111+
headerStyle: { height: 150, padding: 100 },
112+
});
113+
const StackWithHeaderPaddingPercent = createDumbStack({
114+
title: 'padding: 60%',
115+
headerStyle: { padding: '60%' },
116+
});
117+
const StackWithHeaderMargin = createDumbStack({
118+
title: 'margin: 20 (but why? :/)',
119+
headerStyle: { margin: 20 },
120+
});
121+
122+
const TabBarWithHeight = createDumbTabs(
123+
{
124+
tabBarLabel: 'label!',
125+
tabBarOptions: {
126+
style: {
127+
height: 100,
128+
},
129+
},
130+
},
131+
createDumbStack({
132+
title: 'tabBar height 100',
133+
})
134+
);
135+
136+
const TabBarWithPadding = createDumbTabs(
137+
{
138+
tabBarLabel: 'label!',
139+
tabBarOptions: {
140+
style: {
141+
padding: 20,
142+
},
143+
},
144+
},
145+
createDumbStack({
146+
title: 'tabBar padding 20',
147+
})
148+
);
149+
150+
const TabBarWithHeightAndPadding = createDumbTabs(
151+
{
152+
tabBarLabel: 'label!',
153+
tabBarOptions: {
154+
style: {
155+
padding: 20,
156+
height: 100,
157+
},
158+
},
159+
},
160+
createDumbStack({
161+
title: 'tabBar height 100 padding 20',
162+
})
163+
);
164+
165+
const TabBarWithMargin = createDumbTabs(
166+
{
167+
tabBarLabel: 'label!',
168+
tabBarOptions: {
169+
style: {
170+
margin: 20,
171+
},
172+
},
173+
},
174+
createDumbStack({
175+
title: 'tabBar margin 20',
176+
})
177+
);
178+
179+
const RootStack = StackNavigator(
180+
{
181+
exampleList: {
182+
screen: ExampleListScreen,
183+
},
184+
tabs: {
185+
screen: TabsScreen,
186+
},
187+
headerHeight: {
188+
screen: StackWithHeaderHeight,
189+
},
190+
headerPadding: {
191+
screen: StackWithHeaderPadding,
192+
},
193+
headerHeightAndPadding: {
194+
screen: StackWithHeaderHeightAndPadding,
195+
},
196+
headerPaddingPercent: {
197+
screen: StackWithHeaderPaddingPercent,
198+
},
199+
headerMargin: {
200+
screen: StackWithHeaderMargin,
201+
},
202+
tabBarHeight: {
203+
screen: TabBarWithHeight,
204+
},
205+
tabBarPadding: {
206+
screen: TabBarWithPadding,
207+
},
208+
tabBarHeightAndPadding: {
209+
screen: TabBarWithHeightAndPadding,
210+
},
211+
tabBarMargin: {
212+
screen: TabBarWithMargin,
213+
},
214+
},
215+
{
216+
headerMode: 'none',
217+
cardStyle: {
218+
backgroundColor: '#fff',
219+
},
220+
}
221+
);
222+
223+
// basic tabs (different navbar color, different tabbar color)
224+
// different header height
225+
// different header padding
226+
// different header height and padding
227+
// different header margin
228+
// different tabbar height
229+
// different tabbar padding
230+
// different tabbar height and padding
231+
// different tabbar margin
232+
// without navbar, without safeareaview in one tab and with safeareaview in another tab
233+
// all should be able to toggle between landscape and portrait
234+
235+
// basic drawer (different navbar color, mess around with drawer options)
236+
237+
const styles = StyleSheet.create({
238+
container: {
239+
flex: 1,
240+
backgroundColor: '#fff',
241+
alignItems: 'center',
242+
justifyContent: 'center',
243+
},
244+
});

‎examples/SafeAreaExample/app.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"expo": {
3+
"name": "SafeAreaExample",
4+
"description": "An empty new project",
5+
"slug": "SafeAreaExample",
6+
"privacy": "public",
7+
"sdkVersion": "22.0.0",
8+
"version": "1.0.0",
9+
"primaryColor": "#cccccc",
10+
"icon": "./assets/icon.png",
11+
"splash": {
12+
"image": "./assets/splash.png",
13+
"resizeMode": "contain",
14+
"backgroundColor": "#ffffff"
15+
},
16+
"packagerOpts": {
17+
"assetExts": ["ttf", "mp4"]
18+
},
19+
"ios": {
20+
"supportsTablet": true
21+
}
22+
}
23+
}

‎examples/SafeAreaExample/assets/icon.png

2.91 KB
Loading

‎examples/SafeAreaExample/assets/splash.png

65.9 KB
Loading

‎examples/SafeAreaExample/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"main": "node_modules/expo/AppEntry.js",
3+
"private": true,
4+
"dependencies": {
5+
"expo": "^22.0.1",
6+
"react": "16.0.0-beta.5",
7+
"react-native": "https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz",
8+
"react-native-platform-touchable": "^1.1.1",
9+
"react-navigation": "^1.0.0-beta.16"
10+
},
11+
"name": "SafeAreaExample",
12+
"version": "0.0.0",
13+
"description": "Hello Expo!",
14+
"author": null
15+
}

‎examples/SafeAreaExample/screens/DrawerScreen.js

Whitespace-only changes.

‎examples/SafeAreaExample/screens/DumbStack.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import createDumbStack from './createDumbStack';
2+
3+
export default createDumbStack();

0 commit comments

Comments
 (0)