react-native componentWillUpdate, componentWillReceiveProps - Warning

Question

react-native (componentWillUpdate, componentWillReceiveProps)

swipe function app.

• Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.

• Warning: componentWillUpdate is deprecated and will be removed in the next major version. Use componentDidUpdate instead. As a temporary workaround, you can rename to UNSAFE_componentWillUpdate.

The YellowBox.ignoreWarnings method is not necessary.

I'll ask you to update the code.

How should I solve it?

//git component
const renderPagination = (index, total, context) => {

  return (
    <View style={styles.paginationStyle}>
      <Text style={{ color: 'grey' }}>
        <Text style={styles.paginationText}>{index + 1}</Text>/{total}
      </Text>
    </View>
  )
}

export default class App extends Component {

  constructor(props) {

    super(props);

    this.onPressNext = this.onPressNext.bind(this);
    this.onPressPrev = this.onPressPrev.bind(this);

    this.state = {
      indexPage: 0
    }
  }


  onPressPrev = () => {

    const { indexPage } = this.state;

    if (indexPage > 0) {
      this.refs.swiper.scrollBy(-1);
    }
  }

  onPressNext = () => {

    const { indexPage } = this.state;

    if (indexPage < 4) {
      this.refs.swiper.scrollBy(1);
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{flex:0.1, backgroundColor: 'green'}}>
          <Text>NAVTEX</Text>
        </View>

        {/* {git component} */}
        <Swiper
          style={styles.wrapper}
          onIndexChanged={indexPage => this.setState({ indexPage })}
          renderPagination={renderPagination}
          showsButtons={false}
          loop={false}
          ref={'swiper'}
        >

          <View style={styles.slide}>
            <Text style={styles.text}>2</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>2</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>3</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>4</Text>
          </View>
          <View style={styles.slide}>
            <Text style={styles.text}>5</Text>
          </View>
        </Swiper>

        <View style={styles.buttoncontainer}>
          <Button
            style={{with:75}}
            onPress={this.onPressPrev}
            title="Previous">
          </Button>
          <Button
            onPress={this.onPressNext}
            title="Next">
          </Button>
        </View>
      </View>
    );
  }
}

Answer 1

I can not seem to comment yet so I will just leave this answer here. I had the same problem. As you mentioned on the comments of hongs answer, you have not used componentWillUpdate and componentWillReceiveProps but one of the modules you installed maybe using them. In my case it was react-moment or momentjs which was using componentWillUpdate. Also as mentioned above, it will be removed from react-native in the next upcoming major update so it is highly recommended to use the alternatives.

Alternatively you could disable the warn boxes. But this is not recommended to do so on development environment. If you want you could disable warns by putting this console.disableYellowBox = true; in your root component.

And as a side note, please move all your styles on to the stylesheet and not inline styling as later on this will become a hassle to change again.

Happy Coding :)

Update: As you have mentioned you use react-native-swiper and surely enough it does use both componentWillReceiveProps and componentWillUpdate. As seen here.

on line 199: componentWillReceiveProps(nextProps) on line 217: componentWillUpdate(nextProps, nextState)

And yes there is nothing wrong with your code as long as you don't use those methods. Please use the updated methods. And as for react-native-swiper, the devs will probably update it before the removal on the next major update so you can do an npm update on the next major release and check.

Answer 2

The warning is not being caused by your code. It's being caused by the react-native-swiper library. I looked at their code on GitHub and in the src/index.js file on line 199, they invoke componentWillReceiveProps(). It's not something you need to worry about and is the responsibility of the library maintainer.

Screenshot of search on GitHub