Stretch Height to Fit Content in React Native

Stretch height to fit content in react native

How about something like:

 <Modal transparent>
   <View style={{ flex: 1, alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>

     {/* fill space at the top */}
     <View style={{ flex: 1, justifyContent: 'flex-start' }} />


     <View style={{ flex: 1, backgroundColor: 'white' }}>
       {/* content goes here */}
     </View>

     {/* fill space at the bottom*/}
     <View style={{ flex: 1, justifyContent: 'flex-end' }} />
   </View>
 </Modal>

How set auto height for view in react native

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

react native scrollView Height always stays static and does not change

There is an existing limitation with ScrollView where height cannot be provided directly.

Wrap the ScrollView in another View and give height to that View.

Like,

  render() {
    return (
      <View style={styles.container}>
        <View style={{height: 80}} >
          <ScrollView
            horizontal
            style={{ backgroundColor: 'blue'}}
          >
            <Text style={{padding: 24}} >title1</Text>
            <Text style={{padding: 24}} >title2</Text>
            <Text style={{padding: 24}} >title3</Text>
            <Text style={{padding: 24}} >title4</Text>
            <Text style={{padding: 24}} >title5</Text>
          </ScrollView>
        </View>
      </View>
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

snack sample: https://snack.expo.io/HkVDBhJoz

EXTRAS: Unlike height providing width to a ScrollView will work correctly

Hope this helps.

How to get the react native image to fit to the Image width and height

You need to use the Image in the following way

   <Image
    source={{
        uri: "https://pbs.twimg.com/media/DWvRLbBVoAA4CCM.jpg"
    }}
    resizeMode={'stretch'}
    style={styles.image}
/>

the resizeModes that you may require would be cover, stretch, repeat(IOS only)

To display the entire image, aspect ratio needs to be changed for most of the cases, therefore, you may use resizeMode: stretch

---

Related Topics