Scribd
Upload
15 views5 pages

Task 3

Uploaded by

Muhammad Noman Amir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views5 pages

Task 3

Uploaded by

Muhammad Noman Amir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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