Jean Verster jeanverster

Passionate about building great user experiences. Working with React & React Native ⚛︎

jeanverster / PointsDial.tsx

Created November 25, 2019 07:38

	import * as React from 'react'
	import { Dimensions } from 'react-native'
	import Animated from 'react-native-reanimated'
	import Svg, { Path } from 'react-native-svg'
	import { theme } from '../../theme'
	import { BodyText, H1, H5 } from '../../typography'
	import Box from '../Box'
	import Card from '../Card'

	export type PointsDialProps = {

jeanverster / Box.tsx

Created November 5, 2019 17:23

jeanverster / ThemeProvider.tsx

Last active November 5, 2019 17:22

	import { ThemeProvider } from 'styled-components'

	<ThemeProvider theme={theme}>
	<App />
	</ThemeProvider>

jeanverster / update-theme.tsx

Last active November 5, 2019 18:52

	import { modes, theme as baseTheme } from './src/theme'
	import { get, merge } from 'lodash'

	const getTheme = (mode) =>
	merge({}, baseTheme, {
	colors: get(baseTheme.colors.modes, mode, baseTheme.colors)
	}

	const theme = getTheme(mode)

jeanverster / toggle-mode.tsx

Last active November 5, 2019 18:50

	import { modes } from './src/theme'

	const [mode, setMode] = React.useState(modes[0])

	const toggleMode = () => {
	const i = (modes.indexOf(mode) + 1) % modes.length
	setMode(modes[i])
	}

	<ThemeProvider theme={theme}>

jeanverster / fetch-modes.tsx

Created November 5, 2019 16:50

	React.useEffect(() => {
	async function getMode() {
	const stored = await colorModeStorage.get()
	setMode(stored)
	}
	getMode()
	}, [])

	React.useEffect(() => {
	if (!mode) return

jeanverster / multiple-modes.ts

Created November 5, 2019 16:46

jeanverster / AppProvider.tsx

Last active November 5, 2019 16:39

	import * as React from 'react'

	type AppContextType = {
	mode: string
	toggleMode: () => void
	}

	export const AppContext = React.createContext<Partial<AppContextType>>({
	mode: 'default'
	})

jeanverster / colorModeStorage.ts

Created November 5, 2019 16:31

	export const colorModeStorage = {
	get: async (): Promise<string \| null> => {
	return await AsyncStorage.getItem('MODE')
	},
	set: (mode: string): Promise<void> => {
	return AsyncStorage.setItem('MODE', mode)
	}
	}

jeanverster / App.tsx

Last active November 5, 2019 16:56

	import { get, merge } from 'lodash'
	import * as React from 'react'
	import { ThemeProvider } from 'styled-components'
	import AppProvider from './src/context'
	import AppNavigation from './src/navigation'
	import { modes, theme as baseTheme } from './src/theme'
	import { colorModeStorage } from './src/utils'

	const AppWithProvider = () => {
	const getTheme = (mode) =>