Basic Code and project structure in react native

Project Structure :

To keep our code clean and well managed we will keep code separated from predefined files.

Create new folder src -> then inside src folder create new folder components -> inside components folder create .js file for component (As per good and clean coding practice, we will create separate .js file for every component. by doing so we can reuse that component)

Screen Shot 2018-04-03 at 11.25.59 PM.png

Initial Code for index.js and other components .js file :

index.js initial code :

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

// Create a component
const App = () => (
‹Text›Some Text‹/Text›  //atleast any one component should be here

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

albums – project name

Other.js file for ex. Header.js

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

// Make a component
const Header = () => {           
  const { textStyle, viewStyle } = styles;  //add all styles here
  return (
  ‹Text style={textStyle}›Header Text‹/Text›    

const styles = {
  viewStyle: {
    backgroundColor: '#F8F8F8',
  textStyle: {
    fontSize: 20

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

{ Text, View } – component which we are using 
Header – Give the same name as the file name


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.

One thought on “Basic Code and project structure in react native

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 )

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