2019.09.28

【React Native】Expo SDK 35で大雑把にダークモードに対応した時のメモ

Develop

SDK35で待望のダークモードへの対応方法が実装された

iOS13がリリースされたのでできればアプリもダークモードに対応したいのでとりあえずやってみた時のメモです。

まずはExpoのブログを確認しよう

Expo SDK 35 is now available - Exposition

どうやら react-native-appearance というやつで対応できるらしい。早速対応してみたのが以下である。

Appearance - Expo Documentation

styles.js

import { StyleSheet, Platform } from 'react-native';
import Constants from 'expo-constants';
import { Appearance } from 'react-native-appearance';

// ダークモード用のCSS
const colorScheme = Appearance.getColorScheme();
const ThemeConstants = {
  light: {
    backgroundColor: '#fff',
    fontColor: '#5d5d5d',
    activeTintColor: 'blue',
    inactiveTintColor: '#ccc',
  },
  dark: {
    backgroundColor: '#2A2A2A',
    fontColor: '#fff',
    activeTintColor: '#fff',
    inactiveTintColor: '#888',
  },
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: (Platform.OS === 'ios') ? ThemeConstants[colorScheme].backgroundColor : '#fff',
  },
});

export default styles;

Appearance.getColorScheme() で現在のiPhoneのダークモードが取得できる。返り値はlightやdarkが返ってくるのでそれを取得してstylesに適用する感じ。ここで注意したいのがAndroidではAppearanceが使えないのでそのまま実装するとエラーになってしまった。なのでPlatform.OSでOS別に処理を分ける必要がある。この辺りもそのうち何かしら改善されるかもしれないがとりあえずエラー避けの処理。

ただし、上記の処理だとダークモードのON・OFFをしてアプリに戻った時に即時反映がされないのが難点である。この辺は後々どうにかしたい。

React Navigationの場合

以下のReact Navigationの箇所だと以下のuseColorScheme()でダークモードが取得できる。

Themes · React Navigation

Navigators.js

import { AppearanceProvider, useColorScheme } from 'react-native-appearance';

export default () => {
  const theme = useColorScheme();

  return (
    <AppearanceProvider>
      <AppContainer theme={theme} />
    </AppearanceProvider>
  );
};

これはAppearanceProviderの効果なのかダークモードのON・OFFをしてアプリに戻った時に即時反映がされるのでとても便利。

まとめ

全体のページが即時反映されるようにするには、もっといい方法があるのかもしれないが、難しいことはできない。。現状はこのようにして何か閃き次第改善していこうと思う。いい方法あればぜひ教えていただけると助かります。ではでは。

Follow @ru88s