{"id":18576598,"url":"https://github.com/mmomtchev/react-native-settings","last_synced_at":"2025-04-10T09:30:33.366Z","repository":{"id":57683088,"uuid":"493408645","full_name":"mmomtchev/react-native-settings","owner":"mmomtchev","description":"React Native Universal Settings Screen","archived":false,"fork":false,"pushed_at":"2023-10-16T15:38:44.000Z","size":6910,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T19:06:00.515Z","etag":null,"topics":["android","ios","preferences","react-native","settings"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmomtchev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-17T20:45:48.000Z","updated_at":"2024-06-07T13:44:10.000Z","dependencies_parsed_at":"2024-11-06T23:29:29.873Z","dependency_job_id":"fe112c22-830d-4790-a946-c50869c6d149","html_url":"https://github.com/mmomtchev/react-native-settings","commit_stats":{"total_commits":83,"total_committers":2,"mean_commits":41.5,"dds":0.07228915662650603,"last_synced_commit":"c9a1cf7fccbf63d5ff0d97f5da3844a0484531dc"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmomtchev%2Freact-native-settings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmomtchev%2Freact-native-settings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmomtchev%2Freact-native-settings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmomtchev%2Freact-native-settings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmomtchev","download_url":"https://codeload.github.com/mmomtchev/react-native-settings/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248191594,"owners_count":21062531,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","preferences","react-native","settings"],"created_at":"2024-11-06T23:25:34.821Z","updated_at":"2025-04-10T09:30:32.762Z","avatar_url":"https://github.com/mmomtchev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-settings\n\n[![License: ISC](https://img.shields.io/github/license/mmomtchev/react-native-settings)](https://github.com/mmomtchev/react-native-settings/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@mmomtchev/react-native-settings)](https://www.npmjs.com/package/@mmomtchev/react-native-settings) [![test-dev](https://github.com/mmomtchev/react-native-settings/actions/workflows/test-dev.yml/badge.svg)](https://github.com/mmomtchev/react-native-settings/actions/workflows/test-dev.yml) [![codecov](https://codecov.io/gh/mmomtchev/react-native-settings/branch/main/graph/badge.svg?token=EQ2TWCZAS4)](https://codecov.io/gh/mmomtchev/react-native-settings)\n\n**React Native Universal Settings Screen With Async Support \u0026 Spinner**\n\nTo my greatest surprise, `react-native`, unlike the native frameworks of iOS and Android, does not offer a standard ready-to-use `Settings` screen template.\n\nThis package fills this void providing the basic framework needed to implement a settings screen, bringing down its cost from 1 day to 15 minutes for a simple application.\n\nIt works with any configuration getter or setter and it will automatically display a spinner if you use an asynchronous function.\n\nIt can be freely styled to match the looks of the application.\n\nIt has no runtime dependencies besides `@react-navigation`.\n\n# Usage\n\n```shell\nnpm i --save @mmomtchev/react-native-settings\n```\n\n[Check the examples](https://mmomtchev.github.io/react-native-settings/)\n\n## Quick Start\n\nA simple Settings screens is easy to make:\n\n```tsx\nimport React from 'react';\nimport {StyleSheet, View} from 'react-native';\nimport {NavigationContainer} from '@react-navigation/native';\n\nimport {default as ReactNativeSettings, SettingsElement} from '@mmomtchev/react-native-settings';\n\n// We will store the config here\nconst configData: Record\u003cstring, string\u003e = {};\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        backgroundColor: '#fff',\n        justifyContent: 'center',\n        padding: '1.5%'\n    }\n});\n\n// Retrieve a conf item or return the default\nconst confGet = (key: string, def: string): string =\u003e configData[key] || def;\n\n// Store a conf item\nconst confSet = (key: string, value: string): void =\u003e {\n    configData[key] = value;\n};\n\n// Choose from a list item\nconst intelligence: Record\u003cstring, string\u003e = {L: 'Low', M: 'Medium', H: 'High'};\n\n// This is the configuration schema\nconst settings: SettingsElement[] = [\n    {\n        label: 'Name',\n        type: 'string',\n        // You can override the way the value is displayed\n        display: (s) =\u003e (s \u0026\u0026 s.length ? s : 'empty'),\n        get: confGet.bind(null, '@name', ''),\n        set: confSet.bind(null, '@name')\n    },\n    // Choose from a list, uses the standard phone navigation screens\n    {\n        label: 'Intelligence',\n        title: 'Select Intelligence',\n        type: 'enum',\n        values: Object.keys(intelligence),\n        display: (v: string) =\u003e intelligence[v],\n        get: confGet.bind(null, '@int', 'M'),\n        set: confSet.bind(null, '@int')\n    },\n    // Boolean switch group\n    {\n        label: 'Wings',\n        type: 'boolean',\n        get: async () =\u003e (await confGet('@wings', 'false')) === 'true',\n        set: (v) =\u003e confSet('@wings', v.toString())\n    }\n];\n\nexport default function Settings() {\n    // Simply pass the schema here\n    // It integrates in your existing `NavigationContainer` or `Screen`\n    return (\n        \u003cNavigationContainer\u003e\n            \u003cView style={styles.container}\u003e\n                \u003cReactNativeSettings settings={settings} /\u003e\n            \u003c/View\u003e\n        \u003c/NavigationContainer\u003e\n    );\n}\n```\n\n![screenshot](https://raw.githubusercontent.com/mmomtchev/react-native-settings/main/screenshot.png)\n\n# API\n\n\u003c!-- Generated by documentation.js. Update this documentation by updating the source code. --\u003e\n\n### Table of Contents\n\n*   [ReactNativeSettingsGetter](#reactnativesettingsgetter)\n*   [ReactNativeSettingsSetter](#reactnativesettingssetter)\n*   [SettingsElementString](#settingselementstring)\n    *   [label](#label)\n    *   [get](#get)\n    *   [set](#set)\n    *   [display](#display)\n*   [label](#label-1)\n*   [get](#get-1)\n*   [set](#set-1)\n*   [display](#display-1)\n*   [label](#label-2)\n*   [get](#get-2)\n*   [set](#set-2)\n*   [display](#display-2)\n*   [title](#title)\n*   [label](#label-3)\n*   [get](#get-3)\n*   [set](#set-3)\n*   [label](#label-4)\n*   [elements](#elements)\n*   [SettingsStyle](#settingsstyle)\n*   [defaultStyles](#defaultstyles)\n*   [ReactNativeSettings](#reactnativesettings)\n    *   [Parameters](#parameters)\n*   [settings](#settings)\n*   [styles](#styles)\n*   [spinnerGraceTime](#spinnergracetime)\n\n## ReactNativeSettingsGetter\n\nA configuration getter, may be synchronous or asynchronous.\n\nAsynchronous getters will trigger a spinning activity indicator.\n\nType: function (): (T | [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\\\u003cT\u003e)\n\n## ReactNativeSettingsSetter\n\nA configuration setter, may be synchronous or asynchronous.\n\nMay synchronously return false to deny the operation.\n\nType: function (v: T): ([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | void | [Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\\\u003cvoid\u003e)\n\n## SettingsElementString\n\nA string element.\n\n`display` can be used to control the value shown - ie a password\ncan be reduced to '\\*\\*\\*'.\n\n### label\n\nLabel, either a string or a JSX element\n\nType: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | JSX.Element)\n\n### get\n\nConfiguration getter, will be called to retrieve the current value.\n\nIf it returns a Promise, a spinning activity indicator will be shown\nuntil the Promise resolve. Should not reject.\n\nType: [ReactNativeSettingsGetter](#reactnativesettingsgetter)\u003c[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)\u003e\n\n### set\n\nConfiguration setter, will be called when the user sets a new value.\n\nIf it returns a Promise, a spinning activity indicator will be shown\nuntil the Promise resolve. Should not reject.\n\nIf it synchronously returns false, the operation will be considered rejected.\n\nType: [ReactNativeSettingsSetter](#reactnativesettingssetter)\u003c[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)\u003e\n\n### display\n\nRender function.\n\nCan be used for example to always show a password as '\\*\\*\\*'\nor to display a fixed value such as 'Not set' for empty strings\n\nType: function (v: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)): [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)\n\n## label\n\nLabel, either a string or a JSX element\n\nType: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | JSX.Element)\n\n## get\n\nConfiguration getter, will be called to retrieve the current value.\n\nIf it returns a Promise, a spinning activity indicator will be shown\nuntil the Promise resolve. Should not reject.\n\nType: [ReactNativeSettingsGetter](#reactnativesettingsgetter)\u003c[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)\u003e\n\n## set\n\nConfiguration setter, will be called when the user sets a new value.\n\nIf it returns a Promise, a spinning activity indicator will be shown\nuntil the Promise resolve. Should not reject.\n\nIf it synchronously returns false, the operation will be considered rejected.\n\nType: [ReactNativeSettingsSetter](#reactnativesettingssetter)\u003c[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)\u003e\n\n## display\n\nRender function.\n\nCan be used for example to always show a password as '\\*\\*\\*'\nor to display a fixed value such as 'Not set' for empty strings\n\nType: function (v: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)): [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)\n\n## label\n\nLabel, either a string or a JSX element\n\nType: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | JSX.Element)\n\n## get\n\nConfiguration getter, will be called to retrieve the current value.\n\nIf it returns a Promise, a spinning activity indicator will be shown\nuntil the Promise resolve. Should not reject.\n\nType: [ReactNativeSettingsGetter](#reactnativesettingsgetter)\u003c[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)\u003e\n\n## set\n\nConfiguration setter, will be called when the user sets a new value.\n\nIf it returns a Promise, a spinning activity indicator will be shown\nuntil the Promise resolve. Should not reject.\n\nIf it synchronously returns false, the operation will be considered rejected.\n\nType: [ReactNativeSettingsSetter](#reactnativesettingssetter)\u003c[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)\u003e\n\n## display\n\nRender function.\n\nCan be used for example to always show a password as '\\*\\*\\*'\nor to display a fixed value such as 'Not set' for empty strings\n\nType: function (v: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)): [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)\n\n## title\n\nOptional title for the selection screen. If it is not provided\nthe selection screen won't have a header and won't have a back button.\n\nType: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)\n\n## label\n\nLabel, either a string or a JSX element\n\nType: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | JSX.Element)\n\n## get\n\nConfiguration getter, will be called to retrieve the current value.\n\nIf it returns a Promise, a spinning activity indicator will be shown\nuntil the Promise resolve. Should not reject.\n\nType: [ReactNativeSettingsGetter](#reactnativesettingsgetter)\u003c[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)\u003e\n\n## set\n\nConfiguration setter, will be called when the user sets a new value.\n\nIf it returns a Promise, a spinning activity indicator will be shown\nuntil the Promise resolve. Should not reject.\n\nIf it synchronously returns false, the operation will be considered rejected.\n\nType: [ReactNativeSettingsSetter](#reactnativesettingssetter)\u003c[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)\u003e\n\n## label\n\nLabel, either a string or a JSX element\n\nType: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | JSX.Element)\n\n## elements\n\nSubelements\n\nType: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\\\u003cSettingsElement\u003e\n\n## SettingsStyle\n\nAllows optional overriding of the styles of the elements\n\nThe default styles are in `defaultStyles`\n\n## defaultStyles\n\nDefault styles\n\nType: [SettingsStyle](#settingsstyle)\n\n## ReactNativeSettings\n\nConfigurable Settings Screen for React Native.\n\nMust be included inside of a \u003cNavigationContainer\u003e or a \u003c*navigation*.Screen\u003e component.\n\n### Parameters\n\n*   `props` **{settings: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\\\u003cSettingsElement\u003e, styles: [SettingsStyle](#settingsstyle)?, spinnerGraceTime: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?}**\u0026#x20;\n\nReturns **JSX.Element**\u0026#x20;\n\n## settings\n\nList of settings\n\nType: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\\\u003cSettingsElement\u003e\n\n## styles\n\nOptional styles overriding the default styles\n\nType: [SettingsStyle](#settingsstyle)\n\n## spinnerGraceTime\n\nOptional delay in ms before showing the activity indicator.\nPrevents screen flickering when the updates are very fast.\n\nType: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)\n\n# License\n\nISC License\n\nCopyright (c) 2022, Momtchil Momtchev \u003cmomtchil@momtchev.com\u003e\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted, provided that the above\ncopyright notice and this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES\nWITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF\nMERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR\nANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES\nWHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN\nACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF\nOR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.\n\n**Includes Wings by Pedro Santos from NounProject.com**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmomtchev%2Freact-native-settings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmomtchev%2Freact-native-settings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmomtchev%2Freact-native-settings/lists"}