1.0.0-rc.1

.gitattributes

@@ -0,0 +1,8 @@
+*.pbxproj -text
+
+example/babel.config.js linguist-vendored=true
+example/metro.config.js linguist-vendored=true
+example/index.js linguist-vendored=true
+example/android/* linguist-vendored=true
+example/ios/* linguist-vendored=true
+Podfile linguist-vendored=true

.gitignore

@@ -0,0 +1,64 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+dist/
+
+example/.vscode/
+
+library/README.md
+
+Pods/

.prettierignore

@@ -0,0 +1,2 @@
+README.md
+.vscode/

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"semi": false,
+	"trailingComma": "all",
+	"tabWidth": 4,
+	"printWidth": 120,
+	"singleQuote": true,
+	"useTabs": true
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Attach to packager",
+			"cwd": "${workspaceFolder}/example",
+			"type": "reactnative",
+			"request": "attach",
+		},
+	],
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"editor.insertSpaces": false,
+	"editor.formatOnSave": true,
+	"react-native-tools.projectRoot": "example",
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Codemotion Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,143 @@
+# react-native-dynamic
+
+[![npm version](https://img.shields.io/npm/v/react-native-dynamic.svg)](https://www.npmjs.com/package/react-native-dynamic)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
+
+<p align="center"><img src="https://raw.githubusercontent.com/codemotionapps/react-native-dynamic/master/showcase.ios.gif" alt="Showcase iOS" width="200" height="433">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://raw.githubusercontent.com/codemotionapps/react-native-dynamic/master/showcase.android.gif" alt="Showcase Android" width="234" height="433"></p>
+
+## Installation
+
+```sh
+npm install react-native-dynamic
+```
+
+## Usage
+
+### `useDarkMode`
+
+Returns a boolean. `true` when dark mode is on.
+
+```javascript
+import { useDarkMode } from 'react-native-dynamic'
+
+function Component() {
+	const isDarkMode = useDarkMode()
+	return <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} />
+}
+```
+
+### `useColorSchemeProvider`
+
+Returns `dark` or `light`.
+
+```javascript
+import { useColorSchemeProvider } from 'react-native-dynamic'
+
+const backgroundColors = {
+	light: 'white',
+	dark: 'black',
+}
+
+function Component() {
+	const mode = useColorSchemeProvider()
+	const backgroundColor = backgroundColors[mode]
+	return <View style={{ backgroundColor }} />
+}
+```
+
+### `DynamicStyleSheet`, `DynamicValue` and `useDynamicStyleSheet`
+
+Just like [`StyleSheet`](https://reactnative.dev/docs/stylesheet) but with support for dynamic values.
+
+```javascript
+import { DynamicStyleSheet, DynamicValue, useDynamicStyleSheet } from 'react-native-dynamic'
+
+const dynamicStyles = new DynamicStyleSheet({
+	container: {
+		backgroundColor: new DynamicValue('white', 'black'),
+		flex: 1,
+	},
+	text: {
+		color: new DynamicValue('black', 'white'),
+		textAlign: 'center',
+	},
+})
+
+function Component() {
+	const styles = useDynamicStyleSheet(dynamicStyles)
+
+	return (
+		<View style={styles.container}>
+			<Text style={styles.text}>My text</Text>
+		</View>
+	)
+}
+```
+
+### `ColorSchemeProvider`
+
+Allows you to set a specific mode for children.
+
+```javascript
+import { ColorSchemeProvider } from 'react-native-dynamic'
+
+function MyScreen() {
+	return (
+		<>
+			{/* will be rendered using dark theme */}
+			<ColorSchemeProvider mode="dark">
+				<Component />
+			</ColorSchemeProvider>
+
+			{/* will be rendered using light theme */}
+			<ColorSchemeProvider mode="light">
+				<Component />
+			</ColorSchemeProvider>
+
+			{/* will be rendered using current theme */}
+			<Component />
+		</>
+	)
+}
+```
+
+It is recommended to wrap your application in a `ColorSchemeProvider` without a `mode` prop to observe a performance improvement.
+
+```javascript
+function App() {
+	return (
+		<ColorSchemeProvider>
+			{/* ... */}
+		</ColorSchemeProvider>
+	)
+}
+```
+
+### `useDynamicValue`
+
+Returns the appropriate value depending on the theme. You can either pass a `DynamicValue` or just two arguments.
+
+```javascript
+import { DynamicValue, useDynamicValue } from 'react-native-dynamic'
+const lightLogo = require('./light.png')
+const darkLogo = require('./dark.png')
+const logoUri = new DynamicValue(lightLogo, darkLogo)
+
+function Logo() {
+	const source = useDynamicValue(logoUri)
+	return <Image source={source} />
+}
+```
+
+```javascript
+import { useDynamicValue } from 'react-native-dynamic'
+
+function Input() {
+	const placeholderColor = useDynamicValue('black', 'white')
+	return <TextInput placeholderTextColor={placeholderColor} />
+}
+```
+
+## Requirements
+
+- React Native 0.62

example/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

example/.watchmanconfig

@@ -0,0 +1 @@
+{}

example/App.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import { View, Text, Image, Button } from 'react-native'
+import {
+	useDarkModeContext,
+	DynamicValue,
+	useDynamicStyleSheet,
+	DynamicStyleSheet,
+	DarkModeProvider,
+	useDynamicValue,
+} from 'react-native-dynamic'
+
+import Extra from './Extra'
+
+function Counter() {
+	const [counter, setCounter] = useState(0)
+	return <Button title={counter.toString()} onPress={() => setCounter((i) => i + 1)} />
+}
+
+export default function App() {
+	const mode = useDarkModeContext()
+	const styles = useDynamicStyleSheet(dynamicStyles)
+	const logo = useDynamicValue(require('./logoLight.png'), require('./logoDark.png'))
+
+	return (
+		<View style={styles.container}>
+			<Image source={require('./meme.png')} style={styles.meme} />
+
+			<Image source={logo} style={styles.image} />
+
+			<Text style={styles.initialStyle}>Current mode: {mode}</Text>
+
+			<DarkModeProvider mode="dark">
+				<Extra />
+			</DarkModeProvider>
+			<DarkModeProvider mode="light">
+				<Extra />
+			</DarkModeProvider>
+
+			{/* <Counter /> */}
+		</View>
+	)
+}
+
+const dynamicStyles = new DynamicStyleSheet({
+	container: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		backgroundColor: new DynamicValue('#FFFFFF', '#000000'),
+	},
+	initialStyle: {
+		fontSize: 20,
+		textAlign: 'center',
+		margin: 10,
+		color: new DynamicValue('#000000', '#FFFFFF'),
+	},
+	image: {
+		borderWidth: 1,
+		borderColor: new DynamicValue('#000000', '#FFFFFF'),
+		width: 80,
+		height: 80,
+	},
+	meme: {
+		width: '100%',
+		height: 200,
+		marginBottom: 20,
+	},
+})

example/Extra.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+import { DynamicStyleSheet, useDynamicStyleSheet, useDarkModeContext, DynamicValue } from 'react-native-dynamic'
+
+export default function Extra() {
+	const mode = useDarkModeContext()
+	const styles = useDynamicStyleSheet(dynamicStyleSheet)
+	return (
+		<View style={styles.container}>
+			<Text style={styles.text}>Forced mode: {mode}</Text>
+		</View>
+	)
+}
+
+const dynamicStyleSheet = new DynamicStyleSheet({
+	container: {
+		borderColor: 'red',
+		borderWidth: 1,
+		backgroundColor: new DynamicValue('white', 'black'),
+		width: 150,
+		height: 50,
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+	text: {
+		textAlign: 'center',
+		color: new DynamicValue('black', 'white'),
+	},
+})