CODEWITHSUNDEEP
cssreact-native
Nimila Hiranya
Nimila Hiranya

Reputation: 5192

Yellow Box Errors/Warnings after React Native Upgrade

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.

Upvotes: 7

Views: 8846

Answers (3)

blwinters
blwinters

Reputation: 2191

I was able to get this working on a view with a border radius by applying all styles to the same View and removing overflow:hidden. Also note that I separated the shadow styles for iOS and Android.

    cardContainer: {
      backgroundColor: '#ffffff',
      borderRadius: 4,
    },
    shadowAndroid: {
      elevation: 2,
    },
    shadowIos: {
      shadowColor: 'rgba(16, 24, 40, 0.08)',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 1,
      shadowRadius: 2,
    },

// ...

const shadowStyle = Platform.select({
    ios: styles.shadowIos,
    android: styles.shadowAndroid,
})

return <View style={[styles.cardContainer, shadowStyle]}>{children}</View>

Upvotes: 0

Mahdiyeh
Mahdiyeh

Reputation: 1194

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)'

Upvotes: 9

Aakash Sigdel
Aakash Sigdel

Reputation: 9310

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

Upvotes: 13

Related Questions