leecade / leecade/react-native-swiper
React native 0.60.4 componentWillReceiveProps componentWillUpdate Remove
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
Which OS ?
macOS Mojave 10.14.6
Version
Which versions are you using:
- react-native-swiper ^1.5.14
- react-native 0.60.4
Actual behaviour
I wrote an example:
import React, { Component } from "react";
import {
Text,
View,
Image,
Dimensions
} from "react-native";
import Swiper from 'react-native-swiper'
const { width } = Dimensions.get('window');
class IndexScreen extends Component {
constructor (props) {
super(props);
this.state = {
imgList: [
'https://img04.sogoucdn.com/app/a/100520021/3ea2745207ce5c390280e5d5245451e9',
'https://img01.sogoucdn.com/app/a/100520021/8e6ef3612bee7623f5d42e2e88c7b4cb',
'https://img04.sogoucdn.com/app/a/100520021/26dffdc1ba9adcd3a0bfdb8728f22b9f',
'https://img04.sogoucdn.com/app/a/100520021/3d23c68fbbcf51e9e297f505e33cdf5e'
],
};
}
render() {
return (
<View style={{flex: 1}}>
<Swiper loadMinimal loadMinimalSize={1} style={styles.wrapper} loop={true}>
{
this.state.imgList.map((item, i) => {
return <Image key={i} style={styles.image} source={{uri: item}} />
})
}
</Swiper>
<View>
<Text>asd</Text>
</View>
</View>
);
}
}
const styles = {
wrapper: {
height: 200,
},
slide: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'transparent'
},
image: {
width: width,
flex: 1,
backgroundColor: 'transparent'
},
};
export default IndexScreen;
It reported me two warnings
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.
I am sure that my code does not use the two lifecycle functions that react is about to remove, but I don't know how it should be fixed.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the lifecycle methods used by the Swiper component and reproduce the warnings with React Native 0.60.4 using the example in the issue. Determine which component triggers the warnings and verify that the warnings are gone while the image swiper still works as shown.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100