I am learning React Native now and recently I received the log message below.
Warning: 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.
I am doing this tutorial "React Native Tutorial: Building Android Apps with JavaScript" https://www.raywenderlich.com/178012/react-native-tutorial-building-android-apps-javascript
What should I do to remove the message?
I installed react-native-cli and did react-native init projectName. I changed package.json. I changed "react": "^16.3.0-alpha.1" to "^16.2.0" and then I did npm install.
My package.json
{ "name": "PropertyFinder", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "^16.2.0", "react-native": "0.54.0", "react-navigation": "^1.3.0" }, "devDependencies": { "babel-jest": "22.4.1", "babel-preset-react-native": "4.0.0", "jest": "22.4.2", "react-test-renderer": "^16.2.0" }, "jest": { "preset": "react-native" } }
But still show that warning.
SearchPage.js
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
Button,
ActivityIndicator,
Image
} from 'react-native';
// import { StackNavigator } from 'react-navigation';
export default class SearchPage extends Component<{}> {
static navigationOptions = {
title: 'Property Finder',
};
constructor(props) {
super(props);
this.state = {
searchString: 'london'
};
}
_onSearchTextChanged = (event) => {
console.log('_onSearchTextChanged');
this.setState({
searchString: event.nativeEvent.text
});
console.log('Current: ' + this.state.searchString + ', Next: ' + event.nativeEvent.text);
}
render() {
console.log('SearchPage render');
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name or postcode.
</Text>
<View style={styles.flowRight}>
<TextInput
underlineColorAndroid={'transparent'}
style={styles.searchInput}
value={this.state.searchString}
onChange={this._onSearchTextChanged}
placeholder='Search via name or postcode' />
<Button
onPress={() => {}}
color='#48bbec'
title='Go'
/>
</View>
<Image source={require('./Resources/house.png')} style={styles.image} />
</View>
);
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginBottom: 20,
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
flowRight: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch',
},
searchInput: {
height: 36,
padding: 4,
marginRight: 5,
flexGrow: 1,
fontSize: 18,
borderWidth: 1,
borderColor: '#48bbec',
borderRadius: 8,
color: '#48bbec',
},
image: {
width: 217,
height: 138,
},
});
App.js
'use strict';
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import SearchPage from './SearchPage';
// type Props = {};
const App = StackNavigator({
Home: {
screen: SearchPage,
},
});
export default App;
My English is not good, Sorry.
