Brent Vatne 29ae6f46f6
Safe area example (#2890)
* Add SafeAreaEample for testing

* Remove portrait default lock on SafeAreaExample and add a spacer between buttons
2017-11-02 18:12:11 -07:00

100 lines
2.2 KiB
JavaScript

import React from 'react';
import { StackNavigator } from 'react-navigation';
import {
Dimensions,
Button,
Platform,
ScrollView,
Text,
View,
StatusBar,
} from 'react-native';
import { ScreenOrientation } from 'expo';
const Separator = () => (
<View
style={{
width: Dimensions.get('window').width - 100,
height: 1,
backgroundColor: '#ccc',
marginHorizontal: 50,
marginTop: 15,
marginBottom: 15,
}}
/>
);
const Spacer = () => (
<View
style={{
marginBottom: Platform.OS === 'android' ? 20 : 5,
}}
/>
);
export default (navigationOptions = {}) => {
class DumbScreen extends React.Component {
static navigationOptions = {
title: 'Title!',
...navigationOptions,
headerStyle: {
backgroundColor: '#6b52ae',
...navigationOptions.headerStyle,
},
headerTitleStyle: {
color: '#fff',
...navigationOptions.headerTitleStyle,
},
};
render() {
return (
<ScrollView style={{ flex: 1 }}>
<View
style={{
paddingTop: 30,
alignItems: 'center',
justifyContent: 'center',
}}>
<Button onPress={this._goBack} title="Go back" />
<Separator />
<Button onPress={this._setPortrait} title="Set portrait" />
<Spacer />
<Button onPress={this._setLandscape} title="Set landscape" />
<Separator />
<Button onPress={this._hideStatusBar} title="Hide status bar" />
<Spacer />
<Button onPress={this._showStatusBar} title="Show status bar" />
</View>
</ScrollView>
);
}
_goBack = () => {
this.props.navigation.goBack(null);
};
_setPortrait = () => {
ScreenOrientation.allow(ScreenOrientation.Orientation.PORTRAIT);
};
_setLandscape = () => {
ScreenOrientation.allow(ScreenOrientation.Orientation.LANDSCAPE);
};
_hideStatusBar = () => {
StatusBar.setHidden(true, 'slide');
};
_showStatusBar = () => {
StatusBar.setHidden(false, 'slide');
};
}
return StackNavigator({
dumb: {
screen: DumbScreen,
},
});
};