React Native Components

2 min readJun 11, 2020

Here in this article, I am going to push some ready to pick components that are used quite often.

Installation

Before we begin installing the basic libraries which we are going to require to create custom components.

yarn add  react-native-responsive-screen react-native-vector-icons

Installing the react-native vector icons these days is little complex. Let me know if you face any problem I will help you out. I guess we are ready now. Let’s add some components to our app now:

Text Button Component:

Create a custom button component with TouchableOpacity and Text component.

import React from 'react';
import {Text, TouchableOpacity, StyleSheet} from 'react-native';
import {colorCode} from '../design/colorCode';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';export const Button = ({style, title, titleStyle, ...props}) => (
<TouchableOpacity {...props} style={[styles.btnBox, style]}>
  <Text style={[styles.text, titleStyle]}>{title}</Text>
</TouchableOpacity>
);const styles = StyleSheet.create({
btnBox: {
backgroundColor: colorCode.brand,
width: wp(60),
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
borderRadius: 5,
paddingVertical: 15,
marginTop: 30,
},text: {
fontWeight: 'bold',
color: colorCode.light,
fontSize: hp(2),
},
});

Icon Button Component:

Create a custom icon component using Icon from vector icons and TouchableOpacity from the react-native library.

import React from 'react';
import {TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';export default function ButtonIcon(
{style, onPress, name, size, color}) {return (
 <TouchableOpacity onPress={onPress} style={style}>
   <Icon name={name} size={size} color={color} />
 </TouchableOpacity>
);
}

Loader Component:

Create a custom loader using the Modal and ActivityIndicator component from the react-native.

import React from 'react';
import {View, Modal, ActivityIndicator, Text, StyleSheet} from 'react-native';
import {colorCode} from '../design/colorCode';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';export const Loader = (props) => {
const {loading, text} = props;return (
<Modal
 transparent
 animationType="none"
 visible={loading}
>
<View style={styles.modalBackground}>
 <ActivityIndicator
  animating={loading}
  color={colorCode.light} 
  size="large"
/>
  <Text style={styles.text}>{text}</Text>
  </View>
 </Modal>
 );
};const styles = StyleSheet.create({
modalBackground: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: colorCode.brand,
},text: {
fontSize: hp(2),
color: colorCode.light,
fontWeight: 'bold',
paddingVertical: wp(2),
},
});

TextInput Component:

This is custom any another text input, Here I am just trying to save most of the hustle at one end so that only relevant parts go into the main component.


import React from 'react';
import {TextInput, Keyboard, StyleSheet} from 'react-native';
import {styles} from '../styles';export const TextBox = ({
onChangeText,
onBlur,
value,
placeholder,
max,
instantCount,
secret
}) => {
return (
<TextInput
 onChangeText={onChangeText}
 onBlur={onBlur}
 value={value}
 onChange={instantCount}
 style={styles.input} 
 secureTextEntry={secret}
 placeholder={placeholder}
 underlineColorAndroid="transparent"
 placeholderTextColor="#000"
 multiline
 maxLength={max}
 blurOnSubmit={true}
 onSubmitEditing={() => {
 Keyboard.dismiss();}}
/>
);
};const styles = StyleSheet.create({
input: {
 width: wp(90),
 borderBottomColor: '#999',
 borderBottomWidth: 0.5,
 marginVertical: hp(2),
 padding: wp(2),
 fontSize: hp(2),
},