react-navigation#SafeAreaView JavaScript Examples
The following examples show how to use
react-navigation#SafeAreaView.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: RequestPasswordResetScreen.js From mern-stack with MIT License | 6 votes |
|
render() {
return (
<SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
<NavigationEvents onWillBlur={this.props.unloadAuthScreen} />
<StatusBar barStyle="dark-content" />
<RequestTokenForm
tokenPurpose="reset-password"
title="Send Password Reset Email"
onSubmit={this.props.requestPasswordReset}
/>
</SafeAreaView>
);
}
Example #2
| Source File: RequestVerificationEmailScreen.js From mern-stack with MIT License | 6 votes |
|
render() {
return (
<SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
<NavigationEvents onWillBlur={this.props.unloadAuthScreen} />
<StatusBar barStyle="dark-content" />
<RequestTokenForm
tokenPurpose="verify-email"
title="Resend Verification Email"
onSubmit={this.props.requestVerificationEmail}
/>
</SafeAreaView>
);
}
Example #3
| Source File: index.js From react-native-loop-game with MIT License | 5 votes |
|
function PageView({
type,
style,
header,
footer,
children,
innerRef,
baseStyle,
baseProps,
noKeyBoard,
navigation,
afterRender,
disableMaxContainer,
...props
}) {
let Comp = View;
const compProps = {};
if (type === 'scroll') {
Comp = ScrollView;
compProps.keyboardShouldPersistTaps = 'handled';
}
const child = (
<>
<SafeAreaView
{...baseProps}
style={[styles.base].concat([baseStyle])}
forceInset={{ top: type !== 'scroll' || platform.isIOS ? 'always' : 'never' }}
>
{afterRender}
{header ? <Header {...header} /> : null}
<Comp
testID="base"
style={[styles.container, disableMaxContainer ? {} : styles.maxContainer].concat(style)}
{...compProps}
{...props}
ref={innerRef}
>
{children}
</Comp>
{footer}
</SafeAreaView>
{platform.isIOS && !noKeyBoard ? <KeyboardSpacer /> : null}
</>
);
return child;
}
Example #4
| Source File: index.js From openweathermap-reactnative with MIT License | 5 votes |
|
Main = () => {
const [currentRegion, setCurrentRegion] = useState({
latitude: null,
longitude: null,
latitudeDelta: 1,
longitudeDelta: 1,
});
useEffect(() => {
async function loadInitialPosition() {
const granted = await RNLocation.requestPermission({
ios: 'whenInUse',
android: {
detail: 'coarse',
},
});
if (granted) {
RNLocation.subscribeToLocationUpdates(locations => {
if (locations.length > 0) {
const {latitude, longitude} = locations[0];
setCurrentRegion({
latitude,
longitude,
latitudeDelta: 1,
longitudeDelta: 1,
});
}
});
}
}
loadInitialPosition();
}, []);
return (
<SafeAreaView style={styles.container}>
{currentRegion.latitude && (
<MapView
initialRegion={currentRegion}
style={{...StyleSheet.absoluteFillObject}}
/>
)}
<ForecastDetails />
</SafeAreaView>
);
}
Example #5
| Source File: SignInScreen.js From mern-stack with MIT License | 4 votes |
|
render() {
const {
clearErrorMessage,
errorMessage,
isProcessing,
theme: { colors },
type,
unloadAuthScreen,
} = this.props;
return (
<SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
<NavigationEvents onWillBlur={unloadAuthScreen} />
<StatusBar barStyle="dark-content" />
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : null}
style={styles.container}
>
<ScrollView
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag"
>
<Logo />
<Spacer>
<Title style={{ alignSelf: 'center', color: colors.primary }}>
Sign In
</Title>
</Spacer>
<Spacer>
<TextInput
label="Email"
mode="outlined"
dense
value={this.state.email}
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
onChangeText={(email) => this.setState({ email })}
onSubmitEditing={this.onEmailSignIn}
onFocus={clearErrorMessage}
disabled={isProcessing}
/>
<Spacer />
<TextInput
label="Password"
mode="outlined"
dense
secureTextEntry
value={this.state.password}
autoCapitalize="none"
autoCorrect={false}
onChangeText={(password) => this.setState({ password })}
onSubmitEditing={this.onEmailSignIn}
onFocus={clearErrorMessage}
disabled={isProcessing}
/>
<View style={styles.navLinks}>
<NavLink
text="Forgot password?"
routeName="RequestPasswordReset"
disabled={isProcessing}
/>
<NavLink
text="Register instead!"
routeName="SignUp"
disabled={isProcessing}
/>
</View>
</Spacer>
<Spacer vertical={4}>
<Button
mode="contained"
accessibilityLabel="Sign In"
onPress={this.onEmailSignIn}
loading={isProcessing && type === 'email'}
disabled={isProcessing}
>
Sign In
</Button>
</Spacer>
<Spacer vertical={12}>
<Text style={{ alignSelf: 'center' }}>Or Sign In With</Text>
</Spacer>
<Spacer>
<OAuthButtons />
</Spacer>
{errorMessage === 'Email is not verified' && (
<NavLink
text="Have not received verification email?"
routeName="RequestVerificationEmail"
disabled={isProcessing}
/>
)}
</ScrollView>
<Snackbar
visible={errorMessage}
onDismiss={clearErrorMessage}
action={{
label: 'Dismiss',
accessibilityLabel: 'Dismiss',
onPress: () => {},
}}
>
{errorMessage}
</Snackbar>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
Example #6
| Source File: SignUpScreen.js From mern-stack with MIT License | 4 votes |
|
render() {
const {
clearErrorMessage,
errorMessage,
isProcessing,
theme: { colors },
type,
unloadAuthScreen,
} = this.props;
return (
<SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
<NavigationEvents onWillBlur={unloadAuthScreen} />
<StatusBar barStyle="dark-content" />
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : null}
style={styles.container}
>
<ScrollView
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag"
>
<Logo />
<Spacer>
<Title style={{ alignSelf: 'center', color: colors.primary }}>
Sign Up
</Title>
</Spacer>
<Spacer>
<TextInput
label="Username"
mode="outlined"
dense
value={this.state.username}
autoCapitalize="none"
autoCorrect={false}
onChangeText={(username) => this.setState({ username })}
onSubmitEditing={this.onEmailRegister}
onFocus={clearErrorMessage}
disabled={isProcessing}
/>
<Spacer />
<TextInput
label="Email"
mode="outlined"
dense
value={this.state.email}
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
onChangeText={(email) => this.setState({ email })}
onSubmitEditing={this.onEmailRegister}
onFocus={clearErrorMessage}
disabled={isProcessing}
/>
<Spacer />
<View style={styles.fullName}>
<TextInput
label="First Name"
mode="outlined"
style={styles.name}
dense
value={this.state.firstName}
autoCorrect={false}
onChangeText={(firstName) => this.setState({ firstName })}
onSubmitEditing={this.onEmailRegister}
onFocus={clearErrorMessage}
disabled={isProcessing}
/>
<TextInput
label="Last Name"
mode="outlined"
style={styles.name}
dense
value={this.state.lastName}
autoCorrect={false}
onChangeText={(lastName) => this.setState({ lastName })}
onSubmitEditing={this.onEmailRegister}
onFocus={clearErrorMessage}
disabled={isProcessing}
/>
</View>
<Spacer />
<TextInput
label="Password"
mode="outlined"
dense
secureTextEntry
value={this.state.password}
autoCapitalize="none"
autoCorrect={false}
onChangeText={(password) => this.setState({ password })}
onSubmitEditing={this.onEmailRegister}
onFocus={clearErrorMessage}
disabled={isProcessing}
/>
<View style={styles.navLinks}>
<NavLink text="Sign in instead!" routeName="SignIn" />
</View>
</Spacer>
<Spacer vertical={4}>
<Button
mode="contained"
accessibilityLabel="Sign In"
onPress={this.onEmailRegister}
loading={isProcessing && type === 'email'}
disabled={isProcessing}
>
Sign Up
</Button>
</Spacer>
<Spacer vertical={12}>
<Text style={{ alignSelf: 'center' }}>Or Sign Up With</Text>
</Spacer>
<Spacer>
<OAuthButtons />
</Spacer>
</ScrollView>
<Snackbar
visible={errorMessage}
onDismiss={clearErrorMessage}
action={{
label: 'Dismiss',
accessibilityLabel: 'Dismiss',
onPress: () => {},
}}
>
{errorMessage}
</Snackbar>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
