Introduction to react-native
2. Native Realm
In the native realm, The developers will develop in Object Swift if it’s for iOS or with Java if it’s for Android. We will use the native, platform-specific languages that we have used before and the main UI thread will be available as usual. Across platforms, we just need to change the UI from the main UI thread and we will be able to create different background threads as required
React native UI building blocks
- Text – A React component for displaying text. Text supports nesting, styling, and touch handling.
- View & SafeAreaView – The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.
- Button – A basic button component that should render nicely on any platform. Supports a minimal level of customisation.
- Touchable’s – A wrapper for making views respond properly to touches. There are various type of touchable in react-native . TouchableOpacity, Touchable Highlight, Pressable, etc. The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artefacts if not used correctly
- ScrollView & FlatList – FlatList is a performant interface for rendering basic, flat lists, supporting the most handy features: Fully cross-platform, Header support, Footer support, Pull to Refresh, Scroll loading, Separator support ,etc. ScrollView renders all its react child components at once, but this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
Comparing it with react
React Native using the JSX and similar React code structure, but instead of using divs and HTML elements it is using React Native View elements. Using the bridge, React Native can ask native code to provide the native elements it needs.
Here you have a simple To-Do list app sample code written both in React and React Native.
You can easily identify a difference between both of them. I will try to explain it more by dividing the things in small parts so that you can understand it better.
Compare the input and TextInput -> Both of them uses different methods to handle change of text.
In react native it uses onChangeText and in react it uses onChange event.
Next on: button and TouchableOpacity -> Both of are used for click events but both of them uses different methods to handle click event.
In react native it uses onPress while in react it uses onClick event.
Many other UI elements differences like View and div, Text and h3, label, etc.
Advantages of react native
After working with React Native, I think the following are some pretty solid advantages of it:
- You can write code faster and release it for both iOS and Android with only tiny differences that are device-related. There is no need for 2 teams of developers for the same app. (In context of mobile app development )
- Due to the fact that React Native actually renders components using the native platform API, it stands out from most existing methods of cross-platform development such as Cordova or Ionic which are using webview to display HTML elements in the app.
- Ability to basically write React code that runs separately from the main UI thread communicating with the native platform.
- Friendly for Web (Frontend) Development – you can write mobile applications with the performance, look and feel of a native application, while using familiar tools.
These are just a few of the advantages of React Native, but I think you got the idea.