CODEWITHSUNDEEP
react-native
learner
learner

Reputation: 234

React Native FlatList problem with Image and text

DESCRIPTION

I have this code with some styles and it looks like https://i.sstatic.net/Gnlr5.png. I don't want those blue background text size to have width and height of 100, I just want the image to with 100 width and height.

EXPECTED VERSION

It works as it is expected when I don't use any images https://i.sstatic.net/4fP6H.png. But i want the width and height of the container to be 100 when there is an image otherwise adjust it to the amount of text.

CODE

<FlatList
style={{ flex: 1 }}
data={this.state.data}
inverted
keyExtriactor={(time, index) => index.toString()}
renderItem={({ item }) => {
    return (
        <View>
            <View style={styles.container}>
                <View style={{ backgroundColor: '#529FF3', margin: 10 }}>
                    <Text style={{ paddingVertical: 10, fontSize: 15, paddingStart: 5, paddingEnd: 16, color: 'black' }}>
                        {item.text}</Text>
                    <Image source={{ uri: item.imgUrl }} style={{ height: 100, width: 100 }} />
                </View>
            </View>
        </View>
    )
}} />

Upvotes: 1

Views: 4310

Answers (1)

MUHAMMAD ILYAS
MUHAMMAD ILYAS

Reputation: 1450

I have created an example may it helps you check this out https://snack.expo.io/@jsfit/4bf0f2

Upvotes: 1

Related Questions