Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warning: componentWillRecieveProps is deprecated

See original GitHub issue

Getting a warning:

componentWillRecieveProps is deprecated and will be removed in the next major version use Static getDerivedStatefromProps instead

Is anyone else getting this error?

Code:

import React, { Component } from "react";
import { View, Text, TouchableOpacity, Button } from "react-native";
import { tabStyles } from "../../stylesheet/basicStyles";
import buttonText from '../../assests/res/strings'
import Modal from "react-native-modal";
import modalString from '../../assests/res/strings'

       
class ButtonsComponent extends Component {

  state = {
    visibleModalId: null,
  };

    renderModalContentOne = () => (
      <View style={tabStyles.content}>
        <Text style={tabStyles.contentTitle}>{modalString.modalText.modalOne}</Text>
        <Button
          onPress={() => this.setState({ visibleModal: null })}
          style = {tabStyles.modalButtonStyle}
          title="Close"
        />
      </View>
    );

    renderModalContentTwo = () => (
      <View style={tabStyles.content}>
        <Text style={tabStyles.contentTitle}>{modalString.modalText.modalTwo}</Text>
        <Button
          onPress={() => this.setState({ visibleModal: null })}
          style = {tabStyles.modalButtonStyle}
          title="Close"
        />
      </View>
    );

    renderModalContentThree = () => (
      <View style={tabStyles.content}>
        <Text style={tabStyles.contentTitle}>{modalString.modalText.modalThree}</Text>
        <Button
          onPress={() => this.setState({ visibleModal: null })}
          style = {tabStyles.modalButtonStyle}
          title="Close"
        />
      </View>
    );

    renderModalContentFour = () => (
      <View style={tabStyles.content}>
        <Text style={tabStyles.contentTitle}>{modalString.modalText.modalFour}</Text>
        <Button
          onPress={() => this.setState({ visibleModal: null })}
          style = {tabStyles.modalButtonStyle}
          title="Close"
        />
      </View>
    );
  render() {
      return (
        <View style={tabStyles.buttonView}>
              <TouchableOpacity onPress={() => this.setState({ visibleModal: 'buttonOne' })} >
              <View style={tabStyles.button}>
                <Text  style={tabStyles.buttonText}>{buttonText.homeText.buttonOne}</Text>
              </View>
              </TouchableOpacity>
        
              <TouchableOpacity onPress={() => this.setState({ visibleModal: 'buttonTwo' })}>
              <View style={tabStyles.button}>
                <Text  style={tabStyles.buttonText}>{buttonText.homeText.buttonTwo}</Text>
              </View>
              </TouchableOpacity>

              <TouchableOpacity onPress={() => this.setState({ visibleModal: 'buttonThree' })}>
              <View style={tabStyles.button}>
                <Text  style={tabStyles.buttonText}>{buttonText.homeText.buttonThree}</Text>
              </View>
              </TouchableOpacity>
          
              <TouchableOpacity onPress={() => this.setState({ visibleModal: 'buttonFour' })}>
              <View style={tabStyles.button}>
                <Text  style={tabStyles.buttonText}>{buttonText.homeText.buttonFour}</Text>
              </View>
              </TouchableOpacity>

              <Modal isVisible={this.state.visibleModal === 'buttonOne'}>
                {this.renderModalContentOne()}
              </Modal>
              <Modal isVisible={this.state.visibleModal === 'buttonTwo'}>
                {this.renderModalContentTwo()}
              </Modal>
              <Modal isVisible={this.state.visibleModal === 'buttonThree'}>
                {this.renderModalContentThree()}
              </Modal>
              <Modal isVisible={this.state.visibleModal === 'buttonFour'}>
                {this.renderModalContentFour()}
              </Modal>
        </View>
        )
    }
}

export default ButtonsComponent;

Issue Analytics

State:
Created 4 years ago
Comments:14 (5 by maintainers)

Top GitHub Comments

2reactions

Christop406commented, Aug 31, 2019

This is being fixed with an open PR: https://github.com/oblador/react-native-animatable/pull/280

1reaction

roy-lawcommented, Aug 4, 2019

Same here. I got this. The warning seems from the “withAnimatable”

Top Results From Across the Web

Warning: componentWillRecieveProps is deprecated #299

Getting a warning: componentWillRecieveProps is deprecated and will be removed in the next major version use Static getDerivedStatefromProps ...

reactjs - why is componentWillReceiveProps deprecated?

Thus, componentWillReceiveProps is being deprecated in favor of the following reason: Use getDerivedStateFromProps; Or, use componentDidUpdate.

React17, or how to get rid of “componentWillReceiveProps”?

As you may already know, with the release of React 16.3, some of legacy lifecycles were deprecated. One of the biggest lessons we've...

React: componentWillMount to be deprecated! - Northcoders

A significant change in React v16.3.0 is the deprecation of several methods. These are: componentWillMount. componentWillRecieveProps. componentWillUpdate.

Warning componentwillmount is Deprecated and will be ...

Warning componentwillmount is Deprecated and will be Removed in the Next Major Version in React Native Solved.The above lifecycle methods ...