{"id":19164526,"url":"https://github.com/codemotionapps/react-native-dynamic","last_synced_at":"2025-04-05T06:05:12.228Z","repository":{"id":38872972,"uuid":"273665261","full_name":"codemotionapps/react-native-dynamic","owner":"codemotionapps","description":"Helper APIs to work with dark mode in React Native","archived":false,"fork":false,"pushed_at":"2023-01-26T21:46:33.000Z","size":3716,"stargazers_count":233,"open_issues_count":25,"forks_count":19,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T05:04:06.300Z","etag":null,"topics":["dark-mode","react","react-native","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-dynamic","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codemotionapps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-20T08:03:51.000Z","updated_at":"2024-08-19T02:50:04.000Z","dependencies_parsed_at":"2023-02-15T00:46:48.673Z","dependency_job_id":null,"html_url":"https://github.com/codemotionapps/react-native-dynamic","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemotionapps%2Freact-native-dynamic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemotionapps%2Freact-native-dynamic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemotionapps%2Freact-native-dynamic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemotionapps%2Freact-native-dynamic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codemotionapps","download_url":"https://codeload.github.com/codemotionapps/react-native-dynamic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294538,"owners_count":20915340,"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":["dark-mode","react","react-native","typescript"],"created_at":"2024-11-09T09:22:33.128Z","updated_at":"2025-04-05T06:05:12.209Z","avatar_url":"https://github.com/codemotionapps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/codemotionapps/react-native-dynamic/master/.vscode/logo.png\" alt=\"Logo\" width=\"128\" height=\"128\"\u003e\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003ereact-native-dynamic\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://www.npmjs.com/package/react-native-dynamic\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-native-dynamic.svg\" alt=\"npm version\"\u003e\u003c/a\u003e\n\u003ca href=\"http://makeapullrequest.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs Welcome\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u0026nbsp;\u0026nbsp;\u003cimg src=\"https://raw.githubusercontent.com/codemotionapps/react-native-dynamic/master/.vscode/showcase.ios.gif\" alt=\"Showcase iOS\" width=\"200\"\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003cimg src=\"https://raw.githubusercontent.com/codemotionapps/react-native-dynamic/master/.vscode/showcase.android.gif\" alt=\"Showcase Android\" width=\"234\"\u003e\u0026nbsp;\u0026nbsp;\u003c/p\u003e\n\n## Installation\n\n```sh\nnpm install react-native-dynamic\n```\n\n## Usage\n\n### `useDarkMode`\n\nReturns a boolean. `true` when dark mode is on.\n\n```javascript\nimport { useDarkMode } from 'react-native-dynamic'\n\nfunction Component() {\n\tconst isDarkMode = useDarkMode()\n\treturn \u003cView style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} /\u003e\n}\n```\n\n### `DynamicValue`\n\nA helper class meant to be used with [`DynamicStyleSheet`](#DynamicStyleSheet) and [`useDynamicValue`](#useDynamicValue). The first argument is the value to be used with a light color scheme, the second argument is the value to be used with a dark color scheme.\n\n```javascript\nimport { DynamicValue } from 'react-native-dynamic'\n\nconst backgroundColor = new DynamicValue('white', 'black')\n```\n\n### `DynamicStyleSheet`\n\nJust like [`StyleSheet`](https://reactnative.dev/docs/stylesheet) but with support for dynamic values.\n\n```javascript\nimport { DynamicStyleSheet, DynamicValue, useDynamicValue } from 'react-native-dynamic'\n\nconst dynamicStyles = new DynamicStyleSheet({\n\tcontainer: {\n\t\tbackgroundColor: new DynamicValue('white', 'black'),\n\t\tflex: 1,\n\t},\n\ttext: {\n\t\tcolor: new DynamicValue('black', 'white'),\n\t\ttextAlign: 'center',\n\t},\n})\n\nfunction Component() {\n\tconst styles = useDynamicValue(dynamicStyles)\n\n\treturn (\n\t\t\u003cView style={styles.container}\u003e\n\t\t\t\u003cText style={styles.text}\u003eMy text\u003c/Text\u003e\n\t\t\u003c/View\u003e\n\t)\n}\n```\n\n### `ColorSchemeProvider`\n\nAllows you to set a specific mode for children.\n\n```javascript\nimport { ColorSchemeProvider } from 'react-native-dynamic'\n\nfunction MyScreen() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t{/* will be rendered using dark theme */}\n\t\t\t\u003cColorSchemeProvider mode=\"dark\"\u003e\n\t\t\t\t\u003cComponent /\u003e\n\t\t\t\u003c/ColorSchemeProvider\u003e\n\n\t\t\t{/* will be rendered using light theme */}\n\t\t\t\u003cColorSchemeProvider mode=\"light\"\u003e\n\t\t\t\t\u003cComponent /\u003e\n\t\t\t\u003c/ColorSchemeProvider\u003e\n\n\t\t\t{/* will be rendered using current theme */}\n\t\t\t\u003cComponent /\u003e\n\t\t\u003c/\u003e\n\t)\n}\n```\n\nIt is recommended to wrap your application in a `ColorSchemeProvider` without a `mode` prop to observe a performance improvement.\n\n```javascript\nfunction App() {\n\treturn (\n\t\t\u003cColorSchemeProvider\u003e\n\t\t\t{/* ... */}\n\t\t\u003c/ColorSchemeProvider\u003e\n\t)\n}\n```\n\n### `useDynamicValue`\n\nReturns the appropriate value depending on the theme. You can either pass a `DynamicValue`, an object containing `dark` and `light` properties, or just two arguments.\n\n```javascript\nimport { DynamicValue, useDynamicValue } from 'react-native-dynamic'\nconst lightLogo = require('./light.png')\nconst darkLogo = require('./dark.png')\nconst logoUri = new DynamicValue(lightLogo, darkLogo)\n\nfunction Logo() {\n\tconst source = useDynamicValue(logoUri)\n\treturn \u003cImage source={source} /\u003e\n}\n```\n\n```javascript\nimport { useDynamicValue } from 'react-native-dynamic'\n\nfunction Input() {\n\tconst placeholderColor = useDynamicValue('black', 'white')\n\treturn \u003cTextInput placeholderTextColor={placeholderColor} /\u003e\n}\n```\n\n```javascript\nimport { useDynamicValue } from 'react-native-dynamic'\n\nconst datePickerConfig = {\n\tlight: {\n\t\tbackgroundColor: 'white',\n\t\tcolor: 'black',\n\t},\n\tdark: {\n\t\tbackgroundColor: 'black',\n\t\tcolor: 'white',\n\t},\n}\n\nfunction CustomDatePicker() {\n\tconst config = useDynamicValue(datePickerConfig)\n\treturn \u003cDatePicker config={config} /\u003e\n}\n```\n\n### `useColorSchemeContext`\n\nReturns `dark` or `light` but reads value from context.\n\n```javascript\nimport { useColorSchemeContext } from 'react-native-dynamic'\n\nconst backgroundColors = {\n\tlight: 'white',\n\tdark: 'black',\n}\n\nfunction Component() {\n\tconst mode = useColorSchemeContext()\n\tconst backgroundColor = backgroundColors[mode]\n\treturn \u003cView style={{ backgroundColor }} /\u003e\n}\n```\n\n## Requirements\n\n- React Native 0.62\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemotionapps%2Freact-native-dynamic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodemotionapps%2Freact-native-dynamic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemotionapps%2Freact-native-dynamic/lists"}