CODEWITHSUNDEEP
javascriptreact-native
muklah
muklah

Reputation: 865

How set auto height for view in react native

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,
    }
})

Upvotes: 15

Views: 41181

Answers (2)

Alex Stolzoff
Alex Stolzoff

Reputation: 11

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

Upvotes: 0

Suraj Malviya
Suraj Malviya

Reputation: 3783

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,
    }
})

Upvotes: 20

Related Questions