// ./App.js
// Example with Dark Mode
import { ThemeProvider } from 'react-dual-theme'
import { DarkModeProvider } from 'react-native-dark-mode'

import { Text, View } from './ThemedComponents'

const App = () => {
  return (
    <DarkModeProvider>
      <ThemeProvider theme={['red-on-light', 'red-on-dark']}>
        <View>
          <Text>Hello themed text!</Text>
        </View>
      </ThemeProvider>
    </DarkModeProvider>
}

// ./ThemedComponents.js
// @flow
import * as React from 'react'
import {
  StyleSheet,
  View as RNView,
  Text as RNText,
} from 'react-native'
import { useTheme } from 'react-dual-theme'
import { useDarkMode } from 'react-native-dark-mode'

const viewStyles = StyleSheet.create({
  'red-on-dark': { backgroundColor: 'black' },
  'red-on-light': { backgroundColor: 'white' },
})

// Type just for example purposes:
declare type Style = null | Object | (null | Object | Style)[];

type Props = {
  children?: React.Node,
  style?: Style,
}

export const View = ({ children, style, ...rest }: Props) => {
  const [light, dark] = useTheme()
  const isDarkMode: boolean = useDarkMode()

  // Add some theming logic..
  const themeStyle = isDarkMode ? viewStyles[dark] : viewStyles[light]

  return <RNView
    {...rest}
    style={[themeStyle, style]}
  >
    {children}
  </RNView>
}

const textStyles = StyleSheet.create({
  'red-on-dark': { color: 'red' },
  'red-on-light': { color: 'red' },
})

export const Text = ({ children, style, ...rest }: Props) => {
  const [light, dark] = useTheme()
  const isDarkMode: boolean = useDarkMode()

  // Add some theming logic..
  const themeStyle = isDarkMode ? textStyles[dark] : textStyles[light]

  return <RNText
    {...rest}
    style={[themeStyle, style]}
  >
    {children}
  </RNText>
}

import { ThemeProvider, useTheme } from 'react-dual-theme'

type Props = {
  children?: React.Node,
  style?: Style,
  theme: string | [string, string],
}

export const View = ({ children, style, theme, ...rest }: Props) => {
  const Component = <RNView
      // ...
    />

  return theme // Provide new theme context when needed
    ? <ThemeProvider theme={theme}><Component /></ThemeProvider>
    : <Component />
}