Skip to main content

Posts

Showing posts with the label React Native

Lifecycle of React Native Component [2020 Edition]

What are the life cycle methods of React Native Component? A component's life cycle in React Native can be divided into 4 phases: React Native Component life cycle phases Mounting:  In this phase,  component instance is created and inserted into the DOM. Updating: In updating phase, a react component is said to be born and it start growing by receiving new updates. Unmounting: In this phase, a react component gets removed from actual DOM. Error Handling: It is called when any error occurs while rendering the component. Now let's discuss about different methods that gets called during these phases. Mounting phase Below are the methods which gets called when instance of component is created and inserted into the DOM. Constructor() static getDerivedStateFromProps() render() ComponentDidMount() Constructor() constructor ( props ) { super ( props ) ; this . state = { employeeId : 0 } ; } It is first method which gets called in the ...

What is Redux in React Native and why we need it ?

Redux is state management library in react native application which is used to manage the entire application state. It helps us to create applications that behave consistently, can run in different environments and are easy to test. Why we need it In react native, we have components where we can manage states internally. It does well when the application have fewer components but when the size of application grows the task of sharing the states between the components become quite difficult. But this management of different states in our application becomes easy in redux because in redux we have a single centralised global store which contain all the states of the application which is accessible to any component which subscribe to the store. So the task of passing states via props between the components gets eliminated. Redux is made up of store, actions, reducer and dispatcher. Let’s discuss about them. Store Store is basically a place where we manage all the states of ...

How to communicate between React Native and Swift using Bridging

In this article we will learn how can we achieve communication between React Native and Swift code. As we know React Native (RN) is great for building cross platform apps, but during development of react native app we might come across a situation where we need to call native code written in swift. This is where bridge module comes in, which allows us to communicate with the native layer of the application. If we are developing app in React Native for iOS and Android platform then we need to create a bridge for each platform. In this article we will discuss creation of React Native Bridge for iOS only. So Let’s start To better understand the concept we will create sample DemoApp in react native using react native CLI. Below are the commands to setup new project in react native. ·       react-native init DemoApp ·       cd DemoApp ·       react-native run-ios On running the app on iOS s...