PIYO - Tech & Life -

社内用アプリのReact Nativeを0.58にアップグレード

ReactNative

RNアプリを0.50.3から0.58.3に一気に上げました。

案外苦労しませんでしたが、ちょっとだけ困ったのでメモ。

TypeError: undefined is not a function (near ‘…addListener…')

react-navigationが古すぎました。もともと1.0.0-beta2を使っていたんですが、最新バージョンはなんと3.x系。Navigation周りはさすがにアプリ全体への影響が大きく簡単には変えられないなと思い、一旦1.x系の最新までアップグレードしました。

そのときに出たのが、TypeError: undefined is not a function (near '...addListener...') のエラーです。

react-navigationのRedux連携の実装が変わっているらしく、react-navigation-redux-helpersというのを入れる必要がありました。

+import {
+  createReduxBoundAddListener,
+  createReactNavigationReduxMiddleware,
+} from 'react-navigation-redux-helpers';
+
 import RootNavigator from './RootNavigator';

+const middleware = createReactNavigationReduxMiddleware(
+  "root",
+  state => state.Nav,
+);
+const addListener = createReduxBoundAddListener("root");
+
 class Navigator extends Component {
   render() {
     return (
       <RootNavigator
         navigation={addNavigationHelpers({
           dispatch: this.props.dispatch,
           state: this.props.Nav,
+          addListener
         })}
     />
   );

中でaddListenerってのが必要になってるから渡さないといけないんですねー。詳細は正直よくわかってないし、最新バージョンではまた変わっていそう。

別アプリ作って試すしかないかなって感じです。

Error: Duplicate resources :app:mergeReleaseResources FAILED

Androidでビルドエラーが出ました。同名のアイコンが存在しててダメだよってエラーのようです。

過去のバージョンではアプリケーション側のディレクトリにnode_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.pngみたいな名前の画像ファイルが入っていました。新しくなったバージョンではライブラリ側から読み込まれるようなのでアプリ側のアイコンは不要です。

↓これ系のファイルを全部消せばビルドはOKとなりました。

android/app/src/main/res/drawable-hdpi/node_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.png