React Native Settings Screen
This library takes a JavaScript object that describes your settings and turns it into a beautiful component ready to be used.
Installation
yarn add react-native-settings-screen
Run Example
git clone https://github.com/jsoendermann/react-native-settings-screen
cd react-native-settings-screen/SettingsScreenExample
yarn install
yarn build
react-native run-ios
Usage
import { SettingsScreen } from "react-native-settings-screen"
SettingsScreen
takes a data
prop; an object that describes the content of your settings. You can learn more about the format of this object in this file. The screen on the example screenshots above was generated from this object:
const data: SettingsData = type: 'CUSTOM_VIEW' key: 'hero' render: thisrenderHero type: 'SECTION' header: 'My Section' footer: 'Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.' rows: title: 'A row' showDisclosureIndicator: true title: 'A non-tappable row' title: 'This row has a' subtitle: 'Subtitle' showDisclosureIndicator: true title: 'Long title. So long long long long long long long' subtitle: 'And so is the subtitle. Even longer longer longer longer longer' title: 'Switch' <Switch value onValueChange= {} /> title: 'Text' <Text style= color: '#999' marginRight: 6 fontSize: 18 > Maybe </Text> title: 'Custom view' <View style= width: 30 height: 30 backgroundColor: 'blue' /> showDisclosureIndicator: true type: 'SECTION' header: 'My Other Section' rows: title: 'Dolor Nullam' showDisclosureIndicator: true title: 'Nulla vitae elit libero' <Text style= color: '#999' marginRight: 6 fontSize: 18 > Dapibus </Text> title: 'Ipsum Lorem Venenatis' subtitle: 'Vestibulum Inceptos Fusce Justo' <Text style= color: '#999' marginRight: 6 fontSize: 18 > Yes </Text> showDisclosureIndicator: true title: 'Cras Euismod' <Icon style= marginTop: 3 marginRight: 6 name="colours" size=32 color="black" /> showDisclosureIndicator: true type: 'SECTION' header: 'My Third Section' rows: title: 'Different title style' showDisclosureIndicator: true titleStyle: color: 'red' type: 'CUSTOM_VIEW' <Text style= alignSelf: 'center' fontSize: 18 color: '#999' marginBottom: 40 marginTop: -30 fontFamily > v123 </Text>