What are React and React Native?
React and React Native are both frameworks developed by Facebook. They have a lot in common but are primarily used for different purposes. React is a JavaScript library that is used to develop web applications. On the other hand, React Native is a framework that helps to develop mobile applications for iOS and Android platforms using JavaScript. React Native uses the same principles as React to build user interfaces but applies them to the mobile environment. It allows developers to develop fast and responsive mobile apps while retaining the ability to reuse code across platforms.
In summary, React is used for building web interfaces while React Native is used for developing cross-platform mobile applications.
Similarities with React
Dataflow and State Management
Like React, React Native has a unidirectional flow of data, i.e., data can flow from higher-order components to its children but not the other way. To change the data from the children, we have to pass some function reference which alters the data in the parent component. In the case of Redux, you can re-use your existing React code in React Native.
Source: https://dzone.com/articles/react-is-taking-over-front-end-development-why
Component Lifecycle
React component lifecycle refers to the series of stages that a React component goes through during its lifetime. These stages are divided into three phases: Mounting, Updating and Unmounting.
1. Mounting Phase: During this phase, the components are initialized and inserted into the DOM. Three lifecycle methods are called during this life cycle stage: Constructor, Render and ComponentDidMount.
2. Updating Phase: Once a component is mounted, it may need to be updated to reflect changes in the app. Updating phase starts when props or the state of the component changes. Several lifecycle methods are called during this stage: shouldComponentUpdate, ComponentWillUpdate, Render and ComponentDidUpdate
3. Unmounting Phase: This is the final stage of the component lifecycle. During this phase, the component is removed from the DOM. The only lifecycle method called during this stage is the componentWillUnmount method.
These concepts can be applied directly in React Native without any friction.
Source: React lifecycle methods diagram (wojtekmaj.pl)
Differences with React
Basic Components and Styling
In React, we use basic HTML tags like div, span, p tags etc., to build our components. But in React Native, we use the components provided by React Native library to build components. This is because unlike React, which only runs on the web, React Native is cross-platform, i.e., it is used to build for Android, IOS and even Web. So, each of those components is translated directly to an equivalent native component respectively.
For Example, the View component is converted to –
| Platform | Translated native component |
| IOS | UIView |
| Android | android.view |
| Web | div |
The same goes for styling. React Native creates an abstraction layer using which we can write styles similar to CSS, which then gets converted to respective native component stylings. Another notable difference is the unit. In React Native, we use DIP (Density Independent Pixels).
Note: Font scale is handled automatically using the accessibility option in phone settings. Sometimes this might cause your UI to break.
Here we build the same component using both React and React Native.
Event Listeners and Callbacks
In React, we can have onClick callback on any HTML tag. This is not the case for React Native. This is not the case in React Native. To handle onPress, we have to use Touchable components. React Native gives a couple of variants of these components ( TouchableOpacity, TouchableWithoutFeedback, TouchableHighlight ) with different default user feedback on interaction. These also provide an onLongPress callback to handle long presses.
Read More: https://reactnative.dev/docs/handling-touches
For more gesture control, you can use the Gesture Responder System, where you get callbacks like onResponderStart, onResponderMove and onResponderRelease to handle custom gestures. These callbacks provide provides a nativeEvent which gives the following properties –
- changedTouches – Array of all touch events that have changed since the last event
- identifier – The ID of the touch
- locationX – The X position of the touch relative to the element
- locationY – The Y position of the touch relative to the element
- pageX – The X position of the touch, relative to the root element
- pageY – The Y position of the touch, relative to the root element
- target – The node id of the element receiving the touch event
- timestamp – A time identifier for the touch, useful for velocity calculation
- touches – Array of all current touches on the screen
Read More:https://reactnative.dev/docs/gesture-responder-system
Layout and Responsive Design
Flexbox and Grid
There is no grid in React Native. We have made do with Flexbox to satisfy our responsive needs. Flexbox also works a bit differently in React Native –
- In React Native, all containers are flex containers by default.
- Flex Direction is set to ‘column’ by default.
- alignmentContent is defaulted to ‘flex-start’ instead of ‘stretch’.
- The ‘flex’ parameter only supports a single number.
Read More:https://reactnative.dev/docs/flexbox
useWindowDimensions and React Native Dimension
We are familiar with viewport height and viewport width in CSS. Otherwise, if we want to use javascript, we can access that using window.outerWidth. This is not possible in React Native as we do not get access to window objects, which are provided by the browser.
To resolve this problem, React Native provides Dimension that gives us access to the screen height and width. And this can be used outside a component.
An issue with this is that it does not change if the window size changes during runtime. We can add an event listener on Dimension like –
This can also be handled using the useWindowDimensions hook. The values provided by this hook will update automatically if any values change.
onLayout Prop
Most components expose a callback onLayout which is very useful while making the responsive layout. This callback provides a LayoutChangeEvent, which contains the nativeEvent property.
It gives access to the layout that provides us with the dimensions of the components. onLayout is fired every time the container size changes. We can use this hook, if we need to change the UI when the component size changes ( for example, on orientation change or split screen resize )
- Layout
- width: Width of the component
- height: Height of the component
- x: Position of the component on the X axis.
- y: Position of the component on the Y axis.
Developer Tools
As React Developers, we get some useful tools for monitoring and debugging –
- React DevTools
- Redux DevTools
- Browser Inspector
In React Native we get similar tools in the development environment.
It also gives access to a Performance monitor which monitors the FPS and RAM usage in real-time which is very handy while optimizing performance. Maintaining a consistent 60FPS is mandatory nowadays for user experience.
| IOS Simulator | command + control + Z |
| iPhone | Shake gesture |
| Android Emulator | command + M (Mac) Ctrl + M (Windows/Linux) |
| Web | Browser Inspector |
Conclusion
We can see that in most cases, React Native is very similar to React. So if you are a React developer and have to create a mobile application, React Native is a great option. As long as your app doesn’t have many shaders or graphically intensive elements, you can use applications with near-native performance without learning a new technology or language.