Permission Screens
Permission screens can empower users by allowing them to decide whether to grant access to specific features like location, notifications, or other in-app permissions.
By requesting permissions using one of our components, your app will demonstrate a commitment to user privacy, confirming that sensitive information is only accessed with explicit user consent.
Part of the Simple Onboarding Flow (10 Screens)
.
import React from 'react';
import {
StyleSheet,
SafeAreaView,
View,
TouchableOpacity,
Text,
Image,
} from 'react-native';
import FeatherIcon from 'react-native-vector-icons/Feather''@expo/vector-icons/Feather';
export default function Example() {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: '#e8ecf4' }}>
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.headerBack}>
<FeatherIcon
color="#1D2A32"
name="chevron-left"
size={30} />
</TouchableOpacity>
</View>
<Text style={styles.title}>Remember login info?</Text>
<Text style={styles.subtitle}>
We'll remember the login info for your account, so you won't need to
enter it on your iCloud devices.
</Text>
<Image
alt=""
style={styles.image}
source={{
uri: 'https://assets.withfra.me/Permissions.3.png',
}} />
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.btn}>
<Text style={styles.btnText}>Remember</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.btnSecondary}>
<Text style={styles.btnSecondaryText}>Not now</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
paddingHorizontal: 24,
paddingBottom: 16,
},
title: {
fontSize: 31,
fontWeight: '700',
color: '#1D2A32',
marginBottom: 6,
},
subtitle: {
fontSize: 15,
fontWeight: '500',
color: '#929292',
},
image: {
marginTop: 24,
alignSelf: 'center',
width: 350,
height: 350,
marginBottom: 'auto',
},
/** Header */
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 12,
},
headerBack: {
padding: 8,
paddingTop: 0,
position: 'relative',
marginLeft: -16,
},
/** Button */
btn: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 30,
paddingVertical: 10,
paddingHorizontal: 20,
borderWidth: 1,
backgroundColor: '#075eec',
borderColor: '#075eec',
},
btnText: {
fontSize: 18,
lineHeight: 26,
fontWeight: '600',
color: '#fff',
},
btnSecondary: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 30,
paddingVertical: 10,
paddingHorizontal: 20,
borderWidth: 2,
borderColor: '#C8D3D9',
marginTop: 12,
},
btnSecondaryText: {
fontSize: 18,
lineHeight: 26,
fontWeight: '600',
color: '#1D2A32',
},
});
Part of the Simple Inline Onboarding Flow (6 Screens)
.
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
<View>
<Text style={styles.text}>in voluptate velit esse cillum dolore eu fugiat nulla</Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});
export default App;
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
<View>
<Text style={styles.text}>in voluptate velit esse cillum dolore eu fugiat nulla</Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
scrollView: {
backgroundColor: 'pink',
marginHorizontal: 20,
},
text: {
fontSize: 42,
},
});
export default App;