Component Nesting and consuming file export in React Native

Component nesting is the process of nesting on the component inside another component.

we are changing file from


// Import a library to help create a component
import React from 'react';
import { AppRegistry, Text } from 'react-native';
import Header from './src/component/Header';

// Create a component
const App = () => (

// Render it to the device
AppRegistry.registerComponent('MyNewProject', () => App);

Text : no need to import Text in Index.js as Header.js already importing Text


// Import libraries for making a component
import React from 'react';
import { Text } from 'react-native';

// Make a component
const Header = () => {
  return (
  ‹Text› Header Text ‹/Text›

// Make the component available to other parts of the app
export default Header;


Hope you find this blog useful. Please feel free to contact with me in case you have any query, suggestions.  You can comment, like and follow posts.

You can request any topic related to Swift, React native and iOS development.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s