Scribd
Upload
9 views3 pages

Task 1

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
9 views3 pages

Task 1

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/ 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