Understanding React Native Components

In the rapidly evolving field of mobile app development, React Native is a popular framework for creating cross-platform mobile applications from a single codebase. In this article, my colleague, with a strong background in Ruby on Rails, and I, proficient in React Native, share our collaborative journey into the realm of React Native. Our goal is to use our diverse skillsets to enhance our collective understanding while shedding light on essential React Native components.

The Foundation: Components in React Native

At the core of every React Native application, you’ll find components, which are essentially React components tailored for mobile app development. These components serve as the fundamental building blocks that empower you to create self-contained and reusable pieces of code. This modular approach not only simplifies the process of UI creation but also enhances the maintainability and scalability of your projects.

In this post we consider two types of components:

Core Components and APIs
Custom Components (Functional & Class Components)

Unpacking Core Components and APIs

Core components are the bedrock of React Native. These ready-to-use components span various categories such as User Interface, Android-specific, iOS-specific, List View, and Basic Components. Their versatility empowers us to seamlessly integrate views, images, text, and more into our mobile applications. Instead of the div and paragraph tags of HTML, Mobile application UI built with React Native start with the core components that allow us to display text or interactive items such as buttons, or even glean information.

Utilizing core components demands a structured approach:

Identify the Component: Determine the core component best suited for your requirements.
Import the Component: Fetch the desired component from the ‘react-native’ library.
Integrate the Component: Incorporate the component into your codebase for rendering.

Here’s a glimpse of how this process unfolds for different types of core components:

// Example of using ToastAndroid
import React from 'react';
import { View, Button, ToastAndroid } from 'react-native';

const ExternalEventComponent = () => {
  const handleButtonPress = () => {
     ToastAndroid.show('A wild Pikachu appeared!', ToastAndroid.SHORT);
  };

  return (
    <View>
      <Button title="Trigger External Event" onPress={handleButtonPress} />
    </View>
  );
};

export default ExternalEventComponent;

Likewise, Core Components such as View and Text follow the same principles:

// Example of using View
import React from 'react';
import { View } from 'react-native';

const App = () => {
  return <View />;
};

export default App;

// Example of using Text
import React from 'react';
import { Text } from 'react-native';

const App = () => {
  return <Text>Silumesii</Text>;
};

export default App;

These Core Components also accept customizable parameters known as props, which give you control over their behaviour.

Crafting Custom Components

While Core Components serve as the foundation, developers often encounter scenarios demanding a more tailored solution. This is where custom components step in. Custom components combine multiple core component APIs to form versatile, reusable entities. These components function independently, each with its own set of defined props.

Creating custom components can be approached from two angles: Functional and Class components.

Functional Components: A Modern Paradigm

In the evolution of React Native, Functional Components have emerged as a modern and efficient approach to component creation. Unlike their class-based counterparts, functional components embrace a more concise coding style. They leverage React hooks to manage state and lifecycle, providing an intuitive mechanism for handling complex interactions.

Here’s a glimpse of a functional component in action:

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

const Greeting = ({ name }) => {
  return (
    <View>
      <Text>Hello, {name}!</Text>
    </View>
  );
};

export default Greeting;

Class Components: The Classic Approach

Historically, class components held sway as the primary means of managing state and lifecycle in React and React Native. However, the advent of React 16.8 introduced hooks, marking a significant shift towards functional components. Nevertheless, understanding class components remains valuable, as they are prevalent in legacy codebases and offer insights into the foundations of React development.

Here’s a glimpse of a class component:

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

class Greeting extends Component {
  render() {
    return (
      <View>
        <Text>Hello, {this.props.name}!</Text>
      </View>
    );
  }
}

export default Greeting;

Props: Enhancing Customization and Flexibility

In the dynamic landscape of React Native development, the ability to customize components is a cornerstone of crafting rich and engaging user experiences. React Native components, be they core or custom, can be tailored to suit your specific needs through the use of props, short for properties.

The Power of Props

Props enable you to fine-tune a component’s behavior and appearance at the time of its creation. By passing different parameters to a component, you can effortlessly modify its attributes and influence its rendering. This customization not only enhances visual aesthetics but also facilitates the seamless integration of components into your application’s architecture.

Consider the straightforward example of the Image component. With the use of props, you can control which image is displayed, providing a dynamic and versatile mechanism for image rendering:

import React from 'react';
import { Image } from 'react-native';

const Bananas = () => {
  const pic = {
    uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg',
  };
  return (
    <Image alt="basic image" source={pic} style={{ width: 193, height: 110, marginTop: 50 }} />
  );
};

export default Bananas;

In this snippet, the source prop plays a pivotal role, dictating the image displayed within the Image component. The accompanying styles are also applied through props, further demonstrating their versatility.

Expanding Your Knowledge

As you embark on your React Native journey, delving into the documentation becomes a valuable asset. Each component comes with a unique set of props that can be utilized to harness its full potential. The official documentation serves as a comprehensive resource, offering detailed insights into the props available for every component.

By exploring the documentation, you’ll unearth a treasure trove of possibilities, empowering you to leverage props to their fullest extent. This knowledge equips you to create fluid and adaptable components, capable of seamlessly integrating into your app’s architecture and enhancing user engagement.

Incorporating props into your React Native arsenal adds a layer of sophistication and customization, enabling you to sculpt user interfaces that captivate and resonate with your audience. As you experiment with different props and observe their impact, you’ll unveil a world of creative opportunities that elevate your app development endeavors.

In essence, props serve as a bridge between your creative vision and the React Native framework, empowering you to infuse your unique touch into every facet of your mobile application. So, with an open mind and a willingness to explore, venture forth into the realm of props, where limitless customization awaits.

In Conclusion

Whether you gravitate towards the streamlined elegance of functional components or delve into the intricacies of class components, React Native offers a versatile toolkit that empowers developers to create extraordinary user experiences.

Remember, the path to mastery is paved with practice and exploration. As you embark on your React Native journey, the harmony of core and custom components will serve as your compass, guiding you towards creating exceptional mobile applications that resonate with users around the globe.

Sign up to receive a weekly recap from thoughtbot