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

import {SettingsDividerShort, SettingsDividerLong, SettingsEditText, SettingsCategoryHeader, SettingsSwitch, SettingsPicker} from 'react-native-settings-components';

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      username: '',
      allowPushNotifications: false,
      gender: '',
    };
  }

  render() {

    <ScrollView style={{flex: 1, backgroundColor: (Platform.OS === 'ios') ? colors.iosSettingsBackground : colors.white}}>

        <SettingsCategoryHeader title={'My Account'} textStyle={(Platform.OS === 'android') ? {color: colors.monza} : null}/>

        <SettingsDividerLong android={false}/>

        <SettingsEditText
            title="Username"
            dialogDescription={'Enter your username.'}
            valuePlaceholder="..."
            negativeButtonTitle={'Cancel'}
            buttonRightTitle={'Save'}
            onSaveValue={(value) => {
                console.log('username:', value);
                this.setState({
                    username: value
                });
            }}
            value={this.state.username}
            dialogAndroidProps={{
                widgetColor: colors.monza,
                positiveColor: colors.monza,
                negativeColor: colors.monza,
            }}
        />

        <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={value => {
                console.log('gender:', value);
                this.setState({
                    gender: value
                });
            }}
            value={this.state.gender}
            styleModalButtonsText={{color: colors.monza}}
        />

        ...

        <SettingsSwitch
            title={'Allow Push Notifications'}
            onSaveValue={(value) => {
                console.log('allow push notifications:', value);
                this.setState({
                    allowPushNotifications: value
                });
            }}
            value={this.state.allowPushNotifications}
            thumbTintColor={(this.state.allowPushNotifications) ? colors.switchEnabled : colors.switchDisabled}
        />

        ...

      </ScrollView>

    }

}

const colors = {
  iosSettingsBackground: 'rgb(235,235,241)',
  white: '#FFFFFF',
  monza: '#C70039',
  switchEnabled: (Platform.OS === 'android') ? '#C70039' : null,
  switchDisabled: (Platform.OS === 'android') ? '#efeff3' : null,
  switchOnTintColor: (Platform.OS === '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.git
npm install
react-native link
react-native run-ios