React-native-settings-ui NPM

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	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	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`.