React Native - How to re-use files?

Question

I have design header, footer video player view, etc as a separate files. How do I include those in every pages?

I tried this method. but doesn't work.

Answer 1

Follow the below steps:

Create a file eg: Header.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

class Header extends Component {
  render() {
    return (
      <View>
        <Text> Header Component </Text>
      </View>
    )
  }
}

export that component or function to reuse that in other files.

export default Header;

by exporting that function or class you can import that in any js file by using this:

import Header from './Header.js'

OR

import Header from './Header'

Here is how you can use that imported component in other files:

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import Header from './Header'  // import that

class App extends Component {
  render() {
    return (
      <View>
        <Header />  // use like this
        <Text> textInComponent </Text>
      </View>
    )
  }
}

If you have multiple components or function to export in a single file you can't use export default in all of that. you just have to use export only.

like this: Common.js file

export Header;
export Button;

or you can use that like this.

import { Header, Button } from './Common';