Image Components


There are so many components in react library and you can create your own components

Here are some basics components

import React, { Component } from 'react'; import { AppRegistry, Image } from 'react-native'; export default class Bananas extends Component { render() { let pic = { uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return ( //image components <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..

Text Input


import React, { Component } from 'react'; import { KeyBoard,AppRegistry,TextInput, 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> <TextInput placeholder="name" placeholderColor:'red' autofocus returnKey='next' onblur=KeyBoard.dismiss> </TextInput>> </View> ); } } export default reactTutorialApp AppRegistry.registerComponent('reactTutorialApp', () ⇒ reactTutorialApp); Try this code here..

ScrollView


The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property). import React, { Component } from 'react'; import { ScrollView,AppRegistry,Button,Text, View } from 'react-native'; import Home from './src/components/home/Home.js' class reactTutorialApp extends Component { state={ new: 'iam akash kumar' } updateState = () ⇒ this.setState({ new: 'The state is updated' }) render() { return ( <ScrollView> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> <Button onPress={this.updateState}>click</Button> </ScrollView> ); } } export default reactTutorialApp AppRegistry.registerComponent('reactTutorialApp', () ⇒ reactTutorialApp); Try this code here..

Buttons


import React, { Component } from 'react'; import { AppRegistry,Text,Button, View } from 'react-native'; import Home from './src/components/home/Home.js' class reactTutorialApp extends Component { state={ new: 'iam akash kumar' } updateState = () ⇒ this.setState({ new: 'The state is updated' }) render() { return ( <View> //calling function on onPress <Button onPress={this.updateState}>click</Button> //Buttons </View> ); } } export default reactTutorialApp AppRegistry.registerComponent('reactTutorialApp', () ⇒ reactTutorialApp); Try this code here..

Events


So now we know how to expose native view components that we can control easily from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the getId() method.


List of some basic events



onChangeText
onSubmitEditing
onPress
onFocus
onblur
CONTENTS