【react-native】最新のreact-nativeでreact-native-navbarを使うと初回仕様時に警告が起きる

開発環境↓

react-native-cli: 2.0.1
react-native: 0.63.2
npm: 6.13.0

使用ライブラリ↓

react-native-router-flex
react-native-navBor

react-nativeにはナビゲーションバーを自由にカスタマイズできるreact-native-navbarというライブラリが

あります。このライブラリは、オリジナルのナビゲーションバー作成後以下のようにコンポーネントに組み込むだけで

ナビゲーションバーとコンポーネントが一緒になったページを作ることができます。

import React from ‘react’;
import { View, StyleSheet} from ‘react-native’;
import Icon from ‘react-native-vector-icons/FontAwesome’;
import NavigationBar from ‘react-native-navbar’;
import { Actions } from ‘react-native-router-flux’;
const rightButtonConfig = {
  title: ‘Save’,
  tintColor: ‘blue’,
  handler: () => console.log(‘Saved’),
};

const titleConfig = {
  title: ‘Home’,
};

const MainNavigationBar = (props) => {
  return (
    <View>
      <NavigationBar
        title={titleConfig}
        rightButton={rightButtonConfig}
        leftButton={
         <Icon name=”home” size={30} onPress={() => Actions.pop()} />
        }
        style={styles.container}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
  backgroundColor: ‘#ADD8E6’,
  },
});
export default MainNavigationBar;

screen↓

render(

  return {

    <view>

      <MainNavigationBar/>

    </view>

  }

)

コンポーネントに差し込むだけで動作する便利なライブラリですが最新のreact-nativeとどうも相性が悪いのかコンポーネント作成後

謎の警告が必ず一回だけ表示されます。

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See … for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you’re updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: ***
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

という警告が出てきます。

訳↓

componentWillReceivePropsは古いのでなるべく使うのは避けてください。

UNSAFE_componentWillReceivePropsを使うことで警告を消すことができます

今書いているコードではcomponentWillReceivePropsは

使っていないので怪しいとしたらnode_modules内のreact-native-navbar

のファイル辺りか。

という訳でreact-native-navbarの中のファイルにcomponentWillReceivePropsに該当するコードを探してみたのですが

見つかりませんでした。

react-nativeのバージョンを下げることで表示されなくなる可能性もありますが

本番環境ではこれが出現することなく動作するので無理に削除しなくても良いとのことです。デモアプリをプレゼンターしたかったりデバッグ中煩わしい

と感じる場合はreact-native-router-flexのプロパティnavbarを使うことを

おすすめします。

こちらはreactのコンポーネントを引数として持ちます。

<Scene key="main" component={main} title="main" navBar={MainNavigationBar}/>

コンポーネントは以下のように適当に画像ボタンを作成。

<View style={styles.container}>

<StatusBar />

<View style= {styles.rowsComponent}> 

<TouchableWithoutFeedback onPress={() => Actions.pop()}>

  <Image source={require(‘../../../assets/baketu.png’)}style={styles.backarrowStyle} />

</TouchableWithoutFeedback>

 </View>

</View>

簡単な実装はこれだけ。どちらもreact-routerを使ったことがあるならさくさく実装できそうです。

警告抜きに考えて書きやすいほうを選んでくださいね。

P.S.仕事ではreact-nativeは全く触らないので、空いた時間にreact-nativeを

いじってやると気分転換になってちょうどいい。