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

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

対応にはreact-responsiveを使用

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',
  },
});

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