https://github.com/alpha0010/rn-native-settings-view
Native component based settings view for React Native
https://github.com/alpha0010/rn-native-settings-view
Last synced: 10 months ago
JSON representation
Native component based settings view for React Native
- Host: GitHub
- URL: https://github.com/alpha0010/rn-native-settings-view
- Owner: alpha0010
- License: mit
- Created: 2022-06-10T20:32:35.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-14T22:01:11.000Z (over 2 years ago)
- Last Synced: 2025-08-27T20:30:35.721Z (10 months ago)
- Language: Kotlin
- Size: 608 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# rn-native-settings-view
Native component based settings view for React Native. "It looks native
because it is native."
| Android | iOS |
|:-------:|:---:|
| 
| 
|
## Installation
```sh
npm install rn-native-settings-view
cd ios && pod install
```
## Usage
`SettingsView` is a controlled component, so results from `onChange` must be
applied to the config.
Icons (optional) are from icon fonts. The example below retrieves fonts from
`react-native-vector-icons`, but there is no dependency on said library.
Adding an icon font is sufficient for usage.
Some settings may require multiple screens to use. When this occurs,
`SettingsView` will call `onSubViewRequest` with an opaque object. The app
should render `` on a separate
screen. (There is no dependency on a specific navigation library; use
whichever library best suits the app.)
```ts
import {
mergeChanges,
SettingsResult,
SettingsSubView,
SettingsView
} from 'rn-native-settings-view';
// ...
const [settings, setSettings] = useState({
// Generic pressable row.
'account': {
title: 'Account',
type: 'details' as const,
details: 'user@example.com',
icon: {
font: Icon.getFontFamily(),
char: Icon.getRawGlyphMap().person,
},
weight: 0,
},
// Radio option selector.
'search': {
value: 'google',
title: 'Search Engine',
type: 'list' as const,
labels: ['Google', 'Yahoo', 'Bing', 'DuckDuckGo'],
values: ['google', 'yahoo', 'bing', 'duckduckgo'],
icon: {
fg: 'white',
bg: '#43b0ef',
font: Icon.getFontFamily(),
char: Icon.getRawGlyphMap().search,
},
weight: 1,
},
// Boolean toggle.
'notifications': {
value: true,
title: 'Notifications',
type: 'switch' as const,
weight: 2,
},
});
const onChange = useCallback(
(e: SettingsResult) => {
// saveSettingsToStorage(e);
setSettings((prev) => mergeChanges(prev, e));
},
[setSettings]
);
const onDetails = useCallback(
(page: keyof typeof settings) => {
console.log('User pressed: ' + page);
},
[]
);
const onSubViewRequest = useCallback(
(page: keyof typeof settings, subView: SettingsSubViewProps) =>
// Replace with preferred navigation library.
// Pushed screen should render .
navigation.push('Settings', {
subView,
title: settings[page].title,
}),
[navigation, settings]
);
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to
the repository and the development workflow.
## License
MIT