@busfor/react-native-navigation-appearance

react-native-navigation-appearance

React Native universal Touchable component.

---

Installation

Android

1 Install module

$ yarn add @busfor/react-native-navigation-appearance

2 Update MainActivity.java

This file is located in android/app/src/main/java/com/<yourproject>/MainActivity.java.

+import android.os.Bundle;
+import androidx.annotation.Nullable;
+import com.busfor.rnnappearance.RNNAppearanceModuleKt;

public class MainActivity extends NavigationActivity {
+  @Override
+  protected void onCreate(@Nullable Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    RNNAppearanceModuleKt.setThemeResId(R.style.AppTheme);
+  }
}

3 Configure android styles.xml

This file is located in android/app/src/main/res/values/styles.xml.

<resources>
+
+    <style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat.Light" />

    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
    </style>

</resources>

4 Create android night styles.xml

This file should be located in android/app/src/main/res/values-night/styles.xml.

<resources>

    <style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat" />

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#FFFFFF</item>
    </style>

</resources>

IOS

Make sure you don't have UIUserInterfaceStyle in Info.plist

Usage

1. Create a theme with dark and light appearances using createTheme function:

import { createTheme } from '@busfor/react-native-navigation-appearance'

export const theme = createTheme({
  dark: {
    backgroundColor: '#121212',
    textColor: '#fff',
    primaryColor: 'blue',
  },
  light: {
    backgroundColor: '#fff',
    textColor: '#121212',
    primaryColor: 'red',
  },
})

1. Create default options using createDefaultOptions function:

import { createDefaultOptions, Appearance } from '@busfor/react-native-navigation-appearance'

import { theme } from './theme'

export const defaultOptions = createDefaultOptions(({ appearance }) => ({
  statusBar: {
    style: appearance === Appearance.dark ? 'light' : 'dark',
    backgroundColor: theme[appearance].backgroundColor,
  },
  navigationBar: {
    backgroundColor: theme[appearance].backgroundColor,
  },
  topBar: {
    background: {
      color: theme[appearance].backgroundColor,
    },
    title: {
      color: theme[appearance].textColor,
    },
  },
}))

1. Add ThemeProvider to register and init module with defaultOptions that we have created:

NOTE: Make sure that you are running initAppearanceModule inside Navigation.events().registerAppLaunchedListener callback and before Navigation.setRoot function!

import { ThemeProvider, initAppearanceModule } from '@busfor/react-native-navigation-appearance'

Navigation.registerComponent(
  'AppScreen',
  () => (props) => (
    <ThemeProvider>
      <AppScreen {...props} />
    </ThemeProvider>
  ),
  () => AppScreen
)

Navigation.events().registerAppLaunchedListener(async () => {
  await initAppearanceModule(defaultOptions)
  Navigation.setRoot({ ... })
})

1. Create screen options using createOptions and defaultOptions functions:

This file should be located in /AppScreen/options.js

import { createOptions } from '@busfor/react-native-navigation-appearance'
import { defaultOptions } from '../defaultOptions'

export default createOptions((props) =>
  defaultOptions(props, {
    // props contains the current appearance and passed props to the screen
    topBar: {
      title: {
        text: props.appearance,
      },
    },
  })
)

1. Create styles using createStyles function:

This file should be located in /AppScreen/styles.js

import { createStyles } from '@busfor/react-native-navigation-appearance'
import { theme } from '../theme'

export default createStyles(({ appearance }) => ({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: theme[appearance].backgroundColor,
  },

  text: {
    color: theme[appearance].textColor,
    paddingVertical: 8,
    textAlign: 'center',
  },
}))

1. Use useThemedOptions, initialOptions to define screen options and use useStyles hook to provide styles:

This file should be located in /AppScreen/index.js

import React from 'react'
import { Text, SafeAreaView } from 'react-native'
import { useStyles, initialOptions, useThemedOptions } from '@busfor/react-native-navigation-appearance'

import stylesCreator from './styles'
import options from './options'

const AppScreen = ({ componentId }) => {
  useThemedOptions({}, options, componentId)

  const styles = useStyles(stylesCreator)

  return (
    <SafeAreaView style={styles.container}>
      <Text>Hello world!</Text>
    </SafeAreaView>
  )
}

AppScreen.options = initialOptions(options)

export default AppScreen

Also you can open the example project to see how it works in the real case.