React Native - Props, Styles & UI Basics

In this mobile-first world, the demand for mobile applications is skyrocketing and developers need the best possible tools to create robust, responsive, and reliable applications. This has led to a rise in the number of frameworks that allow cross-platform application development, i.e, having a common code base for an application and deploying them on different platforms like Android & iOS. Flutter, React Native, Xamarin, and Ionic are examples of some of the most popular frameworks used for cross-platform mobile application development. In this article, we will be discussing some basics of React Native.

What is React Native?

React Native is an open-source framework for building Android and iOS applications built on top of React.js. With React Native, we use JavaScript to access the mobile platform APIs as well as to describe the appearance and behaviour of your UI using React components. In React, components are bundles of reusable and nested code. What this means is that you can write the code for rendering a button once and reuse it anywhere in your app without the need of rewriting the code. This keeps your code clean and easy to maintain.

Props

Most components can be customized with different parameters. In React Native, these parameters are called props, short for properties. Props enable us to adjust the appearance and the functionality of a component. For example, a generic button component can have a different design when used in different places by passing the style prop. Additionally, the title or the onPress event of the button can also be handled externally with the help of props.

<Button style={{backgroundColor: ‘grey’}} text=“Press Here”/>


All the core components offered by React-Native and user-defined components accept props. One important aspect regarding props is that they are read-only, meaning that once a prop is passed by a parent component to a child component, the child can only read the props and cannot mutate them and that modification of props would require a re-render of the child component.


Some important props in React Native Core Components

onLayout

A callback function that is invoked on the mount and on layout changes of components. This prop is accepted primarily by the View component. This event is fired immediately once the layout has been calculated, therefore, it can be used to get the current width or height of the view container.

onPress

A callback function that is invoked when a touch is released, but not cancelled. This function can be used to handle buttons or view press events.

ref

Refs provide a way to access DOM nodes or React elements created in the render method. A reference is provided that enables us to manipulate the component after it is mounted. A ref object returned by a component can be stored in a React.ref variable.

style

Prop used for styling the component. The prop can be a plain old JavaScript object. We can also pass an array of styles where the last style in the array has precedence. The object passed should contain Stylesheet keys that are similar to CSS keys used in web development.

Styling

Styling in React Native is achieved using Javascript. Most of the core components in React Native accept the style prop. React components accept styles in the form of a JSON object that has key-value pairs similar to CSS, the only difference being that the keys are written in camelCase.

React Native

CSS

backgroundColor

background-color

justifyContent

justify-content

marginTop

margin-top

letterSpacing

letter-spacing

React Native uses the Flexbox algorithm for layouting its components. Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces. This is beneficial as it allows a consistent layout on different screen sizes.

import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Hello World! This is sample code for learning styling in React Native!
      </Text>
      <TextInput style={styles.textInput} placeholder='Type something here'/>
      <Text style={styles.cornerText}>PLG is Awesome!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color:'black'
  },
  textInput:{
    borderWidth:1,
    height:30,
    width:'50%',
    alignSelf:'center'
  },
  cornerText:{
    position:'absolute',
    bottom:10,
    right:10,
    color:'orange'
  }
});

React Native Core Components

Some of the components provided by react native are listed below along with their web, native Android and iOS counterparts.

REACT NATIVE UI COMPONENT

ANDROID VIEW

IOS VIEW

WEB

DESCRIPTION

<View>

<ViewGroup>

<UIView>

A non-scrolling 

<div>

A container that supports layout with flexbox, style, some touch handling, and accessibility controls

<Text>

<TextView>

<UITextView>

<p>

Displays, styles, and nests strings of text and even handles touch events

<Image>

<ImageView>

<UIImageView>

<img>

Displays different types of images

<ScrollView>

<ScrollView>

<UIScrollView>

<div>

A generic scrolling container that can contain multiple components and views

<TextInput>

<EditText>

<UITextField>

<input type="text">

Allows the user to enter text

<View />

In Android and iOS development, a <View /> is the basic building block of UI. A small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are forms of views. The View component supports layout with flexbox, style, some touch handling, and accessibility controls.

Animations

Animations are very important in creating a great user experience. An application without animations or transitions may seem jarring to the user. React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions. These systems are powerful and they allow the developers to implement smooth animations in their applications. But, there is a major drawback of using these systems, i.e., the animations are processed and run on the JS thread, which might cause performance hiccups while running heavy animations as this is the primary thread used for task execution while running React Native applications.

To resolve the above-discussed issue, a third-party library - React Native Reanimated, is widely used for implementing animations in React Native applications. The major advantage this library offers over the proprietary solutions is that the animations run on the main thread to prevent frame drops. This leaves the JS thread free for processing other tasks and not be kept busy by animation processing. This library can also be used to change minor UI elements without state updates. For example, changing the value of a <Text /> component usually requires a state update. But this can also be achieved by making the component a <Animated.Text /> component and change the text value in an animated manner.

Conclusion

In this article, we discussed the basics of react native starting from props and how some props can be used to customise react native components. We then discussed styling in react native along with some examples. Furthermore, we discussed some core components offered by react native and concluded by looking at animations in react native.

This article just scratches the surface of what is possible in react native in terms of styling. Very beautiful and complex UIs can be created by manipulating the style props of different components. We will dive deep into complex UIs in further articles.

Harsh Siriah

Harsh Siriah

Hi, I'm Harsh! A geek with a love for dogs & mobiles.
Pune, India