ReactNative for Web（Expo web）でアプリリリースしてみた

始めまして。私は、Interchaoという英語学習アプリを作成しています。このアプリはReact Nativeで作成しており、AndroidとIOSの両方をリリースしております。

Interchaoには「日記を書く」という機能があるので、やはりスマホアプリだけでは辛いということで、Web化に踏み切りました。

先日無事リリースができたので、変更点を中心にまとめていきます。

環境

Expo 37
react navigation version 4

Sentry

sentry-expoはWebだと使えません。@sentry/browserをインストーして使いましょう。

Modal

react-native-modalは使えません。modal-enhanced-react-native-webを代わりに使いました。

SwipeablePanel

rn-swipeable-panelのversion1.0.20だと動きませんでした。1.2.0にあげたら動くようになりました。

Alert

react nativeのAlertはWebでは使えません。私は全てmodal-enhanced-react-native-webで書き直しました。

TextInput

TextInputは色々厄介でした。

①autoが使えない

web + スマホだとautoが指定できません。

②heightの自動調整ができない

multilineの時、ネイティブアプリだと自動でTextInputの高さを調整してくれるのですが、webではTextInputが大きくなりません。style={{height: 100}}のように、heightを数字で直接指定ればいけるのですが、可変のところはこれでは厳しい。
そんな時は下記コードでいけます。

const [scrollHeight, setScrollHeight] = useState(null);
const handleFocus = (e: any): void => {
    setScrollHeight(e.target.scrollHeight);
  };
const handleChange = (e: any): void => {
    setScrollHeight(e.target.scrollHeight);
  };

<TextInput
    ...中略
    style={[styles.textInput, { height: scrollHeight }]}
    onFocus={handleFocus}
    onChange={handleChange}
/>

③onEndEditingが使えない

onEndEditingの挙動がおかしかったです。onBlurに全て書き換えました。

Updates

OTAアップデートは、できません（当たり前ですが。笑）
ここはif文で飛ばしましょう。

Share

Shareが使えません。InterchaoではTwitterとFacebookにシェアする機能を実装したい。なので、Shareライブラリは諦めて、直接作りました。

Amplitude

Amplitudeが使えませんでした。これは諦めました。

デザイン関連

スマホ、PC、Web、Android、Iosそれぞれにおいてデザインを作り分けなければいけません。
作りたいのは下記４つ。

①Web & PC
②Web & スマホ（タブレット）
③Nativeアプリ & Android
④Nativeアプリ & iOS

既に③④はできているので、今回新たに①と②を対応しました。
①は新デザインにしました。②はスマホアプリと全く同じデザインにしました。

WebとPCでファイルごと書き換える方法

AAA.native.tsx
AAA.web.tsx

ファイル内で細かく分ける時

Webかどうかのジャッチ（①または②）は下記でできます。
Platform.OS === "web"

①or②のジャッチはreact-responsiveを使います。ソースはこれでいけます。

const isTabletOrMobileDevice = useMediaQuery({
   maxDeviceWidth: 1224,
});

Tab

一番大きな変更はタブの構成。createBottomTabNavigatorをIntechaoでは使っています。

スマホの時は下に

が、PCの時は横によせています。

これはcreateBottomTabNavigatorの変数をいじる。みたい簡単なものじゃできませんでした。なんかできそうなのに。。。

詳細はここ参考にして作りました。有料サイトですが、自分でこの方法思いつくよりはみた方がいいかと。
https://medium.com/@bruno.eduardo.do/creating-a-custom-side-tab-navigator-with-react-navigation-28304b83e865

まとめ

トータルで丸7日でInterchaoはWeb化できました。全画面試験しなすので、規模が大きいアプリだと結構大変かと思います。ただ、Reactで全部作り直すよりは圧倒的に早いです。

React Native for webはとにかく情報が少ないので、これから積極的にブログ書いていこうと思います！！

ここから必要な作業は、
・metaタグ書く
・next.js化する（必須ではないが私はやる）
・pathを設定していく

ここについてはこれからやっていくので、終わり次第まとめていきます。

作ったサイトはこちらです。
https://interchao.app/