React-native-swiper: React native 0.60.4 componentWillReceiveProps componentWillUpdate Remove

Created on 7 Aug 2019  ·  9Comments  ·  Source: leecade/react-native-swiper

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.

Fixed 🚀Next Release

Most helpful comment

Any plans for a new release?

All 9 comments

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 ?

Here same issue.

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

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.

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

| Warning | Warning extended |
|-----|-----|
| image | image |

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

Any plans for a new release?

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"])

any update on this? when to transition to hooks?

Was this page helpful?
0 / 5 - 0 ratings