Skip to content

Commit 1a08327

Browse files
coolb0ycoolb0y
committed
components
0 parents  commit 1a08327

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+2273
-0
lines changed

‎13.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
import React,{useState} from 'react';
3+
4+
import {
5+
Button,
6+
Text,TextInput,
7+
View,StyleSheet
8+
} from 'react-native';
9+
10+
11+
const App = () => {
12+
const [name,setName]=useState('');
13+
14+
return (
15+
<View>
16+
17+
<Text style={{fontSize:30}}>Props in React js</Text>
18+
<Text style={{fontSize:30}}>Your Name is:{name}</Text>
19+
<TextInput
20+
style={{fontSize:18,color:'blue',borderWidth:2,borderColor:'blue',margin:10,padding:10,borderRadius:10}}
21+
placeholder="Enter Your Name" value={name} onChangeText={(text)=>setName(text)}/>
22+
<Button title='Clear Input Value' onPress={()=>setName('')} />
23+
</View>
24+
);
25+
};
26+
27+
28+
29+
30+
export default App;

‎14.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
import React,{useState} from 'react';
3+
4+
import {
5+
Button,
6+
Text,TextInput,
7+
View,StyleSheet
8+
} from 'react-native';
9+
10+
11+
const App = () => {
12+
const [name,setName]=useState('');
13+
const [email,setEmail]=useState('');
14+
const [password,setPassword]=useState('');
15+
const [display,setDisplay]=useState(false);
16+
return (
17+
<View>
18+
19+
<Text style={{fontSize:30}}>Props in React js</Text>
20+
<Text style={{fontSize:30}}>Your Name is:{name}</Text>
21+
<TextInput
22+
style={{fontSize:18,color:'blue',borderWidth:2,borderColor:'blue',margin:10,padding:10,borderRadius:10}}
23+
placeholder="Enter Your Name" value={name} onChangeText={(text)=>setName(text)}/>
24+
<TextInput
25+
style={{fontSize:18,color:'blue',borderWidth:2,borderColor:'blue',margin:10,padding:10,borderRadius:10}}
26+
placeholder="Enter Your Email" value={email} onChangeText={(text)=>setEmail(text)}/>
27+
<TextInput
28+
style={{fontSize:18,color:'blue',borderWidth:2,borderColor:'blue',margin:10,padding:10,borderRadius:10}}
29+
placeholder="Enter Your Password" secureTextEntry={true} value={password} onChangeText={(text)=>setPassword(text)}/>
30+
31+
<Button title='View Value' onPress={()=>setDisplay(!display)} />
32+
<Button title="Reset Form" onPress={()=>{setName('');setEmail('');setPassword(''); setDisplay(false);}}/>
33+
<View>
34+
{display?<View>
35+
<Text style={{fontSize:15}}>Your Email is:{email}</Text>
36+
<Text style={{fontSize:15}}>Your Password is:{password}</Text>
37+
<Text style={{fontSize:15}}>Your Name is:{name}</Text>
38+
</View>:null}
39+
</View>
40+
</View>
41+
);
42+
};
43+
44+
45+
46+
47+
export default App;

‎15_flatlist.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { useState } from 'react';
2+
import { Button, Text, TextInput, View, StyleSheet, FlatList } from 'react-native';
3+
4+
const App = () => {
5+
const users = [
6+
{ name: 'Ankur', id: 1 },
7+
{ name: 'Singh', id: 2 },
8+
{ name: 'Golu', id: 3 },
9+
{ name: 'Sam', id: 4 },
10+
];
11+
12+
return (
13+
<View>
14+
<Text style={{ fontSize: 30 }}>Flatlist</Text>
15+
<FlatList
16+
data={users}
17+
renderItem={({ item }) => (
18+
<Text style={styles.item}>{item.name}</Text>
19+
)}
20+
keyExtractor={
21+
(item) => item.id
22+
}
23+
/>
24+
</View>
25+
);
26+
};
27+
28+
const styles = StyleSheet.create({
29+
item:{
30+
fontSize:20,
31+
padding:10,
32+
color:'white',
33+
backgroundColor:'blue',
34+
margin:10,
35+
borderWidth:1,
36+
borderColor:'black',
37+
borderRadius:10
38+
}
39+
})
40+
41+
export default App;

‎16_mapfunction.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useState } from 'react';
2+
import { Button, Text, TextInput,ScrollView, View, StyleSheet, FlatList } from 'react-native';
3+
4+
const App = () => {
5+
const users = [
6+
{ name: 'Ankur', id: 1 },
7+
{ name: 'Singh', id: 2 },
8+
{ name: 'Golu', id: 3 },
9+
{ name: 'Samu', id: 5 },
10+
{ name: 'Samu', id: 6 },
11+
{ name: 'Samu', id: 7 },
12+
{ name: 'Samu', id: 8 },
13+
{ name: 'Samu', id: 9 },
14+
{ name: 'Samu', id: 10 },
15+
{ name: 'Samu', id: 11 },
16+
{ name: 'Samu', id: 12 },
17+
{ name: 'Samu', id: 13 },
18+
{ name: 'Samu', id: 14 },
19+
{ name: 'Samu', id: 15 },
20+
{ name: 'Samu', id: 16 },
21+
{ name: 'Samu', id: 17 },
22+
{ name: 'Samu', id: 18 },
23+
{ name: 'Samu', id: 19 },
24+
{ name: 'Samu', id: 20 },
25+
26+
];
27+
28+
return (
29+
<View>
30+
<Text style={{ fontSize: 30 }}>Map Function</Text>
31+
<ScrollView style={{marginBottom:60}}>
32+
{
33+
users.map((item) => {
34+
return <Text style={styles.item} key={item.id}>{item.name}</Text>
35+
})
36+
}
37+
</ScrollView>
38+
</View>
39+
);
40+
};
41+
42+
const styles = StyleSheet.create({
43+
item:{
44+
fontSize:20,
45+
padding:10,
46+
color:'white',
47+
backgroundColor:'blue',
48+
margin:10,
49+
borderWidth:1,
50+
borderColor:'black',
51+
borderRadius:10
52+
}
53+
})
54+
55+
export default App;

‎17_grid_flex wrap.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { useState } from 'react';
2+
import { Button, Text, TextInput,ScrollView, View, StyleSheet, FlatList } from 'react-native';
3+
4+
const App = () => {
5+
6+
const users= [
7+
{name:'Ankur',id:1},
8+
{name:'Ankur',id:2},
9+
{name:'Ankur',id:3},
10+
{name:'Ankur',id:4},
11+
{name:'Ankur',id:5},
12+
{name:'Ankur',id:6},
13+
{name:'Ankur',id:7},
14+
{name:'Ankur',id:8},
15+
{name:'Ankur',id:9},
16+
{name:'Ankur',id:10},
17+
{name:'Ankur',id:11},
18+
{name:'Ankur',id:12},
19+
{name:'Ankur',id:13},
20+
{name:'Ankur',id:14},
21+
{name:'Ankur',id:15},
22+
{name:'Ankur',id:16},
23+
{name:'Ankur',id:17},
24+
{name:'Ankur',id:18},
25+
{name:'Ankur',id:19},
26+
27+
28+
]
29+
30+
return (
31+
<View>
32+
<Text style={{ fontSize: 30 }}>Map Function</Text>
33+
<ScrollView>
34+
<View style={{flex:1,flexDirection:'row',flexWrap:'wrap'}}>
35+
36+
{
37+
users.map((item)=>{
38+
return(
39+
<Text style={styles.item}>{item.name}</Text>
40+
)
41+
})
42+
}
43+
44+
</View>
45+
</ScrollView>
46+
</View>
47+
);
48+
};
49+
50+
const styles = StyleSheet.create({
51+
item:{
52+
fontSize:25,
53+
backgroundColor:'yellow',
54+
color:'red',
55+
margin:5,
56+
padding:5,
57+
width:120,
58+
height:120,
59+
textAlignVertical:'center',
60+
textAlign:'center'
61+
62+
}
63+
})
64+
65+
export default App;

‎18_flatlist-with-dynamic-componet.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import { Text, View, FlatList } from 'react-native';
3+
import UserData from './components/UserData';
4+
5+
const App = () => {
6+
7+
const users= [
8+
{name:'Ankur',id:1},
9+
{name:'Ankur',id:2},
10+
{name:'Ankur',id:3},
11+
{name:'Ankur',id:4},
12+
{name:'Ankur',id:5},
13+
{name:'Ankur',id:6},
14+
{name:'Ankur',id:7},
15+
{name:'Ankur',id:8},
16+
{name:'Ankur',id:9},
17+
{name:'Ankur',id:10},
18+
{name:'Ankur',id:11},
19+
{name:'Ankur',id:12},
20+
{name:'Ankur',id:13},
21+
{name:'Ankur',id:14},
22+
{name:'Ankur',id:15},
23+
{name:'Ankur',id:16},
24+
{name:'Ankur',id:17},
25+
{name:'Ankur',id:18},
26+
{name:'Ankur',id:19},
27+
28+
29+
]
30+
31+
return (
32+
<View>
33+
<Text style={{ fontSize: 30 }}>Map Function</Text>
34+
<FlatList
35+
data={users}
36+
renderItem={({item})=>
37+
<UserData name={item.name} id={item.id}/>
38+
39+
} />
40+
41+
</View>
42+
);
43+
};
44+
45+
46+
47+
export default App;

‎19_sectionlist.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import { Text, View, FlatList,SectionList } from 'react-native';
3+
4+
5+
const App = () => {
6+
7+
const users= [
8+
{name:'Ankur',id:1,data:['phone','laptop','tv']},
9+
{name:'Ankur',id:2,data:['phone','laptop','tv'] },
10+
{name:'Ankur',id:3,data:['phone','laptop','tv'] },
11+
{name:'Ankur',id:4,data:['phone','laptop','tv'] },
12+
{name:'Ankur',id:5,data:['phone','laptop','tv'] },
13+
{name:'Ankur',id:6,data:['phone','laptop','tv'] },
14+
{name:'Ankur',id:7,data:['phone','laptop','tv'] },
15+
{name:'Ankur',id:8,data:['phone','laptop','tv'] },
16+
{name:'Ankur',id:9,data:['phone','laptop','tv'] },
17+
{name:'Ankur',id:10,data:['phone','laptop','tv'] },
18+
{name:'Ankur',id:11,data:['phone','laptop','tv'] },
19+
{name:'Ankur',id:12,data:['phone','laptop','tv'] },
20+
21+
22+
]
23+
24+
return (
25+
<View>
26+
<Text>SectionList</Text>
27+
<SectionList
28+
sections={users}
29+
renderItem={({item})=>{
30+
return(
31+
<Text style={{fontSize:20,marginLeft:10}}>{item}</Text>
32+
33+
)
34+
}}
35+
renderSectionHeader={({section:{name}})=>(
36+
<Text style={{fontSize:30,color:'red'}}>{name}</Text>
37+
)}
38+
/>
39+
40+
</View>
41+
);
42+
};
43+
44+
45+
46+
export default App;

‎20_class_component.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { Component } from 'react';
2+
import { Button, Text, View, FlatList,SectionList,TextInput } from 'react-native';
3+
import Student from './components/Student';
4+
5+
6+
class App extends Component{
7+
fruit = ()=>{
8+
console.warn("Apple");
9+
}
10+
11+
render(){
12+
return (
13+
<View>
14+
<Text style={{fontSize:30, color:'red'}}>React Native</Text>
15+
<TextInput placeholder="Enter Your Name" />
16+
<Button title="Press me" onPress={this.fruit}/>
17+
<Student />
18+
</View>
19+
)
20+
}
21+
}
22+
23+
24+
25+
export default App;

‎22_class_component_super_thi.state.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { Component } from 'react';
2+
import { Button, Text, View, FlatList,SectionList,TextInput } from 'react-native';
3+
import Student from './components/Student';
4+
5+
6+
class App extends Component{
7+
constructor(){
8+
super();
9+
this.state={
10+
name:"ankur",
11+
age:20,
12+
}
13+
}
14+
15+
updateName(val){
16+
this.setState({name:val})
17+
}
18+
19+
render(){
20+
return (
21+
<View>
22+
<Text style={{fontSize:30, color:'red'}}>{this.state.name}</Text>
23+
<TextInput placeholder="Enter Your Name"
24+
onChangeText={(text)=>this.updateName(text)}/>
25+
<Button title="Press me" />
26+
<Student name={this.state.name}/>
27+
</View>
28+
)
29+
}
30+
}
31+
32+
33+
34+
export default App;

0 commit comments

Comments
 (0)