Simple Settings Form
Screen is created using these React Native Core Components: <SafeAreaView />, <ScrollView />, <View />, <Text />, <TouchableOpacity />, <Switch />, <Image />
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}>john@example.com</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',
},
});import React, { useState } from 'react';
import {
StyleSheet,
SafeAreaView,
ScrollView,
View,
Text,
TouchableOpacity,
Switch,
Image,
} from 'react-native';
import FeatherIcon from '@expo/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}>john@example.com</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',
},
});Language Picker Integration 🌍
UI/UX implementation of the React Native Component with the language picker and detecting user's default locale.
import React, { useState } from 'react';
import {
StyleSheet,
Platform,
NativeModules,
Modal,
SafeAreaView,
View,
ScrollView,
Text,
TouchableOpacity,
Switch,
Image,
} from 'react-native';
import FeatherIcon from 'react-native-vector-icons/Feather';
const languages = [
{ id: 'en', name: 'English', country: 'US' },
{ id: 'es', name: 'Spanish', country: 'ES' },
{ id: 'fr', name: 'French', country: 'FR' },
{ id: 'de', name: 'German', country: 'DE' },
{ id: 'it', name: 'Italian', country: 'IT' },
{ id: 'pt', name: 'Portuguese', country: 'PT' },
{ id: 'uk', name: 'Ukrainian', country: 'UA' },
{ id: 'ja', name: 'Japanese', country: 'JP' },
{ id: 'zh', name: 'Chinese', country: 'CN' },
{ id: 'ko', name: 'Korean', country: 'KR' },
{ id: 'hi', name: 'Hindi', country: 'IN' },
{ id: 'ar', name: 'Arabic', country: 'EG' },
{ id: 'vi', name: 'Vietnamese', country: 'VN' },
{ id: 'nl', name: 'Dutch', country: 'NL' },
{ id: 'sv', name: 'Swedish', country: 'SE' },
{ id: 'fi', name: 'Finnish', country: 'FI' },
{ id: 'no', name: 'Norwegian', country: 'NO' },
{ id: 'da', name: 'Danish', country: 'DK' },
{ id: 'pl', name: 'Polish', country: 'PL' },
{ id: 'tr', name: 'Turkish', country: 'TR' },
// Add more languages as needed
];
const getDefaultLanguage = () => {
// e.g. `en_US`
const locale =
Platform.OS === 'ios'
? NativeModules.SettingsManager.settings.AppleLocale ||
NativeModules.SettingsManager.settings.AppleLanguages[0] //iOS 13
: NativeModules.I18nManager.localeIdentifier;
// e.g. `en`
const localeIdentifier = locale.split('_')[0];
const language = languages.find(lang => lang.id === localeIdentifier);
return language ?? languages[0];
};
export default function Example() {
const [visible, setVisible] = React.useState(false);
const [form, setForm] = useState({
language: getDefaultLanguage(),
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 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}>john@example.com</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={() => {
setVisible(true);
}}
style={styles.row}>
<Text style={styles.rowLabel}>Language</Text>
<View style={styles.rowSpacer} />
<Text style={styles.rowValue}>{form.language.name}</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>
{/* Start language picker */}
<Modal
presentationStyle="pageSheet"
animationType="slide"
visible={visible}>
<View style={[styles.header, { paddingTop: 12 }]}>
<View style={styles.headerAction} />
<Text style={styles.headerTitle}>Select Language</Text>
<View style={[styles.headerAction, { alignItems: 'flex-end' }]}>
<TouchableOpacity
onPress={() => {
setVisible(false);
}}>
<FeatherIcon color="#000" name="x" size={24} />
</TouchableOpacity>
</View>
</View>
<ScrollView
contentContainerStyle={[styles.content, { paddingBottom: 60 }]}>
<View style={styles.section}>
<Text style={styles.sectionTitle}>Language</Text>
<View style={styles.sectionBody}>
{languages.map((lang, index, arr) => {
const { id, name, country } = lang;
const isActive = form.language.id === id;
return (
<View
key={id}
style={[
styles.rowWrapper,
index === 0 && styles.rowFirst,
index === arr.length - 1 && styles.rowLast,
]}>
<TouchableOpacity
onPress={() => {
setForm({ ...form, language: lang });
setVisible(false);
}}
style={styles.row}>
<Image
alt={`Flag of ${country}`}
style={styles.rowImage}
source={{
uri: `https://flagsapi.com/${country}/flat/64.png`,
}}
/>
<Text style={styles.rowLabel}>{name}</Text>
<View style={styles.rowSpacer} />
{isActive && (
<FeatherIcon color="#3C81F0" name="check" size={19} />
)}
</TouchableOpacity>
</View>
);
})}
</View>
</View>
</ScrollView>
</Modal>
{/* End language picker */}
</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',
},
/** 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',
},
rowImage: {
width: 32,
height: 20,
borderRadius: 4,
marginRight: 12,
},
});import React, { useState } from 'react';
import {
StyleSheet,
Platform,
NativeModules,
Modal,
SafeAreaView,
View,
ScrollView,
Text,
TouchableOpacity,
Switch,
Image,
} from 'react-native';
import FeatherIcon from '@expo/vector-icons/Feather';
const languages = [
{ id: 'en', name: 'English', country: 'US' },
{ id: 'es', name: 'Spanish', country: 'ES' },
{ id: 'fr', name: 'French', country: 'FR' },
{ id: 'de', name: 'German', country: 'DE' },
{ id: 'it', name: 'Italian', country: 'IT' },
{ id: 'pt', name: 'Portuguese', country: 'PT' },
{ id: 'uk', name: 'Ukrainian', country: 'UA' },
{ id: 'ja', name: 'Japanese', country: 'JP' },
{ id: 'zh', name: 'Chinese', country: 'CN' },
{ id: 'ko', name: 'Korean', country: 'KR' },
{ id: 'hi', name: 'Hindi', country: 'IN' },
{ id: 'ar', name: 'Arabic', country: 'EG' },
{ id: 'vi', name: 'Vietnamese', country: 'VN' },
{ id: 'nl', name: 'Dutch', country: 'NL' },
{ id: 'sv', name: 'Swedish', country: 'SE' },
{ id: 'fi', name: 'Finnish', country: 'FI' },
{ id: 'no', name: 'Norwegian', country: 'NO' },
{ id: 'da', name: 'Danish', country: 'DK' },
{ id: 'pl', name: 'Polish', country: 'PL' },
{ id: 'tr', name: 'Turkish', country: 'TR' },
// Add more languages as needed
];
const getDefaultLanguage = () => {
// e.g. `en_US`
const locale =
Platform.OS === 'ios'
? NativeModules.SettingsManager.settings.AppleLocale ||
NativeModules.SettingsManager.settings.AppleLanguages[0] //iOS 13
: NativeModules.I18nManager.localeIdentifier;
// e.g. `en`
const localeIdentifier = locale.split('_')[0];
const language = languages.find(lang => lang.id === localeIdentifier);
return language ?? languages[0];
};
export default function Example() {
const [visible, setVisible] = React.useState(false);
const [form, setForm] = useState({
language: getDefaultLanguage(),
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 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}>john@example.com</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={() => {
setVisible(true);
}}
style={styles.row}>
<Text style={styles.rowLabel}>Language</Text>
<View style={styles.rowSpacer} />
<Text style={styles.rowValue}>{form.language.name}</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>
{/* Start language picker */}
<Modal
presentationStyle="pageSheet"
animationType="slide"
visible={visible}>
<View style={[styles.header, { paddingTop: 12 }]}>
<View style={styles.headerAction} />
<Text style={styles.headerTitle}>Select Language</Text>
<View style={[styles.headerAction, { alignItems: 'flex-end' }]}>
<TouchableOpacity
onPress={() => {
setVisible(false);
}}>
<FeatherIcon color="#000" name="x" size={24} />
</TouchableOpacity>
</View>
</View>
<ScrollView
contentContainerStyle={[styles.content, { paddingBottom: 60 }]}>
<View style={styles.section}>
<Text style={styles.sectionTitle}>Language</Text>
<View style={styles.sectionBody}>
{languages.map((lang, index, arr) => {
const { id, name, country } = lang;
const isActive = form.language.id === id;
return (
<View
key={id}
style={[
styles.rowWrapper,
index === 0 && styles.rowFirst,
index === arr.length - 1 && styles.rowLast,
]}>
<TouchableOpacity
onPress={() => {
setForm({ ...form, language: lang });
setVisible(false);
}}
style={styles.row}>
<Image
alt={`Flag of ${country}`}
style={styles.rowImage}
source={{
uri: `https://flagsapi.com/${country}/flat/64.png`,
}}
/>
<Text style={styles.rowLabel}>{name}</Text>
<View style={styles.rowSpacer} />
{isActive && (
<FeatherIcon color="#3C81F0" name="check" size={19} />
)}
</TouchableOpacity>
</View>
);
})}
</View>
</View>
</ScrollView>
</Modal>
{/* End language picker */}
</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',
},
/** 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',
},
rowImage: {
width: 32,
height: 20,
borderRadius: 4,
marginRight: 12,
},
});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-install
In 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