Scribd
Upload
4 views

Task 3

Uploaded by

Muhammad Noman Amir
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Task 3

Uploaded by

Muhammad Noman Amir
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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;

You might also like