How can I take the original image size in reactnavie conditional rendering?

user_15322469 0
Viewed 18

The PostList function is a component inside FlatList.

When I have an item.Image, I want the Image to occupy that size with conditional rendering and push item.content

But with my code, it doesn't take up as wide as the Image due to item.content. like this Screenshot the green one is Image width

enter image description here

How can I push the item.content when the item.Image is present while the Image takes up its normal width?

this is my code

        const PostList = ({item}: Props) => {


          return (
            <>
              <View style={styles.main}>
                <View style={styles.min}>
                  <View style={styles.middlecon}>
                    <Text style={styles.content} numberOfLines={2} ellipsizeMode="tail">
                      {item.content}
                    </Text>
                  </View>
                </View>

                {item.Image && (
                  <View style={styles.rightcon}>
                    <Image style={styles.Image} />
                  </View>
                )}
              </View>
            </>
          );
        };

        const styles = StyleSheet.create({
          main: {
            borderBottomWidth: 0.3,
            borderColor: '#b0b4b8',
            paddingBottom: 30,
            flexDirection: 'row',
            justifyContent: 'space-between',
          },

          min: {},

          middlecon: {},

          content: {},

          rightcon: {
            backgroundColor: 'lightblue',
          },

          Image: {
            width: 100,
            height: 30,
            backgroundColor: 'lightgreen',
            
          },
        });
react-native reactjs node.js javascript
1 Answers

You have to also pass the image's source to the Image component. Like so:

<Image
  style={styles.tinyLogo}
  source={require('@expo/snack-static/react-native-logo.png')}
/>

Also, if you don't have the image stored locally and you instead of its uri, you can do the following:

<Image
  style={styles.tinyLogo}
  source={{
    uri: 'https://reactnative.dev/img/tiny_logo.png',
  }}
/>

Source: https://reactnative.dev/docs/image

Also, to make sure that the image stays within the height and width you've set in your styles, add resizeMode: contain as another prop to the Image component.

user_154575590
Related