Scribd
Upload
126 views4 pages

Understanding React Native Props

React Native props allow customization of components when they are created. Props are immutable parameters that control component properties like an image source. Components can use props to be reused with slight variations, like a Text component displaying different names passed via a "name" prop.

Uploaded by

Aizel Almonte
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
126 views4 pages

Understanding React Native Props

React Native props allow customization of components when they are created. Props are immutable parameters that control component properties like an image source. Components can use props to be reused with slight variations, like a Text component displaying different names passed via a "name" prop.

Uploaded by

Aizel Almonte
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

React Native Props

The properties of React Native components are simply pronounced as props. In React
Native, most of the components can be customized at the time of their creation with
different parameters. These parameters are known as props. They are immutable, and
they cannot be changed.

One of the examples of props is a source property if Image component which controls


the image is displayed over the device screen.

React Native Default custom Props


import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Image,
Text,
View
} from 'react-native';

export default class App extends Component<{}> {


render() {
let imagePath = { uri: 'https://facebook.github.io/react-
native/img/header_logo.png'};
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Image source={imagePath} style={{width: 250, height: 250}} />
</View>
);
}
}

const styles = StyleSheet.create({


container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#a7a6a9',
},
welcome: {
fontSize: 30,
textAlign: 'center',
margin: 20,
}
});

Output:

Using props in our own Component


We can also use props in our components. A single component can be used in many
different places in the app by making slightly different properties in each place. To
implement the props in our component, this.props is applied followed by the property.

For example, one of the basic React Native components is Text. When we create a Text
component, we can use a prop "name" as props to control its appearance. We also
apply the StyleSheet to the component which is used as our component.

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='Ashu' />
<ChildClass name='Aman' />
<ChildClass name='Max' />
</View>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontSize: 30,
}
});

// skip this line if using Create React Native App


//AppRegistry.registerComponent('MyReactNativeApp', () => ParentsClass);

Output:

You might also like