CODEWITHSUNDEEP
react-nativenative-base
NanoPish
NanoPish

Reputation: 1501

React native / native base : how to include a skeleton (header / footer) in all screens?

What would be a good way to include header / footer or other components in all screens of a react native application that uses native-base ?

Mostly to avoid code duplication and make it easier to refactor.

Upvotes: 0

Views: 581

Answers (1)

CodeYute
CodeYute

Reputation: 74

You can use the Composition concept. https://reactjs.org/docs/composition-vs-inheritance.html

Make a skeleton class/function ( containing header, footer or other components ) and have it render this.props.children in the section where you want the content to be.

export class Skeleton {
 ...

 render(){

  return (
    <Container>
     <Header />

     {this.props.children}

    </Container>
  );
 }
}

Then import it & use

class NewScreen {
     ...

     render(){

      return (
       <Skeleton> 
        <View>...</View>
       </Skeleton>
      );
     }
}

Upvotes: 1

Related Questions