NativeBaseを導入しようとしたら、無限に怒られた

怒られるまでの流れ

MicrosoftのReactNativeをTypeScriptでやっていくリポジトリをクローンして、とりあえず動いた〜〜〜と喜んでいた
- Microsoft/TypeScript-React-Native-Starter: A starter template for TypeScript and React Native with a detailed README describing how to use the two together.
- (その前に、tscし忘れてて、動かないんですけど！！！！！とブチ切れていたのは秘密)
その後、NativeBaseというUIライブラリを入れてみた
- GeekyAnts/NativeBase: Essential cross-platform UI components for React Native
で、導入して、つけてみたら、以下のエラーが何をやっても出てきていた

error: bundling: UnableToResolveError: Unable to resolve module `AccessibilityInfo` from `/Users/symmt/Program/Study/ReactNative/Molpe/node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module does not exist in the module map or in these directories:
  /Users/symmt/Program/Study/ReactNative/Molpe/node_modules/react-native/node_modules
,   /Users/symmt/Program/Study/ReactNative/Molpe/node_modules
,   /Users/symmt/node_modules

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.
    at ResolutionRequest._resolveNodeDependency (/Users/symmt/Program/Study/ReactNative/Molpe/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:394:11)
    at tryResolveSync (/Users/symmt/Program/Study/ReactNative/Molpe/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:136:20)
    at tryResolveSync (/Users/symmt/Program/Study/ReactNative/Molpe/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:66:12)
    at ResolutionRequest.resolveDependency (/Users/symmt/Program/Study/ReactNative/Molpe/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:134:22)
    at dependencyNames.map.name (/Users/symmt/Program/Study/ReactNative/Molpe/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:145:59)
    at Array.map (<anonymous>)
    at ResolutionRequest.resolveModuleDependencies (/Users/symmt/Program/Study/ReactNative/Molpe/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:145:42)
    at module.read.then (/Users/symmt/Program/Study/ReactNative/Molpe/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:172:40)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

解決策

以下、動くようになるまで調べたりやったことのまとめ

ReactNativeのバージョンとNativeBaseのバージョンがあっているかを確認

NativeBaseのリポジトリに、ReactNativeのバージョンとそれに対応するNativeBaseのバージョンが書いてあるので、合致しているか確認

GeekyAnts/NativeBase: Essential cross-platform UI components for React Native

この時点で、自分の環境が以下のようになっていることに気付く

ReactNative: 0.44.0
NativeBase: 2.3.2

NativeBaseの2.3.+では、ReactNativeの0.46.0以上を使ってね！！と書いてあった ReactNativeのバージョンが低いやん...！となり、以下の感じでReactNativeのバージョンを更新した

$ yarn upgrade react-native@^0.48.0

またられる

今度は、undefined is not an object (evaluating 'ReactInternals.ReactCurrentOwner')と怒られた

ファーーーーーーとなりながら、ggったところ、以下のIssueを見つけた

undefined is not an object (evaluating 'ReactInternals.ReactCurrentOwner') · Issue #13874 · facebook/react-native

@winterrain5 As I mentioned, make sure you've installed the correct version of React. If you're using React Native 0.45:

yarn add react@16.0.0-alpha.12

undefined is not an object (evaluating 'ReactInternals.ReactCurrentOwner') · Issue #13874 · facebook/react-native

なるほど？そのまま、reactを更新したところ、動きましたとさ。

なお、この記事を書いた段階だと、NativeBaseがreact@16.0.0-alpha.13をサポートしていないと書いていたので、注意。

f:id:symmt9302:20170930164239p:plain