ペペロミア開発ブログ

React Nativeで開発しているアプリ「ペペロミア」の技術系記事を投稿してます

react-responsiveを使ってiPadの対応をする

アプリの審査で2回連続、iPad周りのレイアウトで落とされてたので、その辺の対応しました。

f:id:wheatandcat:20200222084957p:plain

対応にはreact-responsiveを使用

github.com

Expoで使用する場合は以下を参照

blog.expo.io

react-responsiveを使うとReact NativeでもMediaQueryっぽい判定が使用できるようになります

■ src/components/organisms/Calendars/DayText.tsx

import React from 'react';
import { Text, View, Dimensions, StyleSheet } from 'react-native';
import '@expo/match-media';
import { useMediaQuery } from 'react-responsive';
import Color from 'color';
import theme from '../../../config/theme';

const width = Dimensions.get('window').width;

type Props = {
  color: string;
  day: number;
};

export default (props: Props) => {
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 }); // ← ここで判定してstyleを変更

  return (
    <View>
      <Text style={isTablet ? styles.dayTextForWide : styles.dayText}>
        {props.day}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  dayText: {
    textAlign: 'center',
    color: theme().color.gray,
    fontSize: 18,
    fontWeight: '600',
  },
  dayTextForWide: {
    textAlign: 'center',
    color: theme().color.gray,
    fontSize: 26,
    fontWeight: '600',
  },
});

こんな感じでタブレット系でレイアウトで崩れていた箇所を直して行きます

pull request ①

https://github.com/wheatandcat/Peperomia/pull/457/files

修正前(iPadでの表示)

修正後

これで↑の修正後に審査に出して、またレイアウトが崩れていると落とされて、 送られてきたスクリーンショットがこちら

f:id:wheatandcat:20200222092233p:plain:w250

iPad Proで確認した時は問題なかったが、どうやらiPad Airで確認したときにボトムタブのタイトルが切れていました。

pull request ②

https://github.com/wheatandcat/Peperomia/pull/464

タブレット時のボトムタブのheightを修正して、こんな感じになりました

修正前

修正後

現在、これで申請中。今度こそ通ってほしい