react-native-settings-components

Settings components for React Native in style of native iOS or Android components. Uses react-native-dialogs for dialogs on Android.

Installation

# via NPM
npm i react-native-settings-components
# or via Yarn
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"}
        onValueChange={value => {
          console.log("username:", value);
          this.setState({
            username: value
          });
        }}
        value={this.state.username}        
      />
      <SettingsDividerShort />
      <SettingsPicker
        title="Gender"
        dialogDescription={"Choose your gender."}
        options={[
          { label: "...", value: "" },
          { label: "male", value: "male" },
          { label: "female", value: "female" },
          { label: "other", value: "other" }
        ]}
        onValueChange={value => {
          console.log("gender:", value);
          this.setState({
            gender: value
          });
        }}
        value={this.state.gender}
        styleModalButtonsText={{ color: colors.monza }}
      />
      ...
      <SettingsSwitch
        title={"Allow Push Notifications"}
        onValueChange={value => {
          console.log("allow push notifications:", value);
          this.setState({
            allowPushNotifications: value
          });
        }}
        value={this.state.allowPushNotifications}
        trackColor={{
          true: colors.switchEnabled,
          false: colors.switchDisabled,
        }}
      />
      ...
    </ScrollView>;
  }
}

const colors = {
  white: "#FFFFFF",
  monza: "#C70039",
  switchEnabled: "#C70039",
  switchDisabled: "#efeff3",
  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 | {} |

SettingsTextLabel - added by radi-cho

The same props as SettingsCategoryHeader's props.

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 | | descriptionProps | description props except style | Text Component Props | {} | | descriptionStyle | description style prop | Text PropTypes | {} | | description | description of setting | String | null | | 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 | ... | | valueFormat | Value formatter | Function (String) => String | null | | 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 | '' | | onValueChange | callback to be invoked when the positive dialog button is pressed | Function (String) => null | Required | | disabled | whether the settings value should be editable or not | Boolean | false | | iosDialogInputType | input type of the dialog alert on ios (constants available at SettingsEditText.constants.iosDialogInputType) | String | plain-text | | androidDialogInputType | input type of the dialog alert on android (constants available at SettingsEditText.constants.androidDialogInputType) | String | null | | androidDialogOptions | input dialog options on android (see react-native-dialogs) | String | {} | | touchableProps | props of touchable opening input dialog | String | {} |

SettingsPicker

If you set multi = true, you can select multiple options, but you have to set a value of type Array instead. See props.

| 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 | <Your_Value_Type> | Array<Your_Value_Type> | Required | | valueFormat | Value formatter | Function (String) => String | null | | valuePlaceholder | placeholder if value is empty | String | ... | | options | picker values | Array of objects in format {label: string, value: string} | Required | | dialogDescription | text explaining what the user should do e.g. | String | '' | | onValueChange | callback to be invoked when the positive dialog button is pressed | Function (<Your_Value_Type> | Array<Your_Value_Type>) => null | Required | | disabled | whether the settings value should be editable or not | Boolean | false | | modalStyle | modal styles see here | Object | {} | | multi | allow selection of multiple options | Boolean | false | | renderCloseBtn | render button to close dialog | Function () => React.Component | <Text>Close</Text> | | renderListItem | render item of options list | Function ({ item Object, index Integer, onSelect Function, selected Boolean, label String, isFirst Boolean, isLast Boolean }) => React.Component | {} | | singleRadio | if multi = false: one option has to be selected? | Boolean | true |

modal style

const modalStyle = {
    innerWrapper: PropTypes.object,
    header: {
        titleWrapper: PropTypes.object,
        title: PropTypes.object,
        description: PropTypes.object,
        closeBtnWrapper: PropTypes.object,
    },
    list: {
        wrapper: PropTypes.object,
        scrollView: PropTypes.object,
        innerWrapper: PropTypes.object,
    },
};

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 | | descriptionProps | description props except style | Text Component Props | {} | | descriptionStyle | description style prop | Text PropTypes | {} | | description | description of setting | String | null | | 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 | | onValueChange | callback to be invoked when the positive dialog button is pressed | Function (Boolean) => null | Required | | trackColor | switch track color see React Native Switch prop trackColor | Object | null | | switchProps | Switch component props except the ones mentioned before | Switch Component Props | {} |

SettingsButton

| 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 | | descriptionProps | description props except style | Text Component Props | {} | | descriptionStyle | description style prop | Text PropTypes | {} | | description | description of setting | String | null | | rightIconWrapperStyle | wrapper style prop of wrapper around rightBtn | View Component Props | {} | | rightIcon | anything that should be displayed on the right side of the button | Function () => <React.Component> | null | | disabled | whether the settings value should be editable or not | Boolean | false | | onPress | callback to be invoked when the button is pressed | Function (Boolean) => null | Required |

Showcase - v0.0.1