what is Props In react Native

Props are used to transfer data from parent to child component. Props are read only. Child component can only get the props passed from parent using this.props.keyName. Using props one can make his component reusable.

Props, or properties, are data that is passed to child components in a React application. React components render UI elements based on their props and their internal state.

The props that a component takes (and uses) defines how it can be controlled from the outside.PropTypes The prop-types package allows you to feature runtime type checking to your component that ensures the kinds of the props passed to the component are correct. as an example , if you do not pass a reputation or isYummy prop to the component below it’ll throw a mistake in development mode. In production mode the prop type checks aren’t done.

Defining propTypes can make your component more readable and maintainable

import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { AppRegistry, Text, View } from 'react-native';
 import styles from './styles.js';
 class Recipe extends Component 
{ static propTypes = { name: PropTypes.string.isRequired, isYummy: PropTypes.bool.isRequired } 
render() 
{ return ( {this.props.name}
{this.props.isYummy ? THIS RECIPE IS YUMMY : null}
) }
 }
 AppRegistry.registerComponent('Recipe', () => Recipe); 


// Using the component
<Recipe name="Pancakes" isYummy={true} />

If you like this post, don’t forget to share 🙂

This article is written by our awesome writer
Comments to: PropTypes in react native

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password