App.tsx

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) =>
    merge({}, baseTheme, {
      colors: get(baseTheme.colors.modes, mode, baseTheme.colors)
    })

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

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

  React.useEffect(() => {
    if (!mode) return
    colorModeStorage.set(mode)
  }, [mode])

  const theme = getTheme(mode)

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

  return (
    <ThemeProvider theme={theme}>
      <AppProvider mode={mode} toggleMode={toggleMode}>
        <AppNavigation />
      </AppProvider>
    </ThemeProvider>
  )
}

export default AppWithProvider