CODEWITHSUNDEEP
htmlcssreactjsreact-native
Dennis
Dennis

Reputation: 1975

Set flex body's height 100% on ReactNative View

In React Native app, I have this view:

<ScrollView style={{ width: 250, height: '100%', backgroundColor: '#000000' }}>
        <SafeAreaView
          style={{
            flex: 1,
            flexWrap: 'nowrap',
            height: '100%',
            backgroundColor: '#ffffff',
            flexDirection: 'row',
            width: '100%',
          }}
        >
          <View style={{ width: 50, height: '100%', backgroundColor: 'powderblue' }} />
          <View style={{ width: 200, height: '100%', backgroundColor: 'skyblue' }} />
   </SafeAreaView>
</ScrollView>

I've used flex and did give 100% height on all base containers. Now let me show you expected and actual results...

Actual Result:

actual

Expected Result:

expected

What am i trying to do?

I want to draw a sidebar. This sidebar will have 2 Views. First one is 50px and second one is 200px. Total of 250px. Thus, they need to be side-by-side. So that i can add buttons (square) to the first box and navigation links to the right. But, due to backgrounds have to be visible even less content is given, i want to make sure all heights are 100%.

How can i make that?

Upvotes: 0

Views: 6034

Answers (2)

Prakash Karena
Prakash Karena

Reputation: 2605

You can use flex.

import * as React from "react";
import { StyleSheet, Text, View, ScrollView, SafeAreaView } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.main}>
        <View style={styles.part1}>
          <Text>First Part</Text>
        </View>
        <View style={styles.part2}>
          <Text>Second Part</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    flexDirection: "row"
  },
  part1: {
    flex: 1,
    backgroundColor: "powderblue",
    alignItems: "center",
    justifyContent: "center"
  },
  part2: {
    flex: 4,
    backgroundColor: "skyblue",
    alignItems: "center",
    justifyContent: "center"
  }
});

Upvotes: 0

akhtarvahid
akhtarvahid

Reputation: 9769

Try this- Live demo https://snack.expo.io/@akhtarvahid/demo

  <SafeAreaView>
   <ScrollView>    
   <View style={styles.main}>
    <View style={styles.part1}>
     <Text>First</Text>
    </View>
    <View style={styles.part2}>
     <Text>Second</Text>
    </View>
   </View>
  </ScrollView>
  </SafeAreaView>

styles

const styles = StyleSheet.create({
 main:{
   display:'flex',
   flexWrap:'nowrap',
   width:'100%',
   flexDirection:'row',
   height:Dimensions.get('window').height,
 },part1:{
   width: '20%',
   backgroundColor: 'powderblue',
   display:'flex',alignItems:'center',
   justifyContent:'center', 
 },part2:{
   width: '80%', 
   backgroundColor: 'skyblue',
   display:'flex',alignItems:'center',
   justifyContent:'center', 
 }
});

And use height of device Dimensions.get('window').height,

Upvotes: 1

Related Questions