Question 34667 in React native Question posted in
The official React Native documentation can be found here.

React Native flex children gone when declaring flex property

My component is extremely simple, I have a <View> component with a flex:1 property.

I have another View inside of that parent View with a property of flex: .5, from my understanding – it should take up 50% of the parent View‘s height. But it doesn’t take up anything, it’s gone as if there is no element there. height: "50%" works though.

Tags:

3

Answers


  1. 0

    because of the other view with flex: 1 take the entire space of parent,
    flex: 1 means width: 100% or height: 100% of the parent (depends on the flex direction).

    Change to flex: .5 for both Views and you will see them in the half and half of parent.

    Login or Signup to reply.
  2. 0

    If your code is like the following, it should be working.

    <View style={{flex: 1, backgroundColor: 'blue'}}>
  <View style={{flex: .5, backgroundColor: 'red'}} />
</View>

    Just be aware the component above will affected by its parent View as well. Please check all the flex in parent views.
    Also, it is good to provide any of the code in the question to make it easier for debugging.

    Login or Signup to reply.
  3. 0

    As per your program you have used only View component inside another View component. also you have added style {flex:1} to parent view and {flex: 0.5} style to child.

    Problem : your problem is child view is not taking 50% of the parent using {flex: 0.5}.

    Solution : if you want to access 50% of the parent using {flex: 0.5} then you have to add any component like Text component inside of child View etc..

    ex:

        /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  Text,
  View,
} from 'react-native';

const App = () => {

  return (
    <View style={{ flex: 1, flexDirection:'row' }}>
      <View style={{ flex: 0.5, backgroundColor: 'red' }}>
        <Text>{"Hello"}</Text>
      </View>
    </View>
  );
};


export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search