problem with the ImageBackground component react-native

Question

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 ..

Thakur Karthik · Accepted Answer · 2019-09-28 05:19:33Z

1

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.

answered Sep 28, 2019 at 5:19

Thakur Karthik

3,6483 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luigi Over a year ago

keep giving the same error, I don't understand why it's happening

Collectives™ on Stack Overflow

problem with the ImageBackground component react-native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related