CODEWITHSUNDEEP
react-nativeimagebackground
Luigi
Luigi

Reputation: 1

problem with the ImageBackground component react-native

I'm having a problem with the Image Background component when returning renderRow ..

    import back1 from '../../assets/back1.jpg';

    renderRowpost = ({ item }) => {
        return ( 
                MORECONTENT....     
                {item.imgfondo ?  //IF EXIST BACK IMAGEN
                    <View key={"viwid_" + item.postid} style={styles.warptextopost}>
                        <ImageBackground source={back1}>
                            <Text key={"text_id" + item.postid} style={styles.stylpublictext} >{item.posttexto}</Text>
                        </ImageBackground>
                    </View>
                    : //as there is no image I place the text without background
                    <View key={"viwid_" + item.postid} style={styles.warptextopost}>
                         <Text key={"text_id" + item.postid} style={styles.stylpublictext} >{item.posttexto}</Text>
                    </View>
                }       
   )
   }


          //Where I show all the content I get from RenderrenderRowpost

                <FlatList
                    data={this.state.datapost}
                    renderItem={this.renderRowpost}
                    keyExtractor={(item, index) => index.toString()}
                />

and I get the following error: Invariant Violation: Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports., but if I remove the ImageBackground component or place an Image component (without the text inside) if it shows the normal content, it only gives me the error when placing the ImageBackground component, any solution? I need to place a background image inside the View with its respective text, thank you very much ..

Upvotes: 0

Views: 500

Answers (1)

Thakur Karthik
Thakur Karthik

Reputation: 3498

Load the image as follows

<ImageBackground source={require('../../assets/back1.jpg')}>
...
</ImageBackground>

I guess you cannot import the images like the way you load the js modules in the import.

Upvotes: 1

Related Questions