react native-tutorial

React Native Props

React Native components’ properties are referred to as props. Most components in React Native can be altered when they are created using various parameters. Proper names for these variables are. They cannot be altered since they are immutable.

One example of a prop is a source property if an image component, which manages the display of the picture on the device screen, is used.

Making use of props in our own component

In our components, we can also use props. By giving each location slightly different attributes, a single component can be utilised in numerous locations throughout the app. This.props is applied first, then the property, to implement the props in our component.

Text is one of the fundamental React Native components, as an illustration. A prop named “name” can be used as a prop when creating a Text component to modify how it appears. We also use the component that serves as our component to apply the StyleSheet.

App.js

import React, { Component } from 'react';  
import { StyleSheet, Text, View } from 'react-native';  
  
class ChildClass extends Component {  
  render() {  
    return (  
        <View style={{alignItems: 'center'}}>  
          <Text style={styles.welcome}>Hello {this.props.name}!</Text>  
        </View>  
    );  
  }  
}  
export default class ParentsClass extends Component {  
  render() {  
    return (  
        <View style={{alignItems: 'center'}}>  
          <ChildClass name='' /> 
          <ChildClass name='Learn' />  
          <ChildClass name='Code' />  
          <ChildClass name='Zone' />  
        </View>  
    );  
  }  
}  
const styles = StyleSheet.create({  
   welcome: {  
    fontSize: 30,  
  }  
});  

Output:

RECOMMENDED ARTICLES





Leave a Reply

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