React native always 100% width and height depending on parent

December 8, 2021

I have a problem with react-native elements. I have one <Parent> component that is a View and I have one <Child> component as a child that is also a View. I would like that <Child> will always be 100% width and height of <Parent>. I know I can pass width: '100%' and height: '100%' but is it a good way of styling it? What is the best practice to setup parent and child and parent will define width and height and child will always be depending on the parent component?

>Solution :

for this , you can use flex for style like this :

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

const Flex = () => {
  return (
    <View style={[styles.container, {
      // Try setting `flexDirection` to `"row"`.
      flexDirection: "column"
    }]}>
      <View style={{ flex: 1, backgroundColor: "red" }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
   
  },
});

export default Flex;

for more info see this