Component is a way to represent any data into a significant and organized way by putting that data into structured form. Components is the base of every react native application and development is not possible in react native without components. There are lot’s of components is already build in(Pre define) in react native and each of them supports a unique task like to show text there is TextView, to show image there is ImageView and to get data from user there is TextInput component. But when it comes to support special tasks and give the controlling in hand of developer we can create our own custom components in react native by using pre define components. So in this tutorial we would going to Create Custom Component with custom user define Props in react native android iOS application. So let’s get started .
Component created by ourselves:
- Custom Toast.
- Typing Animation.
- Swipeable CardView like Tinder.
- Custom Alert Dialog Box.
- Splash Screen.
- Material Style Star Rating Bar.
- Sliding Drawer.
- Floating Action Button.
- Image Gallery.
What is custom Props(User define) :
As we all know that props is used to decorate and customized the component with multiple parameters but there is a magic we can create our own pros with own unique name and use it our own requirement.
What we are doing in this tutorial:
In this tutorial we are creating a custom Text component with custom props, all you have to do is use the new created class as Tag(Component) and call in your default class.
Contents in this project Create Custom Component with custom user define Props in react native Android iOS app:
1. Import StyleSheet, Platform, View and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, Text } from ‘react-native’;
|
2. Import PropTypes component from prop-types library. This library is inbuilt library and comes with react native project itself, So there is no need to install any external library to use this module. PropTypes is used to create custom props and we can set default values in custom props so it the user doesn’t enter them it will call that values as default values.
|
1
|
import PropTypes from ‘prop-types’;
|
3. Create a class named as User in your main App.js file, This class is used to create custom TextView component in our project. As you can see in below code we setting up the fontSize, color and Text component value using custom props. The syntax of creating custom props is this.props.YourPropName . Now automatically a new prop named as FontSize is created in this class.
fontSize : this.props.FontSize
color : this.props.FontColor
Text value : this.props.name
|
1
2
3
4
5
6
7
8
9
10
11
|
class User extends Component {
render() {
return (
<Text style={{fontSize : this.props.FontSize, color: this.props.FontColor}}> Hello {this.props.name} ! </Text>
);
}
}
|
4. Now we have to call this created component in our main default class with its props, See the below code. As you can see in below code i have called the User component with custom props.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
export default class App extends Component{
render() {
return (
<View style={styles.MainContainer}>
<User name=‘Sam’ FontSize = {20} FontColor= ‘#FF9800’ />
<User name=‘Pankaj’ FontSize = {22} FontColor= ‘#03A9F4’ />
<User name=‘Anita’ FontSize = {24} FontColor= ‘#FFC107’ />
<User name=‘Mukesh’ FontSize = {26} FontColor= ‘#4CAF50’ />
</View>
);
}
}
|
5. Creating propTypes object with class and define our custom props data type.
|
1
2
3
4
5
6
7
|
User.propTypes =
{
name: PropTypes.string,
FontSize: PropTypes.number,
FontColor: PropTypes.string,
}
|
6. Setting up the default prop types so if the user will not enter them it will call as by default.
|
1
2
3
4
5
6
|
User.defaultProps =
{
name: “Default Name”,
FontColor: “#00E676”,
fontSize: 15,
}
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
}
});
|
8. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, Text } from ‘react-native’;
import PropTypes from ‘prop-types’;
class User extends Component {
render() {
return (
<Text style={{fontSize : this.props.FontSize, color: this.props.FontColor}}> Hello {this.props.name} ! </Text>
);
}
}
export default class App extends Component{
render() {
return (
<View style={styles.MainContainer}>
<User name=‘Sam’ FontSize = {20} FontColor= ‘#FF9800’ />
<User name=‘Pankaj’ FontSize = {22} FontColor= ‘#03A9F4’ />
<User name=‘Anita’ FontSize = {24} FontColor= ‘#FFC107’ />
<User name=‘Mukesh’ FontSize = {26} FontColor= ‘#4CAF50’ />
</View>
);
}
}
User.propTypes =
{
name: PropTypes.string,
FontSize: PropTypes.number,
FontColor: PropTypes.string,
}
User.defaultProps =
{
name: “Default Name”,
FontColor: “#00E676”,
FontSize: 15,
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
}
});
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
React Native Change Activity Actionbar Header Background Color in Android iOS Example Tutorial
React Native Set TextInput Type Style Password Android iOS Example
React Native List of All Text Component CSS Style Props Explained Example
Create PDF File using HTML Text in React Native Android iOS Example
React Native Fetch API Tutorial to Insert Into MySQL Database Using PHP iOS Android Example
