leecade / leecade/react-native-swiper

React native 0.60.4 componentWillReceiveProps componentWillUpdate Remove

Open
#1,034 9 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🚀Next Release Resolution: Fixed
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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.