FirebaseコンソールからリアルタイムでReact Nativeアプリ(Expo)の外観をカスタマイズする

src
│  firebase.js
├─routes
│  │
│  └─navigation
│      │  Navigation.js
│      ├─drawer
│      │      Drawer.js
│      │
│      │stacks
│      │      Stacks.js
│      └─tabs
│              Tabs.js
├─scenes
│  ├─details
│  │      Details.js
│  │      index.js
│  │
│  ├─home
│  │      Home.js
│  │      index.js
│  │
│  ├─item1
│  │      index.js
│  │      Item1.js

** 途中省略 **

│  ├─item5
│  │      index.js
│  │      Item5.js
│  │
│  └─profile
│          index.js
│          Profile.js

** 以下省略 **

expo install firebase

import * as firebase from 'firebase'
import "firebase/auth"
import "firebase/firestore"
import "firebase/storage"

const firebaseConfig = {
  apiKey: "Your API Key",
  authDomain: "Your API Key",
  projectId: "Your API Key",
  storageBucket: "Your API Key",
  messagingSenderId: "Your API Key",
  appId: "Your API Key",
  measurementId: "Your API Key"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export { firebase };

import React, { useEffect, useState, createContext } from 'react'
import { NavigationContainer } from '@react-navigation/native'
import DrawerNavigator from './drawer'
import { firebase } from '../../firebase'

export const Global = createContext(); // contextを作成

export default function App() {
  const [data, setData] = useState([]) // Firestoreから取得したデータを格納するフックを作成
  const value = { // Providerにはvalueとして渡す
    data, setData,
  }

  useEffect(() => { // Firestoreから値をリッスンする処理
    const appRef = firebase.firestore().collection('appmenu')
    appRef
    .doc('config')
    .onSnapshot(function(document) {
      const appData = document.data()
      setData(appData)
    })
  }, []);

  return (
    <Global.Provider value={value}> {/* contextオブジェクトをラップしたコンポーネントに渡す */}
      <NavigationContainer>
        <DrawerNavigator />
      </NavigationContainer>
    </Global.Provider>
  )
}

Object {
  "color": Object {
    "drawer": "snow",
    "header": "black",
    "tab": "black",
  },
  "drawer": Array [
    Object {
      "icon": "adjust",
      "label": "Home",
      "value": 0,
    },
    Object {
      "icon": "allergies",
      "label": "lightgreen",
      "value": 1,
    },
    Object {
      "icon": "anchor",
      "label": "item2",
      "value": 2,
    },
    Object {
      "icon": "atom",
      "label": "item3",
      "value": 3,
    },
    Object {
      "icon": "award",
      "label": "award",
      "value": 4,
    },
    Object {
      "icon": "bacon",
      "label": "bacon",
      "value": 5,
    },
  ],
}

import { Global } from '../Navigation' // contextをインポートする

export const Item1Navigator = () => {
  const { data } = useContext(Global) // contextオブジェクトを受け取る
  return (
    <Stack.Navigator
      initialRouteName="Item1"
      headerMode="screen"
      screenOptions={
        {
          headerTintColor: 'white',
          headerStyle: { 
            backgroundColor: data.color ? data.color.header:colors.darkPurple // ヘッダーの背景色、受け取ったcontextを参照する
          },
          headerTitleStyle: { fontSize: 18 },
        }
      }
    >
      <Stack.Screen
        name="Item1"
        component={Item1}
        options={({ navigation }) => ({
          title: 'Item1',
          headerLeft: () => <HeaderLeft navigation={navigation} />,
        })}
      />
    </Stack.Navigator>
  )
}

import { Global } from '../Navigation' // contextをインポートする

const TabNavigator = () => {
  const { data } = useContext(Global) // contextオブジェクトを受け取る
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => {
          switch (route.name) {
            case 'Home':
              return (
                <FontIcon
                  name="home"
                  color={focused ? colors.lightPurple : colors.gray}
                  size={20}
                  solid
                />
              )
            case 'Profile':
              return (
                <FontIcon
                  name="user"
                  color={focused ? colors.lightPurple : colors.gray}
                  size={20}
                  solid
                />
              )
            default:
              return <View />
          }
        },
      })}
      tabBarOptions={{
        activeTintColor: colors.lightPurple,
        inactiveTintColor: colors.gray,
        style: {
          backgroundColor: data.color?data.color.tab:colors.lightPurple, // タブバーの背景色、受け取ったcontextを参照する
        },
      }}
      initialRouteName="Home"
      swipeEnabled={false}
    >
      <Tab.Screen name="Home" component={HomeNavigator} />
      <Tab.Screen name="Profile" component={ProfileNavigator} />
    </Tab.Navigator>
  )
}

/* ドロワー内のアイテムと紐づけるコンポーネントをインポート */
import TabNavigator from '../tabs'
import { Item1Navigator, Item2Navigator, Item3Navigator, Item4Navigator, Item5Navigator } from '../stacks'

import { Global } from '../Navigation' // contextをインポートする

const DrawerMenuList = [ // インポートしたコンポーネントを配列にまとめる。配列の索引番号を利用して表示順を制御する
  TabNavigator,
  Item1Navigator,
  Item2Navigator,
  Item3Navigator,
  Item4Navigator,
  Item5Navigator,
]

const DrawerNavigator = () => {
  const { data } = useContext(Global) // contextオブジェクトを受け取る
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={DrawerMenuContainer}
      drawerStyle={{
        backgroundColor: data.color?data.color.drawer:'white', // ドロワーの背景色、受け取ったcontextを参照する
      }}
    >
      {
        data.drawer?
        data.drawer.map((item, i) => { // data.drawerをmap関数でループしてドロワー内のアイテムを出力する
          return (
            <Drawer.Screen
              key={i}
              name={item.label}
              component={DrawerMenuList[item.value]} // コンポーネントの表示順は配列の索引番号とする
              options={{
                title: item.label,
                drawerIcon: ({focused, size}) => (
                  <FontIcon
                    name={item.icon}
                    size={size}
                    color={focused ? '#7cc' : '#ccc'}
                  />
                ),
              }}
            />
          )
        }):
        <Drawer.Screen
          name="Home"
          component={TabNavigator} 
        />
      }
    </Drawer.Navigator>
  )
}