Yellow Box Errors/Warnings after React Native Upgrade

Question

I recently upgraded my project from React Native 0.15 to 0.20. I guess this was kind of a leap and I'm quite new to these Yellow Box Warnings. Right now I got 2 warnings as follows.

Warning One:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of ItemViewPage.

Warning Two:

View #2359 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.

Figured out that Warning One was due to using const Radio = require('react-native-simple-radio-button'); instead of import Radio from 'react-native-simple-radio-button';. Once the change was done, Warning One was gone.

For the Warning Two, the page it sends it from has place where it uses shadows.

Styling Code:

container: {
    overflow: 'hidden',
    width: Dimensions.get('window').width,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.0)',
    shadowColor: '#000000',
    shadowOpacity: 1,
    shadowRadius: 20,
    shadowOffset: {width: 0, height: -5},
    justifyContent: 'center'
}

Code:

renderItem: function (item) {
    var Dimensions = require('Dimensions');
    return (
        <View style={styles.mainContainer}>
            <TouchableHighlight underlayColor="rgba(0,0,0,0)" style={styles.buttonFill}
                                onPress={this.categoryPressed.bind(this, item.categoryId, item.name)}>
                <View style={styles.container}>
                    <KenBurnsImage tension={6} friction={50} imageWidth={Dimensions.get('window').width} imageHeight={Dimensions.get('window').height / 100 * 30} sourceUri={{uri: item.image}} placeholderSource={{uri: './images/placeholder.jpg'}}/>
                    <View>
                        <LinearGradient
                            colors={[processColor('rgba(255, 255, 255, 0.0)'), processColor('rgba(0,0,0,0)'), processColor('rgba(0,0,0,0.7)')]}
                            style={styles.linearGradient}>
                            <View style={styles.allContent}>
                                <View style={styles.imageRowContainer}>
                                    <View style={styles.nameContainer}>
                                        <Text style={styles.textMain}>{item.name}</Text>
                                    </View>
                                    {this._renderItemCountSection(item.itemsCount)}
                                    <View style={styles.continueContainer}>
                                        <Text style={styles.textArrow}>&#xf105;</Text>
                                    </View>
                                </View>
                            </View>
                        </LinearGradient>
                    </View>
                </View>
            </TouchableHighlight>

        </View>
    );
}

renderItem function is rendering items from the ListView.

As the code states, it already has the Background Color. So why is this warning coming? What is the fix? Thanks in advance.

Answer 1

This is because you are setting the backgroundColor as transparent rgba(255, 255, 255 ,0.0). This is very inefficient. You can read all about this in this commit log https://github.com/facebook/react-native/commit/e4c53c28aea7e067e48f5c8c0100c7cafc031b06

Answer 2

For warning two

In my case, I deleted shadowOpacity, added it to the shadow color and used RGBA value.

shadowColor: 'rgba(0,0,0, 0.1)'