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