react-nativeをver0.57.8へアップグレードしたメモ

[AutoScale Advent Calendar 2018](https://qiita.com/advent-calendar/2018/auto-scale) 10日目の記事です。
AutoScaleではスマートで効率的な Twitter アカウント運用ツール[SocialDog](https://web.social-dog.net)の開発運用をしています[t0m0120](https://twitter.com/t0m0120)です。最近ガンダムNTを見てきました。react-narrative。


0.55.4で開発していた際に

- 英語と日本語で文字のlineheightがズレる
- 日本語変換が通常で出来ない
- Xcode10で普通にビルド出来ない

等を解決したいためにアップデートしたのでメモ
[CHANGELOG.md](https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#updating-to-this-version)通りですんなりいけたので過去のverupより滅茶苦茶楽でした。

## react-nativeのupdate

### package.jsonのreactとreact-nativeのversionを変更する。

```
"react": "^16.3.2",
"react-native": "0.55.4",
```
↓

```
"react": "^16.5.0",
"react-native": "0.57.8",
```
↓

```
$ yarn
```

### .babelrcへmetro-react-native-babel-presetを追加する

.babelrc

```
  {
    "presets": ["module:metro-react-native-babel-preset"]
  }
```

### babel-upgradeをインストールしbabelをupdateする

[babel-upgrade](https://github.com/babel/babel-upgrade)をインストールしbabel周りのアップデートをかける

```
$ npm i -g babel-upgrade
$ babel-upgrade --write
```

↓

```
$ yarn
$ cd ./ios
$ bundle exec pod install
```


## package各種

ビルドまでは上記で問題なく通ったのでpackageやjsの書き方でのエラー修正

### native-baseのerror
```
error: bundling failed: Error: Unable to resolve module `react-native/Libraries/Renderer/shims/ReactNativePropRegistry` from `/Users/native/node_modules/native-base/dist/src/utils/computeProps.js`: Module `react-native/Libraries/Renderer/shims/ReactNativePropRegistry` does not exist in the Haste module map
```

native-baseを最新版にupdateして解決

### react-native-highchartsが表示されない

```js
<ChartView
  style={{flex: 1}}
  config={config}
  options={options}
  stock={true}
  originWhitelist={['']} // add!!
/>
```

[Highchart 1.0.2 doesn't rendering in react-native 0.56.0 · Issue #83 · TradingPal/react-native-highcharts · GitHub](https://github.com/TradingPal/react-native-highcharts/issues/83#issuecomment-404382535)

### JSON value 'auto34' of type NSString cannot be converted to a YGValue. Did you forget the % or pt suffix?

上記エラーが出る

原因はNativeBaseのHeaderとFooterのstyleへ`height:auto`を渡していた為に起きるようなのでheader/footerから高さを消すかheaderとfooterを自前の<View>に変更して解決。


### Invariant Violation: Nesting of <View> within <Text> is not currently supported.

不変違反：<Text>内の<View>のネストは現在サポートされていません。
[https://github.com/facebook/react-native/issues/22569](https://t.co/rBUwV9mwVX)
Textの中にView使えなくなっていた為修正。

```jsx
<Text>
  text render
  <View />
</Text>
```

### キーボード入力が2回打たないと反応しなくなる

過去Verで日本語変換ができなくなるバグ対策のコードが邪魔しているようだったので変換対策のコードを削除

```js
  shouldComponentUpdate(nextProps: Props) {
    if (is_android()) {
      return true;
    }
    const { value } = this.props;
    return nextProps.value === '' || value === nextProps.value;
  }

```


### NativeBase のIconコンポーネントが別のアイコンを表示する

[GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.](https://github.com/oblador/react-native-vector-icons)

NativeBaseと同じ6.1.0にreact-native-vector-iconsをアップデート

package.json

```
react-native-vector-icons: '6.1.0'
```

```shell
$ react-native unlink react-native-vector-icons
$ yarn
$ react-native link
```

## 


以上で一通り動く様になりアップデート出来ました。
個人的にReactでもNativeでもUIComponent集が好きではなくてversion upの度に変更追いかけたりする手間が増えるので暇見てNativeBaseはプロジェクトから消して自前のに置き換えていこうと思っています。