React Native: make component which can nest component-CodePudding

I want to be able to define a component which can take a component as an argument in the same way View works: eg

Eg. to apply a style to View always:

const AltView = (Prop) => (
  <View style={{flex:1}}>Prop</View>
)

To be used as:

export default function App() {
   return (<AltView><MoreComponents/></AltView>)
}

Is this possible in Snack/Expo-dev

CodePudding user response：

You can do it by using props.children. Here is a snack

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

const AltView = (props) => (
  <View style={{ background: 'green' }}>{ props.children }</View>
)

export default function App() {
  return (
    <AltView>
      <Text>
        Hello
      </Text>
    </AltView>
  );
}