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' }...

 App Name :- Test Component Name:- App.js -------------------------------------------------------------------------------------------------- import React , { Component } from 'react' import { View , Text , Button , StyleSheet } from 'react-native' ; import Home from './Component/Home' class App extends Component { render () { return ( < View > < Text style = { CustomeStyle . red } > ReactNative King </ Text > </ View > ) } } const CustomeStyle = StyleSheet . create ({ red : { fontSize : 30 , color : 'red' , backgroundColor : 'green' } }) export default App ;

 App Name :-   Test  Component Name:- App.js Using inline Style You can change Text color so many things like background color  --------------------------------------------------------------------------------------- import React , { Component } from 'react' import { View , Text , Button , } from 'react-native' ; class App extends Component { render () { return ( < View > < Text style = { { color : 'red' } } > ReactNative King </ Text > </ View > ) } } export default App ;

 App name:- Test Component name:- App.js & Home.js What is State:- State can change and State work internal in component. ---------------------------------------------------- App.js --------------------------------------------------------------- /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React , { Component } from 'react' import { View , Text , Button , } from 'react-native' ; import Home from './Component/Home' class App extends Component { constructor () { super (); this . state ={ data : "This is state data" } } render () { return ( < View > < Text > Class Component </ Text > < Text > { this . state . data } </ Text > < Button title = "Update State" onPress = { () => { this . setState ({ data : "new Button Data" })} } /...