SafeAreaViewを使ってみる

androidのPixel3 XLで予定が保存できないというフィードバックあったので対応してみた

どんな状況だったか？

確認したら、こんな感じになってました

ステータスバーに被っていました。

「SafeAreaView」使っていたはずなのに。。。と思いドキュメントを読んだらiOSのみ対応でした。

facebook.github.io

対応策

stackoverflow.com

調べたら、単純にandoridの時は「paddingTop」すれば良いよとのことだったので、上記に記載のとおりに修正

■GlobalStyles.js:

import { StyleSheet, Platform } from 'react-native';
export default StyleSheet.create({
    droidSafeArea: {
        flex: 1,
        backgroundColor: npLBlue,
        paddingTop: Platform.OS === 'android' ? 25 : 0
    },
});

import GlobalStyles from "../../../GlobalStyles";

render() {
    return (
      <SafeAreaView style={GlobalStyles.droidSafeArea}>
          // 略）
      </SafeAreaView>
    );
  }
}

こんな感じになりました。

もうちょっと修正

ステータスバーの色が白いのでヘッダーに合わせました。

やり方は、こちらの通り

stackoverflow.com

■GlobalStyles.js:

import { StyleSheet, Platform } from "react-native";
export default StyleSheet.create({
  droidSafeArea: {
    paddingTop: Platform.OS === "android" ? 30 : 0
  }
});

import GlobalStyles from "../../../GlobalStyles";

render() {
    const kind = this.state.kind || KIND_DEFAULT;
    const config = KINDS[kind];
    const ss = s.schedule;
    const bc = Color(config.backgroundColor)
      .alpha(ss.borderColorAlpha)
      .toString();



    return (
      <>
        <SafeAreaView
          style={[GlobalStyles.droidSafeArea, { flex: 0, backgroundColor: bc }]}
        />
        <SafeAreaView style={{ flex: 1 }}>
          // 略）
      </SafeAreaView>
    );
  }
}

SafeAreaViewを2つにして、flex:0を指定している方にヘッダーと同じカラーを指定します。

そうしたら、こんな感じになりました。