Magicode logo
Magicode
2 min read

React NativeでYouTubeクローンを作る海外動画を2022年に動かすまで

https://cdn.apollon.ai/media/notebox/f11163d1-3394-45ca-9baa-91860ca3240a.jpeg

この記事はなにか?

YouTubeのクローンをReact Nativeで書くYouTube動画を見つけた。Let's Build the YouTube App with REACT NATIVE for Beginners
ビギナーがモチベを高めるためにとてもいいと感じたが、クローンして動かしてみると動かなかった。これを動かすまで数時間格闘したのでその軌跡をメモしておく。

前提、動作確認した環境

iOS15.5上で動かしたExpo Go(v2.24.3)
Node.js: v14.18.1
Yarn: v1.22.15
Expo CLI: 4.12.10

私の手元のExpo Go動かなかったところ

0. (React Nativeは関係ないが)aws-exports.jsを配置。

/src/aws-exports.jsを用意する。これは動画を参照されたい。

1. Expo SDKのバージョンとExpo Goのバージョンがあってない。

ソースコードのpackage.jsonを見ると "expo": "~41.0.1",となっているが、2022年7月現在Expo Goで動かせるのはExpo SDK 43以上のようだ。

2. PickerがReact Nativeからなくなったとのエラーが出る。

結論この解決策はaws-amplify-react-nativeのバージョンを上げる。 5.0.2だったのをaws-amplify-react-native@6.0.1に上げると動いた。
React Nativeは、バージョンが上がるにしたがって、おおもとのReactNativeライブラリから子機能を別ライブラリに切り出していっている。aws-amplify-react-nativeは古いライブラリとの依存関係があり、これが原因のようだ。

3. なぜか動かない。

Missing package "metro/src/lib/attachWebsocketServer"」というエラーが出てなぜか動かない、、。 これは解決策わからず、node_modulesをディレクトリごと削除したり、yarn.lockを削除(キケン!)したりしてからyarn installexpo start --tunnel

React Nativeのツラミ

なーんかバージョン地獄になる、。React Nativeのツラミなのか、モバイルのツラミなのか?Flutterとか触ってみたい。

Discussion

コメントにはログインが必要です。