react-native-settings-ui

Note that the color is a bit different because of the video format

Installation

npm install react-native-settings-ui

Imports

import {
  SettingsProvider,
  SettingsGroup,
  SettingsInfoDisplay,
  SettingsToggle,
  SettingsButton,
} from 'react-native-settings-ui';

Expo

Take a look of example, which used expo.

Component breakdown, complete code in here

SettingsProvider

<SettingsProvider theme="light">{SettingsGroup}</SettingsProvider>

SettingsProvider is a wrapper component that provides a prebuilt theme.

| Prop | Type | Default | Description | | ----- | ------ | ------- | ----------------------------------------------------------------------------------------------- | | theme | string | "light" | The theme to be applied to the settings components. Accepted values are "light" and "dark". |

SettingsGroup

<SettingsGroup title="My app settings" footerText="Hello, this is toggle">
    {SettingsComponent}
</SettingsProvider>

The SettingsGroup component is a container for organizing your settings components into logical groups. It displays a title and an optional footer text.

| Prop | Type | Default | Description | | ---------- | --------- | ------- | ---------------------------------------------------------------------------------------------- | | title | string | | The title displayed at the top of the settings group. | | children | ReactNode | | The settings components to be displayed within the group. | | footerText | string | | (Optional) The footer text displayed at the bottom of the settings group. Default is null. |

SettingsToggle

<SettingsToggle
  title="Default color"
  value={isToggled}
  onValueChange={() => setIsToggled(!isToggled)}
/>

The SettingsToggle component is a customizable switch for the settings components. It allows you to toggle between true and false states, and dispaly different infos.

| Prop | Type | Default | Description | | ------------------- | ---------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------- | | title | string | | The title displayed next to the toggle switch. | | value | boolean | | The current value of the toggle switch (true or false). | | onValueChange | (newValue: boolean) => void | | Callback function that is triggered when the toggle switch value changes. | | titleTextStyle | TextStyle | | (Optional) Custom text style for the title. Default is null. | | trackColor | { false: ColorValue; true: ColorValue; } | { false: '#767577', true: '#81b0ff' } | (Optional) Custom track color for the switch when false and true. | | thumbColorOff | ColorValue | "#eaeaea" | (Optional) Custom thumb color for the switch when the value is false. | | thumbColorOn | ColorValue | "#fff" | (Optional) Custom thumb color for the switch when the value is true. | | ios_backgroundColor | ColorValue | "#3e3e3e" | (Optional) Custom background color for the switch on iOS. |

SettingsInfoDisplay

<SettingsInfoDisplay
  title="switch 1 state (boolEnable)"
  status={isToggled}
  type="boolEnable"
/>

The SettingsInfoDisplay component acts like settings information display, allowing you to show different types of status information based on various conditions. It can display information for boolean states, custom string states, or use custom true/false status text.

| Prop | Type | Default | Description | | ----------------- | ----------------- | ------- | -------------------------------------------------------------------------------------------------------------------- | | title | string | | The title displayed next to the status information. | | status | boolean | string | | The status value to be displayed based on the type prop. | | type | InfoDisplayTypes | | The type of information to display. Accepted values are 'boolEnable', 'boolYes', 'boolCustom', and 'custom'. | | infoTitle | TextStyle | | (Optional) Custom text style for the title. Default is null. | | statusText | TextStyle | | (Optional) Custom text style for the status text. Default is null. | | customTrueStatus | string | | (Optional) Custom status text when status is true. Default is null. | | customFalseStatus | string | | (Optional) Custom status text when status is false. Default is null. |

SettingsButton

<SettingsButton
  title="Press me"
  onPress={() => Alert.alert('', 'Something happened...')}
/>

The SettingsButton component is a customizable button. It supports two types: 'default' and 'newpage'. The 'newpage' type is used when you want to open a new settings screen in your current settings screen, while the 'default' type serves as a regular button.

| Prop | Type | Default | Description | | ----------- | ------------- | --------- | -------------------------------------------------------------------------------------------------------- | | title | string | | The title displayed on the button. | | onPress | () => void | | Callback function that is triggered when the button is pressed. | | type | ButtonVariant | "default" | (Optional) The type of button. Accepted values are 'default' and 'newpage'. | | statusText | string | "" | (Optional) Status text displayed next to the arrow for the 'newpage' type. Default is an empty string. | | buttonTitle | TextStyle | | (Optional) Custom text style for the button title. Default is null. | | arrow | TextStyle | | (Optional) Custom text style for the arrow. Default is null. |

Todo

• better types and improve code quality
• add icons
• add more components & merge components
• test on android

Contributing

If you've found an issue or have an idea for a new feature, feel free to open an issue or submit a pull request.

See the contributing guide to learn how to contribute to this repository and the development workflow.

If you like this library, consider giving it a star ⭐

Made with create-react-native-library