Edited at
AutoScaleDay 10

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

AutoScale Advent Calendar 2018 10日目の記事です。

AutoScaleではスマートで効率的な Twitter アカウント運用ツールSocialDogの開発運用をしていますt0m0120です。最近ガンダムNTを見てきました。react-narrative。

0.55.4で開発していた際に


  • 英語と日本語で文字のlineheightがズレる

  • 日本語変換が通常で出来ない

  • Xcode10で普通にビルド出来ない

等を解決したいためにアップデートしたのでメモ

CHANGELOG.md通りですんなりいけたので過去の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をインストールし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が表示されない

<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


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を自前のに変更して解決。


Invariant Violation: Nesting of within is not currently supported.

不変違反:内ののネストは現在サポートされていません。

https://github.com/facebook/react-native/issues/22569

Textの中にView使えなくなっていた為修正。

<Text>

text render
<View />
</Text>


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

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

  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.

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

package.json

react-native-vector-icons: '6.1.0'

$ react-native unlink react-native-vector-icons

$ yarn
$ react-native link

以上で一通り動く様になりアップデート出来ました。

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