ReactNative King

 AppName: Test Component Name: App.js ------------------------------------------------------------------------------------------ import React , { Component } from 'react' import { View , Alert , StyleSheet , TouchableHighlight , Text , TouchableOpacity , TouchableNativeFeedback , SafeAreaView } from 'react-native' ; class App extends Component { onPressButton () { Alert . alert ( 'You Clicked On The Button' ) } render () { return ( < SafeAreaView > < View style = { StyleSheet . containerMAIN } > < TouchableHighlight onPress = {this . onPressButton } underlayColor = "white" > < View style = { styles . buttonALL } > < Text style = { styles . buttonTextALL } > TouchableHighlight </ Text > </ View > </ TouchableHighlight > < TouchableOpacity onPress = {this . onPressButton } > < View style ...

 App Name: Test  Component Name: App.js ------------------------------------------------------------------------------------ import React , { useState } from 'react' ; import { StyleSheet , Text , View , FlatList , } from 'react-native' ; // class App extends Component { export default function App (){ const [ people , ] = useState ([ { name : 'ReactNative King' , id : '1' }, { name : 'ReactNative King' , id : '2' }, { name : 'ReactNative King' , id : '3' }, { name : 'ReactNative Kingaun' , id : '4' }, { name : 'ReactNative King' , id : '5' }, { name : 'ReactNative King' , id : '6' }, { name : 'ReactNative King' , id : '7' }, ]); // render() { return ( < View style = { styles . container } > < FlatList keyEtractor = { ( item ) => item . i...

 App Name: Test Component Name: App.js ------------------------------------------------------------------------------------------------------------------- /* eslint-disable prettier/prettier */ import React , { Component } from 'react' ; import { StyleSheet , Button , ScrollView , Text , View , } from 'react-native' ; class App extends Component { onPressButton () { alert ( 'You Clicked ReactNative King button ' ) } render () { return ( < ScrollView horizontal = {true} style = { StyleSheet . container } > < Text style = { { fontSize : 25 , padding : 20 } } > Horizontal ScrollView </ Text > < View style = { [{ width : 230 , height : 80 , padding : 20 }] } > < Button onPress = {this . onPressButton } title = "Click Me" color = "red" /> </ View > </ ScrollView > ) } } const style...

 in this tutorial we create  vertical ScrollView. App Name: Test Component Name: App.js ----------------------------------------------------------------------------------------------------- import React , { Component } from 'react' ; import { StyleSheet , Button , ScrollView , Text , } from 'react-native' ; class App extends Component { onPressButton () { alert ( 'You Clicked ReactNative King button ' ) } render () { return ( < ScrollView > < Text style = { { fontSize : 22 } } > Welcome React Native King </ Text > < Button title = { 'Click Me' } onPress = {this . onPressButton } /> < Text style = { { fontSize : 21 } } > Welcome React Native Pess Me Button </ Text > < Button title = { 'Press Me' } onPress = {this . onPressButton } /> < Text style = { { fontSize : 22 } } > Welcome ...

App Name: Test Component Name: App.js --------------------------------------------------------------------------------------------- import React , { Component } from 'react' ; import { StyleSheet , View , Image , Text , Platform , Alert , Button } from 'react-native' ; class App extends Component { onPressbtn () { Alert . alert ( 'Welcome To React Native King' ) } onPressbtn2 () { Alert . alert ( 'Welcome To React Native King 2' ) } render () { return ( < View style = { styles . container } > < View style = { styles . btnContainer } > < Button onPress = {this . onPressbtn } title = "Press Me" /> </ View > < View style = { styles . btnContainer } > < Button onPress = {this . onPressbtn } title = "Press Me" color = "red" ...

ScrollView :- ScrollView is a Scrolling container its store multiple components and View.You Can scroll Vertical and horizontal. App Name :- Test Component Name: App.js ---------------------------------------------------------------------------------------------------------------------- import React , { Component } from 'react' import { createAppContainer } from 'react-navigation' import { createStackNavigator } from 'react-navigation-stack' import { View , Text , Button , StyleSheet , TextInput , height , width } from 'react-native' ; import { ScrollView } from 'react-native-gesture-handler' ; // import Home from './Component/Home' class App extends React . Component { render () { return ( < ScrollView > < View style = { { height : 200 , width : 200 , backgroundColor : 'green' } } ></ View > < View style = { { height : 200 , width : 200 , backgroundColo...

 FlexBox :-  React Native FlexBox is used to Provide a consistent Layout on Different Screen Size. App Name :- Test Component Name:- App.js ------------------------------------------------------------------------------------------ import React , { Component } from 'react' import { createAppContainer } from 'react-navigation' import { createStackNavigator } from 'react-navigation-stack' import { View , Text , Button , StyleSheet , TextInput } from 'react-native' ; // import Home from './Component/Home' class App extends React . Component { render () { return ( < View style = { { flex : 1 , flexDirection : 'column-reverse' } } > < View style = { { flex : 2 , backgroundColor : 'green' } } ></ View > < View style = { { flex : 3 , backgroundColor : 'red' } } ></ View > < View style = { { flex : 3 , backgroundColor : 'yellow' }...