How to create global layout component in React native?

Question

I use React router flux in my project and I need to global view for my app so I created component called layout but this did not answer. My code:

---layout component

 render() {
        return (
<View style={[styles.container,styles.justify_center,styles.align_items_center]}>

</View>
        );
    }

---login component

render() {
        return (
 <layout>
<Text>Test</Text>
</layout>
        );
    }

Possible duplicate of [Is there any chance to use a component as a global ActivityIndicator on React-Native](https://stackoverflow.com/questions/41554340/is-there-any-chance-to-use-a-component-as-a-global-activityindicator-on-react-na) — kivul, Nov 23 '18 at 09:25

score 0 · Accepted Answer · answered Nov 23 '18 at 19:06

Use this.props.children in a component to include all the children included in the invokation of this component.

Just update your layout component as shown bellow :

render() {
  return (
    <View style={[styles.container,styles.justify_center,styles.align_items_center]}>
      {this.props.children}
    </View>
  );
}

How to create global layout component in React native?

1 Answers1