React Native Create Custom Component with custom user define Props

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:

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.

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.

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

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.

5. Creating propTypes object with class and define our custom props data type.

6. Setting up the default prop types so if the user will not enter them it will call as by default.

7. Creating Style.

8. Complete source code for App.js File :

Screenshot in Android device:

Custom Component with custom user define Props

Screenshot in iOS device:

2 Comments

  1. hello admin, can u make a tutorial about modal picker work cross platform and about crop image . thanks you

    • Thanks for your suggestion, but one thing what do you mean by modal picker like? please explain and i will sure post tutorial on cropping image soon 🙂 .

Leave a Reply

Your email address will not be published.