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>
);
}
}
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.
