Alias in React Native

There is a point where you will have multiple files and folder in  your project. And we need to get the reference of one file from another in any random possibilities.  If we are following the relative path such as

import themes from '../../config/themes';

then it’s really very hard for us to get an idea where it takes by the symbol ‘../ ‘  and in more complex project this is a night mare.

In this post we will find the possible solution and alternative on this type of scenario.  Let’s take an example project with following folder structure.

Your App Root Directory
 |-- app
      |-- component 
      |    |-- login
      |    |   |-- login.js
      +-- resources
      |    |-- icon
      |    |    |-- userupload.png  
      |-- index.ios.js
      |-- index.android.js

supported css and Flex

Valid style props

---

 

Component Placement and Visibility  

  “alignItems”,

  “alignSelf”,

“justifyContent”,

  “backfaceVisibility”,

  “backgroundColor”,

  “flex”,

  “flexDirection”,

  “flexWrap”,

Understanding React Component Lifecycle

Introduction

React enables to create components by invoking the React.createClass() method which expects a render method and triggers a lifecycle that can be hooked into via a number of so called lifecycle methods.

This short article should shed light into all the applicable functions.

Understanding the component lifecycle will enable you to perform certain actions when a component is created or destroyed. Further more it gives you the opportunity to decide if a component should be updated in the first place and to react to props or state changes accordingly.

Debugging on an iOS Device

Debugging in simulator

---

Now we have developed the iOS application with react native, it’s time to know how to  debug iOS application application. Inside the project directory you will see

 

context

Context is similar to props in react , the only difference is that context lets you pass some data through all nodes in component tree. But at the time of writing this post  this feature is still in development phase and its api may change in next version of react. Let’s explain the concept of context this with following diagram.

refs to Components

After building your component, you may find yourself wanting to “reach out” and invoke methods on component instances returned from render().  This can be achieve from refs  in react based project. Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive props and state.

refs can be  as string attribute or callback method. Here’s how we can use it in both cases.

npm command help

 

Install  node.js package in package.json

---

> npm install

.gitignore for react native project

We can include following path and files for git to ignore for Version control.

Getting Started with React Native ?

Setting up

• Node JS
• Flow
• Watchman
• Sublime Text 3 or Atom is good to start

React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native. 

This is a framework that lets you build native iOS and Android application by using javascript backed by native iOS and Android component.  So react native utilize both the advantages of Native app  and Hybrid app functionality.