Custom Component in React Native

React Native Component

React native uses a set of JavaScript and JSX (an XML-like syntax) to create components for user interfaces as a function of the current application state. In the past, it was popular to use other technologies such as Cordova, Titanium etc., which provided a platform to build mobile apps using web technologies such as HTML, CSS and JavaScript.
Unlike apps written on Cordova or Titanium, which create UI elements by wrapping the content in a WebView, React Native uses JavaScript components that render as native UI widgets. This offers a real native experience, while most of your development work is done just once for multiple platforms such as iOS, Android and Windows.
It’s important to note that even with Cordova we can access native APIs, however the core will still be HTML and JavaScript rendered in a web view. With React Native on the other hand, JavaScript components are rendered as native widgets, invoking the actual API on the host platform using an abstraction layer called Bridge. This provides a high performance advantage.

Creating and exporting custom components

A reusable component can be built by importing the necessary native component such as View, Text, Image etc, as shown below. We will save it in a folder ‘Components’ and save as customtext.js

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

A class can be exported as shown below. We can reuse this CustomText component in other sections where required.

export default class CustomText extends React.Component { 
  render() { 
    return (
      <View> 
      <Text style={{color: 'red',fontWeight: 'bold'}}>Click Me</Text>
      </View> 
    );
  }
}

Importing Components :

import React from "react";
import CustomText from "../../Components/customtext";

export default class MainPage extends React.Component { 
  render() { 
    return (
      < CustomText />
    );
  }
}

Passing Props dynamically to the custom component :

We can create dynamic components by passing a string, array or any object, similar to passing objects in functions in other languages. The attributes of components can be passed in Props.

Let’s consider the example of passing a dynamic text property and onClick property to our CustomText component. We have to import PropTypes for passing properties and TouchableOpacity for passing the onClick event. This Props is used to decorate and customize the component with multiple parameters.

import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import PropTypes from 'prop-types';

export default class CustomText extends React.Component { 
  constructor(props) {
    super(props);
  }
  render() { 
    return (
      <TouchableOpacity onPress={this.props.onPress}>
      <View>
      <Text style={{color: 'red',fontWeight: 'bold'}}> {this.Props.title}
      </Text> 
      </View> 
      </TouchableOpacity>
    );
  }
}

CustomText.propTypes = { title: PropTypes.string.isRequired, onPress: PropTypes.func.isRequired };

By defining our required propTypes, we are telling any new instance of our CustomText component that it requires a content property whose value is of the type “string” and an onPress property whose values can be of the type function. The render method in the above code sample will output a view in CustomText Component. We can even add child components to our CustomText Component.

It can be imported as:

import React from "react";
import CustomText from "../../Components/customtext";

export default class MainPage extends React.Component { 
  render() { 
    return (
      < CustomText onPress={this.onPress} title=’CustomTitle’ />
    );
  }

  onPress () {
    //some function 
    console.log('Text clicked');
  }
}

React Native provides a wealth of native UI widgets, with functionality and custom components available from third-party libraries – which generally work straight away. However sometimes we may need a wrapper, which can’t be found in the core component such as view, button. Thus a custom component can be created by using the existing parent component and adding additional features. It can be easily achieved by wrapping the existing component for seamless integration.

If you’re considering a React Native app for your business and would like to talk through your options, get in touch with us and we’d be happy to help.