leecade / react-native-swiper

The best Swiper component for React Native.
MIT License
10.4k stars 2.34k forks source link

React native 0.60.4 componentWillReceiveProps componentWillUpdate Remove #1034

Open noecs opened 5 years ago

noecs commented 5 years ago

Which OS ?

macOS Mojave 10.14.6

Version

Which versions are you using:

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.

TungPhanThanh commented 5 years ago

i have the same issue with you, i have an suggest that how about ignore the warn and test on another phone with another version OS ?

filmhomage commented 5 years ago

Here same issue.

devilabhi commented 4 years ago

getting these 2 warnings and swiper is not swiping left and right

lhreska commented 4 years ago

i have the same issue with you, i have an suggest that how about ignore the warn and test on another phone with another version OS ?

Actually, that issue not related to OS. The problem is that lib uses componentWillReceiveProps and componentWillUpdate which will be removed from 17 version of React. So would be really great if lib's maintainers made a migration to a new lifecycle hooks.

JoelOnGithub commented 4 years ago

I have the same issue with react 16.8.6 and react-native 0.60.5.

Warning Warning extended
image image
alex2wong commented 4 years ago

So would be really great if lib's maintainers made a migration to a new lifecycle hooks.

Yes, seems the author is gonna fix it in next minor version.. https://github.com/leecade/react-native-swiper/issues/1001

moay commented 4 years ago

Any plans for a new release?

skizzo commented 4 years ago

I'm aware that this is not a solution, but if you just want to get rid of the Yellow Boxes, add this to your app's index.js:

import {.., YellowBox} from "react-native"
// ..
YellowBox.ignoreWarnings(["Warning: componentWillUpdate"])
CyrusZei commented 4 years ago

any update on this? when to transition to hooks?