Krishan Dev Personal Blog

 App.js: import React from 'react' ; import { StyleSheet ,   View , Button , Alert } from 'react-native' ; const App = () => {     return (         < View style = { { flex : 1 } } >             < View >                 < Button title = "Single Alert" onPress = { () => alert ( 'Alert Tutorial by Krishan' ) } />             </ View >             < View style = { { marginTop : 10 } } >                 < Button title = 'Two Alert' onPress = { () => Alert . alert ( 'Alert Title' , "Alert Description" , [                     {                         text : 'Yes' ,                         onPress : () => console . log ( 'Yes Pressed !' )                     },                     {                         text : 'No' ,                         onPress : () => console . log ( 'No Pressed !' )                     }                 ]) } /

 App.js: import React from 'react' ; import { StyleSheet , Text , ImageBackground } from 'react-native' ; const bgImg ={ uri : 'https://reactjs.org/logo-og.png' } const bgImg1 = require ( './src/assets/images/sky.webp' ) const App = () => {     return (         < ImageBackground blurRadius = { 50 } source = { bgImg } style = { styles . container } >             < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' } } > ActivityIndicator </ Text >                     </ ImageBackground >     ) } const styles = StyleSheet . create ({     container : {         flex : 1 ,     } }) export default App ;

 App.js: import React from 'react' ; import { View , StyleSheet , Button , Alert , Text , ActivityIndicator } from 'react-native' ; const App = () => {     return (         < View >             < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' } } > ActivityIndicator </ Text >             < ActivityIndicator size = "large" color = "red" />         </ View >     ) } export default App ;

 App.js: import React from 'react' ; import { Text , TouchableHighlight , TouchableOpacity , TouchableWithoutFeedback , View } from 'react-native' ; const App =() => {     return (         < View >             < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' } } > React Native Touchable Component </ Text >             < TouchableHighlight onPress = { () => console . log ( 'Highlighted Clicked' ) } >                 < View style = { { width : 500 , height : 100 , backgroundColor : 'green' } } >                     < Text style = { { fontSize : 30 , textAlign : 'center' , verticalAlign : 'center' } } > TouchableHighlight </ Text >                 </ View >             </ TouchableHighlight >             < TouchableOpacity onPress = { () => console . log ( 'TouchableOpacity Clicked' ) } >                 <

 App.js: import React from 'react' ; import { View , StyleSheet , Text , Image } from 'react-native' ; const App =() => {     return (         < View >             < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' } } > Image Component in React Native </ Text >             < Image source = { { uri : 'https://images.unsplash.com/photo-1674582221299-3a930cbda1db?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80' , width : 500 , height : 200 } } />                   < Image source = { require ( './src/assets/images/sky.webp' ) } />         </ View >     ) } export default App ;

 App.js: import React , { Component } from 'react' ; import { Button , Text , TextInput , View } from 'react-native' ; import Student from './components/Student' ; class App extends Component {     constructor (){         super ();         this . state ={             name : "Krishan" ,         }     }     updateName ( val ){         this . setState ({ name : val })     }     fuit = () => {         console . warn ( "Apple" );     }     render () {         return (             < View >                 < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' , marginBottom : 10 } } > Class Component { this . state . name } </ Text >                 < TextInput style = { { borderColor : 'black' , borderWidth : 5 , marginBottom : 10 } } placeholder = 'Enter text' onChangeText = { ( text ) =>this . updateName ( text ) } />                 &

 App.js: import React , { Component } from 'react' ; import { Button , Text , TextInput , View } from 'react-native' ; import Student from './components/student' ; class App extends Component {     fuit = () => {         console . warn ( "Apple" );     }     render () {         return (             < View >                 < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' , marginBottom : 10 } } > Class Component </ Text >                 < TextInput style = { { borderColor : 'black' , borderWidth : 5 , marginBottom : 10 } } placeholder = 'Enter text' />                 < Button style = { { marginBottom : 10 } } title = 'Press Me' onPress = {this . fuit } ></ Button >                 < Student />             </ View >         )     } } export default App ; ------------------------ Student.js import Reac

 App.js: import React from 'react' ; import { SectionList , Text , View } from 'react-native' ; const App =() => {     users =[         {             id : 1 ,             name : "Krishan" ,             data : [ "Angular" , "HTML" , "CSS" , "JavaScript" ]         },         {             id : 1 ,             name : "Krishan" ,             data : [ "HTML" , "Angular" ,   "CSS" , "JavaScript" ]         },         {             id : 1 ,             name : "Krishan" ,             data : [ "CSS" , "Angular" , "HTML" ,   "JavaScript" ]         }     ]     return (         < View >             < Text style = { { fontSize : 25 , backgroundColor : 'blue' , color : 'white' } } > React Native | Section List with example </ Text > < SectionList sections = { users } renderItem = { ({ item

 App.js: import React from 'react' ; import { FlatList , StyleSheet , Text , View } from 'react-native' ; const App = () => {     const users = [         {             id : 1 ,             name : "Krishan" ,             email : "krishan@gmail.com"         },         {             id : 1 ,             name : "Ram" ,             email : "ram@gmail.com"         },         {             id : 1 ,             name : "Shyam" ,             email : "shyam@gmail.com"         }     ]     return (         < View >             < Text style = { { fontSize : 30 , backgroundColor : 'blue' , color : 'white' } } > Component in Loop with Flatlist </ Text >             < FlatList                 data = { users }                 renderItem = { ({ item }) => < UserData item = { item } /> }             />         </ View >     ); }; const UserDat

 App.js: import React from 'react' ; import { StyleSheet , Text , View } from 'react-native' ; const App = () => {     const users = [         {             id : 1 ,             name : "Kavita"         },         {             id : 2 ,             name : "Kavita"         },         {             id : 3 ,             name : "Kavita"         },         {             id : 4 ,             name : "Kavita"         },         {             id : 5 ,             name : "Kavita"         },         {             id : 6 ,             name : "Kavita"         },         {             id : 7 ,             name : "Kavita"         },         {             id : 8 ,             name : "Kavita"         },         {             id : 9 ,             name : "Kavita"         },         {             id : 10 ,             name : "Kavita"         },         {    

 App.js: import React from 'react' ; import { ScrollView , StyleSheet , Text , View } from 'react-native' ; const App =() => {     const users =[         {             id : 1 ,             name : "Kavita" ,         },         {             id : 2 ,             name : "Diksha" ,         },         {             id : 3 ,             name : "Krishan" ,         },         {             id : 4 ,             name : "Bhavesh" ,         },         {             id : 5 ,             name : "Bhavesh" ,         },         {             id : 6 ,             name : "Raj" ,         },         {             id : 7 ,             name : "Ram" ,         },         {             id : 8 ,             name : "Shyam" ,         },         {             id : 9 ,             name : "Brijesh" ,         },         {             id : 10 ,             name : "Mohan" ,         }     ]     r