Props


Most components can be customized when they are created, with different parameters. These creation parameters are called props. For example, one basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows.

Its is similar to attribute in Html. //importing from react dependencies import React, { Component } from 'react'; //import image import { AppRegistry, Image } from 'react-native'; //defining public export default class Bananas extends Component { render() { let pic = { uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; //return jsx return ( <Image source={pic} style={{width: 193, height: 110}}/> ); } } // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => Bananas); Try this code here..

State


The data inside React Components is managed by state and props. In this chapter, we will talk about state. Difference between State and Props

The state is mutable while props are immutable. This means that state can be updated in the future while props cannot be updated. Using State This is our root component. We are just importing Home which will be used in most of the chapters. NOTE − This file won't change during the course of this tutorial, so we will leave it out in the future.

import React, { Component } from 'react'; import { AppRegistry,Text, View } from 'react-native'; import Home from './src/components/home/Home.js' class reactTutorialApp extends Component { state={ new: 'iam akash kumar' //state key is new } render() { return ( <View> <Text>{this.state.new}</Text> //text is iam akash kumar </View> ); } } export default reactTutorialApp AppRegistry.registerComponent('reactTutorialApp', () ⇒ reactTutorialApp); Try this code here..

setState


Now times to Update the state using setState import React, { Component } from 'react'; import { AppRegistry,Text, View } from 'react-native'; import Home from './src/components/home/Home.js' class reactTutorialApp extends Component { state={ new: 'iam akash kumar' //state key is new } updateState = () ⇒ this.setState({ new: 'The state is updated' }) render() { return ( <View> <Button onPress={this.updateState}>click</Button> //updating the state <Text>{this.state.new}</Text> //text is iam akash kumar </View> ); } } export default reactTutorialApp AppRegistry.registerComponent('reactTutorialApp', () ⇒ reactTutorialApp); Try this code here..
CONTENTS