Settings Screens
Our collection of settings screens are designed to make it easy for your users to change their settings in a hassle-free way, without compromising on aesthetics or functionality.
Whether you need a simple settings screen with basic options, or a complex one with multiple categories and sub-categories, our collection has got you covered. Our pre-built components are designed to seamlessly integrate with your existing codebase, allowing you to save time and focus on other critical aspects of your application.
Part of the Simple Profile Setup Flow (8 Screens).
import React, { useState } from 'react';
import {
StyleSheet,
SafeAreaView,
ScrollView,
View,
Text,
TouchableOpacity,
Switch,
Image,
} from 'react-native';
import FeatherIcon from 'react-native-vector-icons/Feather';
export default function Example() {
const [form, setForm] = useState({
emailNotifications: true,
pushNotifications: false,
});
return (
<SafeAreaView style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
<View style={styles.header}>
<View style={styles.headerAction}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}>
<FeatherIcon
color="#000"
name="arrow-left"
size={24} />
</TouchableOpacity>
</View>
<Text numberOfLines={1} style={styles.headerTitle}>
Settings
</Text>
<View style={[styles.headerAction, { alignItems: 'flex-end' }]}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}>
<FeatherIcon
color="#000"
name="more-vertical"
size={24} />
</TouchableOpacity>
</View>
</View>
<ScrollView contentContainerStyle={styles.content}>
<View style={[styles.section, { paddingTop: 4 }]}>
<Text style={styles.sectionTitle}>Account</Text>
<View style={styles.sectionBody}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.profile}>
<Image
alt=""
source={{
uri: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=256&h=256&q=80',
}}
style={styles.profileAvatar} />
<View style={styles.profileBody}>
<Text style={styles.profileName}>John Doe</Text>
<Text style={styles.profileHandle}>[email protected]</Text>
</View>
<FeatherIcon
color="#bcbcbc"
name="chevron-right"
size={22} />
</TouchableOpacity>
</View>
</View>
<View style={styles.section}>
<Text style={styles.sectionTitle}>Preferences</Text>
<View style={styles.sectionBody}>
<View style={[styles.rowWrapper, styles.rowFirst]}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.row}>
<Text style={styles.rowLabel}>Language</Text>
<View style={styles.rowSpacer} />
<Text style={styles.rowValue}>English</Text>
<FeatherIcon
color="#bcbcbc"
name="chevron-right"
size={19} />
</TouchableOpacity>
</View>
<View style={styles.rowWrapper}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.row}>
<Text style={styles.rowLabel}>Location</Text>
<View style={styles.rowSpacer} />
<Text style={styles.rowValue}>Los Angeles, CA</Text>
<FeatherIcon
color="#bcbcbc"
name="chevron-right"
size={19} />
</TouchableOpacity>
</View>
<View style={styles.rowWrapper}>
<View style={styles.row}>
<Text style={styles.rowLabel}>Email Notifications</Text>
<View style={styles.rowSpacer} />
<Switch
onValueChange={emailNotifications =>
setForm({ ...form, emailNotifications })
}
style={{ transform: [{ scaleX: 0.95 }, { scaleY: 0.95 }] }}
value={form.emailNotifications} />
</View>
</View>
<View style={[styles.rowWrapper, styles.rowLast]}>
<View style={styles.row}>
<Text style={styles.rowLabel}>Push Notifications</Text>
<View style={styles.rowSpacer} />
<Switch
onValueChange={pushNotifications =>
setForm({ ...form, pushNotifications })
}
style={{ transform: [{ scaleX: 0.95 }, { scaleY: 0.95 }] }}
value={form.pushNotifications} />
</View>
</View>
</View>
</View>
<View style={styles.section}>
<Text style={styles.sectionTitle}>Resources</Text>
<View style={styles.sectionBody}>
<View style={[styles.rowWrapper, styles.rowFirst]}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.row}>
<Text style={styles.rowLabel}>Contact Us</Text>
<View style={styles.rowSpacer} />
<FeatherIcon
color="#bcbcbc"
name="chevron-right"
size={19} />
</TouchableOpacity>
</View>
<View style={styles.rowWrapper}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.row}>
<Text style={styles.rowLabel}>Report Bug</Text>
<View style={styles.rowSpacer} />
<FeatherIcon
color="#bcbcbc"
name="chevron-right"
size={19} />
</TouchableOpacity>
</View>
<View style={styles.rowWrapper}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.row}>
<Text style={styles.rowLabel}>Rate in App Store</Text>
<View style={styles.rowSpacer} />
<FeatherIcon
color="#bcbcbc"
name="chevron-right"
size={19} />
</TouchableOpacity>
</View>
<View style={[styles.rowWrapper, styles.rowLast]}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.row}>
<Text style={styles.rowLabel}>Terms and Privacy</Text>
<View style={styles.rowSpacer} />
<FeatherIcon
color="#bcbcbc"
name="chevron-right"
size={19} />
</TouchableOpacity>
</View>
</View>
</View>
<View style={styles.section}>
<View style={styles.sectionBody}>
<View
style={[
styles.rowWrapper,
styles.rowFirst,
styles.rowLast,
{ alignItems: 'center' },
]}>
<TouchableOpacity
onPress={() => {
// handle onPress
}}
style={styles.row}>
<Text style={[styles.rowLabel, styles.rowLabelLogout]}>
Log Out
</Text>
</TouchableOpacity>
</View>
</View>
</View>
<Text style={styles.contentFooter}>App Version 2.24 #50491</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
/** Header */
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
paddingHorizontal: 16,
},
headerAction: {
width: 40,
height: 40,
alignItems: 'flex-start',
justifyContent: 'center',
},
headerTitle: {
fontSize: 19,
fontWeight: '600',
color: '#000',
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
textAlign: 'center',
},
/** Content */
content: {
paddingHorizontal: 16,
},
contentFooter: {
marginTop: 24,
fontSize: 13,
fontWeight: '500',
textAlign: 'center',
color: '#a69f9f',
},
/** Section */
section: {
paddingVertical: 12,
},
sectionTitle: {
margin: 8,
marginLeft: 12,
fontSize: 13,
letterSpacing: 0.33,
fontWeight: '500',
color: '#a69f9f',
textTransform: 'uppercase',
},
sectionBody: {
borderRadius: 12,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
/** Profile */
profile: {
padding: 12,
backgroundColor: '#fff',
borderRadius: 12,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
},
profileAvatar: {
width: 60,
height: 60,
borderRadius: 9999,
marginRight: 12,
},
profileBody: {
marginRight: 'auto',
},
profileName: {
fontSize: 18,
fontWeight: '600',
color: '#292929',
},
profileHandle: {
marginTop: 2,
fontSize: 16,
fontWeight: '400',
color: '#858585',
},
/** Row */
row: {
height: 44,
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
paddingRight: 12,
},
rowWrapper: {
paddingLeft: 16,
backgroundColor: '#fff',
borderTopWidth: 1,
borderColor: '#f0f0f0',
},
rowFirst: {
borderTopLeftRadius: 12,
borderTopRightRadius: 12,
},
rowLabel: {
fontSize: 16,
letterSpacing: 0.24,
color: '#000',
},
rowSpacer: {
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
},
rowValue: {
fontSize: 16,
fontWeight: '500',
color: '#ababab',
marginRight: 4,
},
rowLast: {
borderBottomLeftRadius: 12,
borderBottomRightRadius: 12,
},
rowLabelLogout: {
width: '100%',
textAlign: 'center',
fontWeight: '600',
color: '#dc2626',
},
});
Part of the Full-Width Profile Setup Flow (8 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;
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;