react-native-settings-builder
Settings components for React Native in style of native iOS or Android components. Uses react-native-dialogs
for dialogs on Android.
Showcase
Install
npm install react-native-settings-components --save
or
yarn add react-native-settings-components
Usage
; { super; thisstate = username: '' allowPushNotifications: false gender: '' ; } { <ScrollView style=flex: 1 backgroundColor: PlatformOS === 'ios' ? colorsiosSettingsBackground : colorswhite> <SettingsCategoryHeader title='My Account' textStyle=PlatformOS === 'android' ? color: colorsmonza : null/> <SettingsDividerLong android=false/> <SettingsEditText title="Username" dialogDescription='Enter your username.' valuePlaceholder="..." negativeButtonTitle='Cancel' buttonRightTitle='Save' onSaveValue= { console; this; } value=thisstateusername dialogAndroidProps= widgetColor: colorsmonza positiveColor: colorsmonza negativeColor: colorsmonza /> <SettingsDividerShort/> <SettingsPicker title="Gender" dialogDescription='Choose your gender.' possibleValues= label: '...' value: '' label: 'male' value: 'male' label: 'female' value: 'female' label: 'other' value: 'other' negativeButtonTitle='Cancel' buttonRightTitle='Save' onSaveValue= { console; this; } value=thisstategender styleModalButtonsText=color: colorsmonza /> ... <SettingsSwitch title='Allow Push Notifications' onSaveValue= { console; this; } value=thisstateallowPushNotifications thumbTintColor=thisstateallowPushNotifications ? colorsswitchEnabled : colorsswitchDisabled /> ... </ScrollView> } const colors = iosSettingsBackground: 'rgb(235,235,241)' white: '#FFFFFF' monza: '#C70039' switchEnabled: PlatformOS === 'android' ? '#C70039' : null switchDisabled: PlatformOS === 'android' ? '#efeff3' : null switchOnTintColor: PlatformOS === 'android' ? 'rgba(199, 0, 57, 0.6)' : null blueGem: '#27139A';
Props
SettingsCategoryHeader
Prop | Description | Type | Default |
---|---|---|---|
title |
category title | String | Required |
container |
container props except style | Object | {} |
containerStyle |
container style prop | ViewPropTypes | {} |
titleProps |
title props except style | Text Component Props / Object |
{} |
titleStyle |
title style prop | Text PropTypes |
{} |
SettingsDividerLong
Prop | Description | Type | Default |
---|---|---|---|
ios |
display on iOS | Boolean | true |
android |
display on Android | Boolean | true |
dividerStyle |
divider style prop | ViewPropTypes | {} |
SettingsDividerShort
Prop | Description | Type | Default |
---|---|---|---|
ios |
display on iOS | Boolean | true |
android |
display on Android | Boolean | true |
containerStyle |
container style prop | ViewPropTypes | {} |
dividerStyle |
divider style prop | ViewPropTypes | {} |
SettingsEditText
Prop | Description | Type | Default |
---|---|---|---|
containerProps |
container props except style | View Component Props |
{} |
containerStyle |
container style prop | ViewPropTypes | {} |
disabledOverlayStyle |
component overlay style if setting is disabled | ViewPropTypes | {} |
titleProps |
title props except style | Text Component Props |
{} |
titleStyle |
title style prop | Text PropTypes |
{} |
title |
title of setting | String | Required |
valueProps |
value props except style | Text Component Props |
{} |
valueStyle |
value style prop | Text PropTypes |
{} |
value |
value of setting | String | Required |
valuePlaceholder |
placeholder if value is empty | String | ... |
negativeButtonTitle |
negative dialog buttons title | String | Required |
positiveButtonTitle |
positive dialog buttons title | String | Required |
dialogDescription |
text explaining what the user should do e.g. | String | `''`` |
onSaveValue |
callback to be invoked when the positive dialog button is pressed | String | Required |
disabled |
whether the settings value should be editable or not | Boolean | false |
iosDialogInputType |
input type of the dialog alert on ios | String | plain-text |
androidDialogProps |
input dialog props on android (see react-native-dialogs ) |
String | {} |
touchableProps |
props of touchable opening input dialog | String | {} |
SettingsPicker
Prop | Description | Type | Default |
---|---|---|---|
containerProps |
container props except style | View Component Props |
{} |
containerStyle |
container style prop | ViewPropTypes | {} |
disabledOverlayStyle |
component overlay style if setting is disabled | ViewPropTypes | {} |
titleProps |
title props except style | Text Component Props |
{} |
titleStyle |
title style prop | Text PropTypes |
{} |
title |
title of setting | String | Required |
valueProps |
value props except style | Text Component Props |
{} |
valueStyle |
value style prop | Text PropTypes |
{} |
value |
value of setting | String | Required |
possibleValues |
picker values | Array of objects in format {label: string, value: string} |
Required |
valuePlaceholder |
placeholder if value is empty | String | ... |
negativeButtonTitle |
negative dialog buttons title | String | Required |
positiveButtonTitle |
positive dialog buttons title | String | Required |
dialogDescription |
text explaining what the user should do e.g. | String | '' |
modalDescriptionStyle |
modal description style prop | Text PropTypes |
{} |
onSaveValue |
callback to be invoked when the positive dialog button is pressed | String | Required |
disabled |
whether the settings value should be editable or not | Boolean | false |
modalStyle |
modal ScrollView style prop |
ViewPropTypes | {} |
modalInnerStyle |
modal ScrollView inner View style prop |
ViewPropTypes | {} |
modalButtonsTitleStyle |
modal buttons style prop (positive and negative button) | Text PropTypes |
{} |
modalButtonsTitleNegativeStyle |
value style prop | Text PropTypes |
{} |
modalButtonsTitlePositiveStyle |
value style prop | Text PropTypes |
{} |
SettingsSwitch
Prop | Description | Type | Default |
---|---|---|---|
containerProps |
container props except style | View Component Props |
{} |
containerStyle |
container style prop | ViewPropTypes | {} |
disabledOverlayStyle |
component overlay style if setting is disabled | ViewPropTypes | {} |
titleProps |
title props except style | Text Component Props |
{} |
titleStyle |
title style prop | Text PropTypes |
{} |
title |
title of setting | String | Required |
switchWrapperProps |
switch wrapper props except style | View Component Props |
{} |
switchWrapperStyle |
switch wrapper style prop | View PropTypes |
{} |
value |
value of setting | Boolean | Required |
disabled |
whether the settings value should be editable or not | Boolean | false |
onSaveValue |
callback to be invoked when the positive dialog button is pressed | String | Required |
thumbTintColor |
switch thumb tint color | Color | null |
onTintColor |
switch background color when the switch is turned on | Color | null |
switchProps |
Switch component props except the ones mentioned before |
Switch Component Props |
{} |
Example
There is an example app in the example directory.
Run iOS version by
git clone https://github.com/florianstahr/react-native-settings-components.gitnpm installreact-native linkreact-native run-ios