How to create Custom Component in React native?

React Native has all the components and functionality that works perfectly for app development but both Android and iOS works differently in design language. To satisfy both the design language and make both look similar to a native application, custom components play a major role in App development.

Let’s take Text field as a really good example both Android and iOS since both of them have a different style for Text Field.

Android:

iOS:

Let’s start by creating a Custom Text Field Component for both Android and iOS which will look similar in their design language.

STEP 1: Create a class for Custom component and define the props which will customize our Custom component.

1
export default class CustomTextInput extends Component {
2
   static propTypes:{
3
    containerStyle: PropTypes.style,
4
    style: PropTypes.style,
5
    autoFocus: PropTypes.bool,
6
    editbale: PropTypes.bool,
7
    textColor: PropTypes.string,
8
    onChangeText: PropTypes.func,
9
    value: PropTypes.string,
10
    placeholder: PropTypes.string,
11
  }
12
}

STEP 2: Then let’s start with the render() method

1
import React, { Component } from 'react';
2

3
import {
4
  View,
5
  Platform,
6
  TextInput
7
} from 'react-native';
8

9
import CustomTextInputStyle from './CustomTextInputStyle';
10
import { TextField } from 'react-native-material-textfield';
11

12
export default class CustomTextInput extends Component {
13

14
  render() {
15
    if(Platform.OS === 'ios') {
16
      return(
17
        <View style={[CustomTextInputStyle.mainBlock, this.props.containerStyle]}>
18
          <View style={CustomTextInputStyle.textboxBlock}>
19
            <TextInput
20
              textColor={Colors.brandText}
21
              style={[CustomTextInputStyle.textInput,this.props.style]}
22
              labelFontSize={12}
23
              autoCapitalize={false}
24
              editable={this.props.editable}
25
              value={this.props.value}
26
              onChangeText={this.props.onChangeText}
27
              placeholder={this.props.placeHolder}
28
              placeholderTextColor={Colors.placeHolderText}
29
              autoFocus={this.props.autoFocus} />
30
          </View>
31
        </View>
32
      )
33
    } else {
34
      return(
35
        <View style={[this.props.containerStyle, CustomTextInputStyle.mainBlock]}>
36
          <TextField
37
            textColor={Colors.brandText}
38
            style={[CustomTextInputStyle.textInputAndroid,this.props.style ]}
39
            labelFontSize={12}
40
            value={this.props.value}
41
            editable={this.props.editable}
42
            activeLineWidth={1}
43
            autoCapitalize={false}
44
            labelTextStyle={{fontFamily: 'Roboto-Regular'}}
45
            tintColor={Colors.brandSecondaryText}
46
            onChangeText={this.props.onChangeText}
47
            renderAccessory={this.renderIcon.bind(this)}
48
            label={this.props.placeHolder}
49
            placeholderTextColor={Colors.placeHolderText}
50
            autoFocus={this.props.autoFocus} />
51
        </View>
52
      )
53
    }
54
  }
55
}

Here the Platform object separates the code for iOS and Android but the Components are controlled by various props. With a native component, we cannot achieve Android’s material Text Field which can be solved by installing and importing “react-native-material-textfield” for android.

STEP 3: Import the Custom Text Field Component in parent component and make sure you give right path for the component.

1
import  CustomTextInput  from './CommonComponents/CustomTextInput';

STEP 4: Insert the Custom Component inside render() method of parent component where we want the display in.

1
<CustomTextInput
2
  textColor='#111111'
3
  style={style.textInput}
4
  containerStyle={style.textInputContainer}
5
  editable={true}
6
  value={this.state.username}
7
  onChangeText={this.setUsername.bind(this)}
8
  placeHolder="Username"
9
  autoFocus={true} />

Now you can run this on iOS and Android to see the difference in the text field which is usually difficult to achieve with default react native text field component. You can also create a useful custom component for Button, Text Label, Search bar etc. Make sure you utilize the advantage of reusable code to the full extent in React Native :)