Building Blocks

Introduction

Up till now, we have seen how to generate a React Native Project using the cli tool. We briefly discussed each file in the directory structure of a ReactNative app, and we launched our app on our phone using the expo app that we downloaded from the app store and google play store.

If you are unfamiliar with any of the above text, I would highly recommend you to take a step back and learn about it in the Getting Started with ReactNative tutorial but, If you have already launched your very own Hello World app, then Congratulations! You can now proceed further to hone your ReactNative mobile app development skills.

In this tutorial, we will briefly discuss the fundamental building block of developing a ReactNative App, and that is Components. We will also implement the code as we discuss each component that the React Native provides in detail.

What are the Components?

Components are the visual elements that you see on the screen in a ReactNative App. There are several components made available for you to use by the ReactNative core. That's what makes ReactNative great! To understand it better, we can categorize these components into different categories:

  1. Core Components : These include - View, Text, Image, ScrollView, TextInput, StyleSheet.

  2. List Components : These include - FlatList and Section List.

  3. Form Control Components: These include Button, Slider, Picker, Switch.

  4. Platform Dependent Specific Components:

  • iOS : AlertIOS, PushNotificationIOS, ActionSheetIOS, etc.
  • Android: ToastAndroid, PermissionsAndroid, DatePickerAndroid, etc.
  1. Miscellaneous Components : There are tons of other components that ReactNative provide for us to make developers job easy. Some of these include Alert, Animated, CameraRoll, Dimensions, Keyboard, WebView, etc.

Apart from these built-in components, we can create our custom components, or we can incorporate custom components created by someone else into our projects. For instance, In this app, I am using Card Component provided by the react-native-elements library created by a community of ReactNative developers.

Components In Detail

Let us look at how to use these components one by one in detail and create our very first mobile app using React Native.

Simply make the respective changes in the app.js file to learn the building blocks of React Native and get the desired result.

View, StyleSheet and Text

View

We start by declaring a View component, which is the basic building block in a ReactNative file. It maps the fundamental native iOS (UIView) and Android's (View) Components. You can think of this component as a div element from HTML. Hence, the View component can contain nested components.

StyleSheet

We provide styles to the View component via the Stylesheet. Stylesheet in ReactNative provides a way to create styles inside the component file. It takes a JavaScript object as it does from above and returns a new StyleSheet object from it. There is no id or class in ReactNative, like in Web development. To create a new style object, we can use Stylesheet.create() method.

Text

The text component, in many ways, is just like the View component, except that it is specifically available to display text. Also, like a View component, it supports styling.

Example

Alt text

Code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.viewstyle}>
<Text style={styles.textstyle}>Text Component Inside a View</Text>
</View>
);
}
const styles = StyleSheet.create({
viewstyle:{
flex:1,
margin:10
},
textstyle: {
fontSize:18,
backgroundColor: '#f50057',
marginBottom: 10,
color:'#ffffff',
padding:10,
textAlign: 'center',
borderRadius:20
},
});
Link to Private Gist

Explanation

The above code snippet is a typical pattern style that you will see quite often in React Native.\n\nLet us understand the code line by line.

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

The first line import the modules required to run the app using React Library.The second line imports the specific module from the React Native core Library. In the above code, we are importing Stylesheet, Text, and View Component.

export default function func_name()
{ return ( // View )}

As we know from above that the ReactNative App consists of components. These are the visual blocks that we see on the screen. The above code is a standard way of creating a function-based component that can be used anywhere within the app.

ScrollView and FlatList

ScrollView

As the name suggests, it provides a solution to scrolling content across any screen height. It supports both vertical and horizontal scrolling along with an optional option to pinch to zoom feature.

Flat List

It is a component that allows developers to present a list of similarly structured data items in a scrollable way. It is generally preferred over the scroll view when the number of data items in the list changes over time.

Example

Alt text

Code

import React from 'react';
import { StyleSheet, Text, View,ScrollView } from 'react-native';
export default function App() {
const arr = [1,2,3,4,5,6,7,8,9,10,11,12];
return (
<ScrollView>
{
arr.map((num)=>
<View>
<Text style={styles.textstyle}>Scrollable Content Text {num}</Text>
</View>
)}
</ScrollView>
);
}
const styles = StyleSheet.create({
textstyle: {
fontSize:18,
backgroundColor: '#00B0FF',
marginBottom: 5,
color:'#000000',
padding:20,
textAlign: 'center',
},
});
Link to private Gist

Explanation

The above code snippet is pretty much self-explanatory. First, we import the module ScrollView from the react-native library. Next, we create a function-based component where we add Views to the ScrollView Component. In the above code, we add list items to the ScrollView Component with an array with the help of JSX. We pass style as a prop to the text component that takes an object created using the StyleSheet component.

Image and Dimensions

Image

Replace the assets folder with the one found in the Link: Download Assets

It is a component that provides a way to display images on the screen. It supports images from any format. One can get the picture from either the local storage or the network.

Dimensions

The dimension component of ReactNative allows the developers to get the dimensions of the application's window / mobile screen. It may change according to device rotation and type.

Example

Alt text

Code

import React from 'react';
import { StyleSheet,View, Image, Dimensions } from 'react-native';
export default function App() {
return (
<View>
<Image
source={require('..assets/images/my_image.png')}
style = {styles.im}
/>
</View>
);
}
const styles = StyleSheet.create({
im:{
width:Dimensions.get('window').width,
height:Dimensions.get('window').height/2
}
});
Link to private Gist

Explanation

In the above code snippet, we load an image stored in the assets folder of our project directory. The image component of the React Native takes source as a prop using which we can add our pictures to the screen. We set the image width and height using the Dimensions component provided by the React Native library that contains methods to capture the dimensions of the application window.

Button, Text Input, ToastAndroid, and Alert

Button

As the name suggests, the button component is the easiest way to allow the developers to provide a way for their users, handle touch gestures on the mobile screen.

Text Input

It is a core component that lets users input text on the screen.

Toast

ToastAndroid component of ReactNative exposes the Android platform's ToastAndroid module as a JS module. It will only appear on mobile phones with Android as an Operating System.

Alert

Alert Component of React Native provides an Alert box with title and message. It can be merely compared to a dialogue box, as seen on Android or iOS devices. It has an option to provide optional buttons for users to interact.

Example

Alt text

Code

import React from 'react';
import { StyleSheet,View,Button, Alert, Platform, ToastAndroid, TextInput } from 'react-native';
export default function App() {
const showalert = ()=>{ Alert.alert('Alert Component','You Pressed Alert Button!')}
const showtoast = ()=>{ if(Platform.OS=="android")ToastAndroid.show('You Pressed ToastMessage',ToastAndroid.SHORT)}
return (
<View>
<Button
style = {styles.button}
onPress={showalert}
title="Button For Alert" />
<Button
style = {styles.button}
onPress={showtoast}
title="Button For Toast" />
<TextInput
style={styles.tinput}
placeholder="This is a Text Input Component!" />
</View>
);
}
const styles = StyleSheet.create({
button:{padding:10,marginBottom:10,backgroundColor:"#F9A826",color:"#ffffff" },
tinput:{ padding:10, marginBottom:5,fontSize:15 }
});
Link to private Gist

Explanation

The above code snippet is pretty much self-explanatory. The Button component of ReactNative takes style, title, and onPress props. In the above code, we pass methods as props that display an alert message and toast message (Android) on the button click. We check the information on the platform by using the Platform component of React Native.

Edit this page