【React Native】SafeAreaViewの色を上と下で違う色にする２つの方法

初めに

どうも最近React Nativeでアプリを開発しているニーザです。
今日は、React NativeのSafeAreaViewのちょっとした技を紹介したいと思います。
おそらくiPhoneアプリを開発する上で、このように上の部分だけに色をつけてheaderとして、それ以外は違う色にしたい時がきっとありますよね？
通常何もせずにコンテンツをSafeAreaViewでラップするとこの様になってしまうと思います。

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';

type Props = {};

export default class App extends Component<Props> {
  render() {
    return (
      <SafeAreaView style={styles.safeAreaView}>
        <View style={styles.container}>
          <Text>ほげほげ</Text>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    backgroundColor: '#1e90ff'
  },
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
});

この下の部分だけを白くするには２つ方法があります。

やり方1

下の部分にposition: absoluteを指定して隠す。

ステップ1. Viewを一つ、SafeAreaviewコンポーネントの子要素として作る。

App.js

export default class App extends Component<Props> {
  render() {
    return (
      <SafeAreaView style={styles.safeAreaView}>
        <View style={styles.container}>
          <Text>ほげほげ</Text>
        </View>
        <View style={styles.fixBottomColor} />
      </SafeAreaView>
    );
  }
}

ステップ2. 次のスタイルを指定する。

fixBottomColor: {
  backgroundColor: '#fff',
  position: 'absolute',
  bottom: 0,
  right: 0,
  left: 0,
  height: 100,
  zIndex: -10,
}

backgroundColorはcotainerと同じ色を指定しましょう！
これで完成です👏

これから追加したいコンポーネントと干渉を避けるために、z-indexに100を指定していますが、特には必要なくても隠せます。
簡単に実装できますが、追加したいコンポーネントと干渉するかもしれないところが少し傷ですね。

やり方2

SafeAreaViewを２つ作る。

ステップ1.外側をwrapするViewコンポーネントを用意する。

App.js

<View style={styles.outWrapper}>
  <SafeAreaView style={styles.safeAreaWrapper}>
    <View style={styles.container}>
      <Text>ほげほげ</Text>
    </View>
  </SafeAreaView>
</View>

ステップ2.SafeAreaViewをもう一つ作る。

App.js

<View style={styles.outWrapper}>
  <SafeAreaView style={styles.topSafeArea} />
  <SafeAreaView style={styles.safeAreaWrapper}>
    <View style={styles.container}>
      <Text>ほげほげ</Text>
    </View>
  </SafeAreaView>
</View>

ステップ3.Styleをそれぞれに当てる。

outWrapper: {
  flex: 1
},
topSafeArea: {
  backgroundColor: '#1e90ff'
},
safeAreaWrapper: {
  flex: 1,
  backgroundColor: '#fff'
},
container: {
  flex: 1,
  backgroundColor: '#fff'
},

表示したいコンポーネントをラップしているSafeAreaViewのスタイルに、cotainerと同じ色を指定しましょう！
これで完成です👏
このやり方は１番外側を更にラップしたり、SafeAreaを作ったりと手順が多く大変です。
ただ干渉する心配がないところがやり方1と比較して良いですね！

完成形

終わりに

SafeAreaViewの色を上と下で違う色にする２つの方法を紹介しました。
どちらのやり方もメリットもデメリットもあるので甲乙つけがたいですね。
もっといいやり方を知っている場合は是非コメントで教えてください👍