Task 1: useEffect hook
import React, {useState,useEffect} from 'react';
import {Text, View, Button} from 'react-native';
const App=()=>{
const [count, setCount]= useState(0)
useEffect(()=>{
console.log('hello')
})
return(
<View>
<Text>Use Effect hooks {count}</Text>
<Button title='click' onPress={()=>setCount(count+1)}/>
</View>
);
}
export default App;
Task 2: useEffect hook ON DIFFERENT states and props like components mount and update
import React, {useEffect, useState} from 'react';
import {Text, View, Button} from 'react-native';
const App = () => {
const [count, setCount]= useState(0)
const[data, setData]= useState(100)
useEffect(()=>{
console.log(count)
},[count])
return (
<View>
<Text>{data}useEffect Hook {count}</Text>
<Button title='counter' onPress={()=>setCount(count+1)}/>
<Button title='data' onPress={()=>setData(data+1)}/>
<User info={{data, count}} />
</View>
);
};
const User=(props)=>{
console.log(props.info)
useEffect(()=>{
},[props.info.data])
return(
<View>
<Text style={{fontSize:20, color:'red'}}> DATA:{props.info.data}</Text>
</View>
);
}
export default App;
Task 3: Toggle Components
import React, {useState, useEffect} from 'react';
import {Text, View, Button} from 'react-native';
const App=()=>{
const [show, setShow]= useState(true)
return(
<View>
<Text style={{fontSize:20, color:'green'}}>Show hide compoents</Text>
<Button title='hide compnents' onPress={()=>setShow(!show)}/>
{
show ? <User/> :null
}
</View>
);
}
const User=()=>{
return(
<View>
<Text style={{fontSize:20, color:'red'}}>User Components</Text>
</View>
);
}
export default App;
Task 4: responsive UI using flex
import React, {useState, useEffect} from 'react';
import { Text, View, Button } from 'react-native';
const App = () => {
return (
<View style={{flex:1}}>
<View style={{backgroundColor:'blue', flex:2, flexDirection:'row'}}>
<View style={{flex:1, backgroundColor:'white', margin:10}}></View>
<View style={{flex:1, backgroundColor:'white', margin:10}}></View>
<View style={{flex:1, backgroundColor:'white', margin:10}}></View>
</View>
<View style={{backgroundColor:'green', flex:1}}></View>
<View style={{backgroundColor:'yellow', flex:1}}></View>
</View>
);
}
export default App;
Task 5: TouchableHighlight buttons
import React, {useState, useEffect} from 'react';
import { Text, View, Button, TouchableHighlight, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.main}>
<TouchableHighlight>
<Text style={styles.box}>Button</Text>
</TouchableHighlight>
<TouchableHighlight>
<Text style={[styles.box, styles.box1]}>Success1</Text>
</TouchableHighlight>
<TouchableHighlight>
<Text style={[styles.box, styles.box2]}>Success2</Text>
</TouchableHighlight>
</View>
);
};
const styles= StyleSheet.create({
main:{
flex:1
},
box:{
backgroundColor:'#bbb',
color:'green',
fontSize:24,
textAlign:'center',
padding:10,
margin:10,
borderRadius:10,
shadowColor:'black',
elevation:30,
shadowOpacity:1
},
box1:{
backgroundColor:'blue', fontSize:35
},
box2:{
backgroundColor:'red', fontSize:40
}
})
export default App;
Task 6: TouchableOpacity radio buttons
import React, {useState} from 'react';
import {Text, View, Button, StyleSheet, TouchableOpacity} from 'react-native';
const App= ()=>{
const [selectRadio, setSelectRadio]= useState(1);
return(
<View style={styles.main}>
<TouchableOpacity onPress={()=>setSelectRadio(1)}>
<View style={styles.wrap}>
<View style={styles.radioButton}>
{selectRadio==1 ?<View style={styles.bg}></View> : null }
</View>
<Text style={styles.radioText}>Radio 1</Text></View>
</TouchableOpacity>
<TouchableOpacity onPress={()=>setSelectRadio(2)}>
<View style={styles.wrap}>
<View style={styles.radioButton}>
{selectRadio==2 ? <View style={styles.bg}></View> : null }
</View>
<Text style={styles.radioText}>Radio 2</Text></View>
</TouchableOpacity>
</View>
);
}
const styles= StyleSheet.create({
main:{
flex:1,
alignItems:'center',
justifyContent:'center'
},
wrap:{
flexDirection:'row',
alignItems:'center',
},
bg:{
backgroundColor:'black',
height:28,
width:28,
borderRadius:20,
margin:3
},
radioText:{
fontSize:20
},
radioButton:{
height:40,
width:40,
borderColor:'black',
borderRadius:20,
borderWidth:3,
margin:10
}
})
export default App;
