React Native Custom Components

You might ask yourself “why would I want to create a custom component, React Native has everything I need!” — and the answer is simple:

You’ll need one in about… 5 minutes

React Native may supply you with an abundance of functionality and components that work right off the bat, however nothing compares to creating your own hand-crafted piece of the puzzle.

If you’re now asking “okay, but I don’t know how to create a custom component… is this some black voodoo magic?” — fear not, I got you covered.

Let’s split this guide, if you want to call it that; into edible chunks and make you a black voodoo magic, hand-crafting component wizard.

Step numero one

Create a file for your custom component, we’ll call ours custom.text.js — and then import it into its parent component/screen.

import CustomText from 'path/to/custom.text';

Step numero two

Import React and the two components we’ll be merging together (Text and TouchableOpacity) to make our CustomText component:

import PropTypes from ‘prop-types’;
import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';

Step numero three

Lets create our class (which of course extends React Native’s component class), and define the props that we want to be passed to our custom component:

class CustomText extends Component {
  static propTypes = {
    content: PropTypes.string.isRequired,
    textStyles: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.number,
      PropTypes.shape({}),
    ]).isRequired,
    buttonStyles: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.number,
      PropTypes.shape({}),
    ]).isRequired,
  }
}
export default CustomText;

Step numero four

Next we’ll want to insert our render() method, this is where all of our magic happens.

class CustomText extends Component {
  static propTypes = {
    content: PropTypes.string.isRequired,
    textStyles: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.number,
      PropTypes.shape({}),
    ]).isRequired,
    buttonStyles: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.number,
      PropTypes.shape({}),
    ]).isRequired,
  }
  render = () => {
    const { textStyles, buttonStyles, content } = this.props;
    
    return (
      <TouchableOpacity style={buttonStyles}>
        <Text style={textStyles}>{content}</Text>
      </TouchableOpacity>
    );
  }
}
export default CustomText;

An explanation

propTypes

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 a textStyles/buttonStyles property whose values can be of the type array, number OR object.

If you’re wondering why we have so many possibilities of the type of prop that either textStyles or buttonStyles might evaluate to, there’s a rather complex explanation: You can assign multiple styles to a property (array), a single style (shape), and the style number is passed via reference on a single, non-array wrapped style.

const { textStyles, buttonStyles, content } = this.props;

Here we’re defining a constant which assigns any property that exists in both the curly braces AND this.props to a singular variable.

textStyles is now equal to this.props.textStyles

Step numero five

We can now insert our component into the render method of the parent we want it to display in:

<CustomText
  buttonStyles={styles.buttonStyles}
  textStyles={styles.textStyles}
  content={'This is some custom text'}
/>

Step numero six (optional)

If you’d like to add children to your custom component and extend upon it, you can simply call this.props.children which will give you either the single value of your components children (in our case a string) or an array of components that you’d like to embed.

<CustomText
  buttonStyles={styles.buttonStyles}
  textStyles={styles.textStyles}>
    This is some custom text
</CustomText>
import PropTypes from ‘prop-types’;
import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';
class CustomText extends Component {
  static propTypes = {
    children: PropTypes.string.isRequired,
    textStyles: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.number,
      PropTypes.shape({}),
    ]).isRequired,
    buttonStyles: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.number,
      PropTypes.shape({}),
    ]).isRequired,
  }
render = () => {
    const { textStyles, buttonStyles, children } = this.props;
    return (
      <TouchableOpacity style={buttonStyles}>
        <Text style={textStyles}>{children}</Text>
      </TouchableOpacity>
    );
  }
}
export default CustomText;

Voilà! You now have a custom component that accepts styling and children!

If you want a bit more of a challenge, make your custom component accept an onPress event and do something magical with it — happy coding.

Need somewhere to host your API or application? I highly recommend Digital Ocean — sign up here https://m.do.co/c/5c662456a719