ComponentWillMount warning

John Wilkinson picture John Wilkinson · Mar 7, 2018 · Viewed 7.6k times · Source

I am creating a layout with inside. I am getting to this scene from another. So at the beginning another layout is rendered. After i go to the second scene (with TextInput tag) i obtain warnings such as:

componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount. Please update the following components: App, Container, Image, Text< TouchableOpacity, Transitioner, View.

This is very strange, because I am not using componentWillMount method, so i guess that it is implicitly called.

This is the code of the component with

 class MainTopBarAfterSearch extends Component {
constructor() {
    super();
    this.state = { text: " " };
}

render() {
    const { topBarContainer, imageStyle, textInputStyle } = styles;
    return (
        <View style={topBarContainer}>
            <TouchableOpacity onPress={() => Actions.menu()}>
                <Image
                    source={require("../../../resources/menuWhite.png")}
                />
            </TouchableOpacity>
            <TextInput
                style={textInputStyle}
                placeholder="Begin to search"
                value={this.state.text}
                onChangeText={text => this.setState({ text })}
            />
            <Image source={require("../../../resources/filter.png")} />
        </View>
    );
}
}

Answer

syam s picture syam s · Mar 8, 2018

Yes, because the componentWillMount and componentWillReceiveProps getting deprecated soon in React. I suggest you to use componentDidMount instead of componentWillMount.

But you will still get those yellow box warnings because react-native is still using those for the internal components like Image, TouchableOpacity and a lot of other components. We need to wait for a new update to get rid of those warnings. Don't worry, Happy coding.