How set auto height for view in react native

Question

I have an react native app that fetch data from an api in this api there are news each of it contain subject, picture and details I have problem in set the height of each item to auto height I tried to set the height of container to 100 then the subject and details are just overlapping above each other so I set it to 300 and it's okay for the items that have long text but the problem with the items that have short text so the space between these items become too large so how can I set the height auto so I each item will have height regarding to it's content

so this is the class of each item:

import React, { Component } from "react"
import { View, Image, Text, StyleSheet } from "react-native"

export default class Item extends Component {
    render() {
        let { item } = this.props;
        const { subject, picture, details } = item;
        return (
            <View style={styles.container}>
                <Image style={styles.picture} resizeMode="cover" source={{ uri: picture }} />
                {console.log(image)}

                <View style={styles.content}>
                    <Text style={styles.subject}>{subject}</Text>
                    <Text style={styles.details}>{details}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 300,
        flexDirection: "row",
        flex: 1,
        padding: 10
    },
    content: {
        flexDirection: "column",
        flex: 1
    },
    picture: {
        height: 70,
        width: 100
    },
    subject: {
        marginLeft: 20,
        fontSize: 16,
        fontWeight: 'bold'
    },
    details: {
        marginLeft: 20,
        fontSize: 16,
    }
})

try diving your components using flex in you main container view — shubham, Dec 04 '18 at 11:36

score 19 · Accepted Answer · answered Dec 04 '18 at 11:50

19

Skip giving height to your container, and you will have dynamically required height and also remove height from your image so that it occupies the height of the final container height as per the text being rendered.

Your stylesheet should look like:

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        //flex: 1, - remove this as this doesn't make any sense here.
        padding: 10
    },
    content: {
        flexDirection: "column",
        flex: 1,
        paddingLeft: 10, //if you need separation.
    },
    picture: {
        //height: 70, - commenting this will make it automatically ataining height as per your text grows.
        width: 100
    },
    subject: {
        marginLeft: 20,
        fontSize: 16,
        fontWeight: 'bold'
    },
    details: {
        marginLeft: 20,
        fontSize: 16,
    }
})

answered Dec 04 '18 at 11:50

Suraj Malviya

3,685
1
15
22

thanks it works now after i delete the height from container but I keep the height in picture because they stretched when commenting height @Suraj Malviya – muklah Dec 04 '18 at 12:08
You should never use `cover` as resizeMode until that is needed, for simple use cases, `contain` proves to be the best option. – Suraj Malviya Dec 04 '18 at 12:09
okay but when I set it to contain the picture is not at the top of each item but the picture now at the center of rows text so how can I make it at the top beside the subject? @Suraj Malviya – muklah Dec 04 '18 at 12:22
Wrap the image with a View with same style as that of Image and put Image as a child of that view with `flex:1` and `resizeMode: contain`. It should put the image on the top left. Also to align it top center, insert `alignItems: center` in the new view which i stated. – Suraj Malviya Dec 04 '18 at 12:52
I set it like this ` {title} {description} {publishedAt} ` but not work like expected – muklah Dec 04 '18 at 13:15

score 0 · Answer 2 · answered Nov 06 '22 at 07:46

Here in November of 2022. The solution a few people have provided is correct but needs to be reversed. If you are trying to get your to Scroll inside of your parent this is what worked for me

const windowHeight = Dimensions.get("window").height;

<View style={{height: windowHeight}}>
...
<ScrollView contentContainerStyle={{flexGrow:1}}>...</ScrollView>
</View>

Hopefully this works for whoever is viewing this

How set auto height for view in react native

2 Answers2

Linked