React Native Core Components and Examples

React Native is an open-source framework for constructing android and iOS apps using react-native. You can use JavaScript to access your platform’s API and have used behaviors of UI using react components. In this article, I have explained about core components of react-native and examples that understand quickly. Before we enter into the react-native core components, we should know something detailed about what is meant by react-native and their uses. Here, we firstly going to discuss this particular topic. Let’s keep reading to know more.

What is React Native?

React Native is an open-source JavaScript framework, developed for constructing apps on multiple platforms like iOS, Android, and also web applications, utilizing the very same code base. It is based on React, and it obtains all its glory in mobile app development.

Both frameworks: ReactJS (web) and React Native was carried live by Facebook. React Native was a Hackathon project seeking at solving the company’s biggest pain point – holding two code bases for their app. The problem with holding two code bases for such a big app? Work duplication and, at times, solving the same problem in two various ways. React Native is a clear answer to these problems.

React Native uses JavaScript to collect the app’s user interface but uses native-OS views. For more complex features, it permits code execution in OS-native languages (Swift and Objective-C for iOS, and Java and Kotlin for Android).

React vs React Native

React is an open-source JavaScript library used on the front to create quick and reliable User Interfaces for web applications. It’s very much based on reusable elements.

React was also obtained to life by Facebook in 2011 as a direct answer to their scalability issues. It was a time when Facebook ads were increasing immensely, and the constant updates to their UI slowed down the platform immensely. React solved this problem, and in 2012, when Instagram was developed by Facebook, it was also used on the app’s timeline.

React Native, powered by React and created by Facebook, was a natural result of React. It is a mobile framework permitting the building of near-native apps using JavaScript.

Both frameworks are closely connected, but they serve a completely different purposes. React is employed for web development, and React Native (which does not use HTML) is used for mobile development.

Find More Detailed Notes on Java Here!

The Working of React Native

As mentioned earlier React Native employs JavaScript to create the app’s interface. Unlike its competitors (e.g. Ionic), React Native does not depend on web views, but on the actual real materials supplied by native platforms. It has built-in access to the native views and components and can operate native-written code and allow the API access to OS-specific features inside the app. 

React Native employs the concept of “bridge”, which permits asynchronous communication between the JavaScript and Native elements – the bridge concept fibs at the very heart of React Native’s flexibility. Native and JavaScript components are completely distinct technologies, but they can communicate.

This type of architecture shows the benefit of using a lot of OS-native features, but also comes with significant challenges; e.g. constant use of bridges inside the app may seriously slow down its performance. If you’re creating an app that involves many events, a lot of data, etc. React Native might not be the best option. 

Benefits of React Native

The fact that React Native effects using its host platform’s standard rendering APIs allows it to stand out from most existing forms of cross-platform application development, like Cordova or Ionic. Existing forms of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using web views. While this process can work, it also comes with drawbacks, especially around performance. Also, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do attempt to imitate native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an immense amount of effort, and they can fast become out of date.

Indifference, React Native solves your markup to real, native UI elements, leveraging existing means of rendering views on whatever platform you are working with. Besides, React works separately from the main UI thread, so your application can sustain high performance without sacrificing capability. The update cycle in React Native is exact as in React: when props or states change, React Native re-renders the views. The main distinction between React Native and React in the browser is that React Native does this by leveraging the UI libraries of its host platform, rather than employing HTML and CSS markup.

For developers conditioned to working on the Web with React, this means you can write mobile apps with the performance and look and feel of a native application while using ordinary tools. React Native also means an advancement over normal mobile development in two other areas: the developer experience and cross-platform development potential.

React Native Core Components

React Native reduces the number of built-in core components that makes it easier for anyone who wants to dive into React Native App development. Not only this, you can get various other components for performing specific tasks through npm. We have ordered these components according to their roles in the application. You can get begun by using these components after you have finished your installation. Let’s get a brief idea of each component and learn how to use these components in your native application.

Click Here to Join the Best Coding Courses!

Basic Components

You need to understand clearly these basic components which you would use frequently in your app if you are new to react native application development.

View

The view is the most essential component that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps the native equal views whatever device you are running the application. Views can be used in nested form like we perform nesting for div in the web.

Text

Text is another essential component to display text in your native application. Text supports style, nesting, and touch handling. Also, keep in mind that you cannot write any text inside View without using the Text component.

Button And Alert

The <Button /> component is the first component that had significant differences from its sibling (the HTML <button> element). The React Native <Button /> has an onPress() prop, as opposed to anything click-related. It also includes a title prop for the text which goes inside it. Finally, it doesn’t hold a style prop, but only a color prop.

That last point is a pretty big distinction. Now you can (and would) cover it in a View and style it with that wrapper. That is an ordinary way to deal with some limitations on React Native components and you will likely find yourself using View to wrap other components all the time.

What is also interesting about this basic Button component is that on the iOS platform, it only displays up as the text in the title – with no background. Therefore, the color prop will only modify the text color, though on Android it will alter the background color of the button

Image and ImageBackground

The <Image /> component is pretty identical to a HTML img tag. However, there are a few distinctions, such as modifying the src prop to the source. Also, the source itself works differently: for local images, you import them with require, like this <Image source={require(‘path/to/local/image)} />.

Also, in the source prop, you can operate the URI like this: <Image source={{uri: ‘https://imagesite.com/path/to/image’}} style={{height: 100, width: 100, resize mode: contain}}. Notice the uri is an object, so it requires another set of curly braces, just like inline styles. There are a bunch of other props to check out here, but a common one to use is resize mode. This defines how to resize your image and fit your image within a parent View component.

The ImageBackground component is equal to the <Image /> component as it accepts the same props, but the main distinction here is that it can have child elements. The <Image /> component is self-closing and the thing about ImageBackground is, is that it’s pretty basic and a better solution to set a background image might be to either build your component or simply set an Image as complete with lower opacity and behind everything.

The Touchables

One thing you’ll witness in React Native is that many of the components we have covered do not have all the props you would typically implement in a web app. The <Image /> component does not include an onPress prop and the <Button /> component doesn’t hold a style prop. Any Touchable component can aid here.

To Know More About React Native, Download the ENTRI Learning App!

ScrollView and SafeAreaView 

So far we’ve examined all the basic building blocks of a React Native app. However, there are plenty more, and one thing you will fast find is that a phone screen won’t automatically scroll if the content height or width overreaches the screen size. This may surprise you, when you have everything covered in a View component, the overflow will be hidden.

That’s where the simple performance of ScrollView comes in. The ScrollView component is the essential component to allow scrolling. However, FlatList also allows scrolling, but it has a much greater capacity than ScrollView.

Now, the primary setup of ScrollView is giving boundaries to the scrollable view, which would most likely be the screen height and width. Like an image, you can cover ScrollView to give it these boundaries. Generally, you can use a normal View component for this, but if you have an iPhone X, you may discover that your View goes up behind the rounded corners or sensor cluster. The SafeAreaView will take care of this, providing sufficient padding so the whole screen will be visible. Either way, to stretch the whole screen, you can simply set the style of the parent view to flex: 1.

This setup with ScrollView will perform when the height of all your elements is specified locally – as in, the height of your page will always be set the same. If there is data coming in that involves the dimensions of the content, it may be challenging to determine the dimensions of the ScrollView. There are ways to recompense for that, but an even bigger limitation to ScrollView is that it will render everything all at once. Suppose your Facebook account renders every story at once – it would never load!

FlatList

FlatList is equal to ScrollView, but it uses lazy-loading so that only the items which are presently on the screen will render. Of course, FlatList needs data to be passed to it. More precisely, it needs an array of data to be passed. Then, FlatList loops over that array and renders each one when on screen. If an item goes off the screen, when the user scrolls away, FlatList leaves that item and recreates it the next time it appears on the screen (state is lost). ScrollView, on the other hand, doesn’t leave and reload but renders them all at once at the origin.

Want to Know More About React Native Core Components? Download the ENTRI Learning App!

React Native is an exciting framework that allows web developers to create robust mobile applications using their existing JavaScript knowledge. It shows faster mobile development and more efficient code sharing across iOS, Android, and the Web, without renouncing the end user’s experience or application quality. The tradeoff is that it’s new, and still a work in improvement. If your team can tolerate the uncertainty that comes with working with new technology, and wants to design mobile applications for more than just one platform, you should be looking at React Native. These are all about React Native and its core components. You can access more detailed notes regarding Java, Android, Web development, etc through our ENTRI Learning App. Keep visiting our page to learn more anytime.