Scribd
Upload
4 views3 pages

Task 1

Uploaded by

Muhammad Noman Amir

Copyright:

© All Rights Reserved
Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt

Task 1

Uploaded by

Muhammad Noman Amir
4 views3 pages

Original Title

Task-1 (2)

Copyright

© © All Rights Reserved

Available Formats

DOCX, PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

Copyright:

© All Rights Reserved
Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt
4 views3 pages

Task 1

Uploaded by

Muhammad Noman Amir

Copyright:

© All Rights Reserved
Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt
You are on page 1/ 3

Task 1: Create components

import React from 'react';


import {Text, View, Button} from 'react-native';

const App= ()=>{


let data='Details'
return(
<View>
<Text style={{fontSize:30, color:'red'}}>{data}</Text>
<UserData/>
<Company/>
</View>
);}
const UserData=()=>{
return(
<View>
<Text style={{fontSize:20, color:'green'}}>
Name: Saira
Degree: phd</Text>
</View>
);}

const Company=()=>{
return(
<View>
<Button title='button'></Button>
</View>
);
}
export default App;

Task 2: useState
import React, {useState} from 'react';
import {Text, View, Button} from 'react-native';
const App=()=>{
const [name, setName]= useState('your first name')
const fun=()=>{
setName('your second name')
console.log(setName)
}
return(
<View>
<Text style={{fontSize:20, color:'red'}}>{name}</Text>
<Button title='click' onPress={fun}></Button>
</View>
);}
export default App;

Task 3: useState, props, components


import React, {useState} from 'react';
import {View, Text, Button} from 'react-native';
const App=()=>{
const[name, setName]= useState('First Name:Saira')
let age='your age is..'
return(
<View>
<Text>{name}</Text>
<User age={age}/>
<Button title='click' onPress={()=>setName('Second Name:Mudassar')} />
</View>
);}

const User=(props)=>{
return(
<View>
<Text>{props.age}</Text>
</View>
);
}
export default App;

Task 04 Inline & Internal CSS


import React from 'react';
import {Text, View, StyleSheet} from 'react-native';

const App= ()=>{


return(
<View>
<Text style={{fontSize:18}}>Inline Css</Text>
<Text style={styles.textbox}>Internal Css</Text>
<Text style={styles.textbox2}>Second Components</Text>
</View>
);
}

const styles= StyleSheet.create({


textbox:{
fontSize:20,
color:'red'
},
textbox2:{
fontSize:30,
color:'green',
margin:2,
padding:2
}
})
export default App;

You might also like