Basic Settings Screen with Grouped Categories
Screen is created using these React Native Core Components: <SafeAreaView />, <View />, <ScrollView />, <Text />, <TouchableOpacity />, <Switch />, <Image />
Basic Component
UI implementation of the React Native component.
import React, { useState } from 'react';
import {
StyleSheet,
SafeAreaView,
View,
ScrollView,
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.container}>
<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>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
padding: 0,
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
},
/** 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',
},
});Component with Language Picker Integration
UI/UX implementation of the React Native Component with the language picker and detecting user's default locale.
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;
Dependencies
Before getting started, make sure you have all the necessary dependencies for this component. Follow the steps below to install any missing dependencies.
-
Install the package.
npm install --save react-native-vector-icons-
Link the native packages for iOS.
npx pod-installIn React Native 0.60+ the CLI autolink feature links the module while building the app.
-
Add Fonts to the
Info.plistfile.
Open your XCode project, right click on the Info.plist, and select Open As -> Source Code.
Next, copy the fonts below into your Info.plist.
<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>FontAwesome6_Brands.ttf</string>
<string>FontAwesome6_Regular.ttf</string>
<string>FontAwesome6_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
<string>Fontisto.ttf</string>
</array>Note: You can only select the fonts you would like to use in your React Native Application.
After you added these fonts the Info.plist file should look like this:
-
Add
fonts.gradlefor Android.
Open android/app/build.gradle (NOT android/build.gradle) and add the following code to the bottom:
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")If you want to customize fonts, use:
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]
]
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")Original instructions can be found on Github: https://github.com/oblador/react-native-vector-icons