Creating wrapper component

Question

I want to create a wrapper component like this:

Wrapper Component:

class WrapperComponent extends Component {

  render() {
    return (
      <Image source={someImage}>
          <App />
      </Image>);
  }
}

App:

class App extends Component {

  render() {
    return (
      <WrapperComponent>
        <Text>Some text</Text>
      </WrapperComponent>
  }
}

I want to use this for the default things like a background image. Is there a way to do this? Sorry I am new in this language.

Answer 1

You can create the wrapper using props.children

Functional component

const WrapperComponent = ({ children }) => (
  <Image source={someImage}>
    {children}
  </Image>
);

Class component

class WrapperComponent extends Component {

  render() {
    return (
      <Image source={someImage}>
          {this.props.children}
      </Image>);
  }
}

Whatever you'll put inside the <WrapperComponent></WrapperComponent> tags will be rendered.