react-native-settings-builder

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',
};