react-native-settings-components v0.0.2

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

SettingsTextLabel - added by radi-cho

The same props as SettingsCategoryHeader's props.

SettingsDividerLong

SettingsDividerShort

SettingsEditText

SettingsPicker

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

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

SettingsButton

Showcase - v0.0.1