Skip to content

Commit da74a5a

Browse files
ShubhamBadeShubhamBade
committed
Basic component push on remote repo
1 parent b3ce272 commit da74a5a

23 files changed

+16817
-1080
lines changed

‎App.tsx‎

Lines changed: 44 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,54 @@
1-
// /**
2-
// * Sample React Native App
3-
// * https://github.com/facebook/react-native
4-
// *
5-
// * @format
6-
// */
7-
8-
// import React from 'react';
9-
// import type {PropsWithChildren} from 'react';
10-
// import {
11-
// SafeAreaView,
12-
// ScrollView,
13-
// StatusBar,
14-
// StyleSheet,
15-
// Text,
16-
// useColorScheme,
17-
// View,
18-
// } from 'react-native';
19-
20-
// import {
21-
// Colors,
22-
// DebugInstructions,
23-
// Header,
24-
// LearnMoreLinks,
25-
// ReloadInstructions,
26-
// } from 'react-native/Libraries/NewAppScreen';
27-
28-
// type SectionProps = PropsWithChildren<{
29-
// title: string;
30-
// }>;
31-
32-
// function Section({children, title}: SectionProps): JSX.Element {
33-
// const isDarkMode = useColorScheme() === 'dark';
34-
// return (
35-
// <View style={styles.sectionContainer}>
36-
// <Text>Hiiidfgdfg</Text>
37-
// </View>
38-
// );
39-
// }
40-
41-
// function App(): JSX.Element {
42-
// const isDarkMode = useColorScheme() === 'dark';
43-
44-
// const backgroundStyle = {
45-
// backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
46-
// };
47-
48-
// return (
49-
// <SafeAreaView style={backgroundStyle}>
50-
// <StatusBar
51-
// barStyle={isDarkMode ? 'light-content' : 'dark-content'}
52-
// backgroundColor={backgroundStyle.backgroundColor}
53-
// />
54-
// <ScrollView
55-
// contentInsetAdjustmentBehavior="automatic"
56-
// style={backgroundStyle}>
57-
// <Header />
58-
// <View
59-
// style={{
60-
// backgroundColor: isDarkMode ? Colors.black : Colors.white,
61-
// }}>
62-
// <Section title="Step One">
63-
// Edit <Text style={styles.highlight}>App.tsx</Text> to change this
64-
// screen and then come back to see your edits.
65-
// </Section>
66-
// <Section title="See Your Changes">
67-
// <ReloadInstructions />
68-
// </Section>
69-
// <Section title="Debug">
70-
// <DebugInstructions />
71-
// </Section>
72-
// <Section title="Learn More">
73-
// Read the docs to discover what to do next:
74-
// </Section>
75-
// <LearnMoreLinks />
76-
// </View>
77-
// </ScrollView>
78-
// </SafeAreaView>
79-
// );
80-
// }
81-
82-
// const styles = StyleSheet.create({
83-
// sectionContainer: {
84-
// marginTop: 32,
85-
// paddingHorizontal: 24,
86-
// },
87-
// sectionTitle: {
88-
// fontSize: 24,
89-
// fontWeight: '600',
90-
// },
91-
// sectionDescription: {
92-
// marginTop: 8,
93-
// fontSize: 18,
94-
// fontWeight: '400',
95-
// },
96-
// highlight: {
97-
// fontWeight: '700',
98-
// },
99-
// });
100-
101-
// export default App;
102-
103-
104-
import { View, Text } from 'react-native'
1+
import { View, Text, SectionList } from 'react-native'
1052
import React, { useEffect } from 'react'
3+
import FirstComp from './components/FirstComp'
4+
import ButtonEvent from './components/ButtonEvent'
5+
import PropsCom1 from './components/PropsCom1'
6+
import InternalStyle from './components/InternalStyle'
7+
import ExternalStyle from './components/ExternalStyle'
8+
import TextInputHandle from './components/TextInputHandle'
9+
import NativeSimpleForm from './components/NativeSimpleForm'
10+
import FlatListNative from './components/FlatListNative'
11+
import DymanicGrid from './components/DymanicGrid'
12+
import SectionListCom from './components/SectionListCom'
13+
import ClassBasedComp from './components/ClassBasedComp'
14+
import LifeCycleUseEffect from './components/LifeCycleUseEffect'
15+
import FlexArrangementComp from './components/FlexArrangementComp'
16+
import TouchableHighlightButton from './components/TouchableHighlightButton'
17+
import RadioButtonComp from './components/RadioButtonComp'
18+
import DynamicRadioOption from './components/DynamicRadioOption'
19+
import ActivityIndicatorLoader from './components/ActivityIndicatorLoader'
20+
import ModalDialogBox from './components/ModalDialogBox'
10621

10722
const App = () => {
10823
useEffect(()=>{
10924
console.log("hello")
11025
},[])
11126
return (
112-
<View>
113-
<Text>THis is First time</Text>
27+
<View style={{flex:1}}>
28+
<Text style={{fontSize:30,textAlign:'center', color:"blue",marginTop:10,fontWeight:"bold"}}>
29+
First React Native Application
30+
</Text>
31+
<Text style={{backgroundColor:"black",color:"white",textAlign:"center",margin:3}}>
32+
Lets Jump into Native World!!
33+
</Text>
34+
{/* <FirstComp/> */}
35+
{/* <ButtonEvent/> */}
36+
{/* <PropsCom1/> */}
37+
{/* <InternalStyle/> */}
38+
{/* <ExternalStyle/> */}
39+
{/* <TextInputHandle/> */}
40+
{/* <NativeSimpleForm/> */}
41+
{/* <FlatListNative/> */}
42+
{/* <DymanicGrid/> */}
43+
{/* <SectionListCom/> */}
44+
{/* <ClassBasedComp/> */}
45+
{/* <LifeCycleUseEffect/> */}
46+
{/* <FlexArrangementComp/> */}
47+
{/* <TouchableHighlightButton/> */}
48+
{/* <RadioButtonComp/> */}
49+
{/* <DynamicRadioOption/> */}
50+
{/* <ActivityIndicatorLoader/> */}
51+
<ModalDialogBox/>
11452
</View>
11553
)
11654
}

‎components/ActivityIndicatorLoader.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { View, Text, StyleSheet, ActivityIndicator, Button } from 'react-native'
2+
import React, { useState } from 'react'
3+
4+
const ActivityIndicatorLoader = () => {
5+
const[show,setShow]=useState(true)
6+
return (
7+
<View style={styles.main}>
8+
<Text style={styles.tittle}>ActivityIndicatorLoader</Text>
9+
<ActivityIndicator size={"large"} animating={show}/>
10+
<Button title='PressMe' onPress={()=>setShow(!show)}/>
11+
</View>
12+
)
13+
}
14+
15+
const styles=StyleSheet.create({
16+
main:{
17+
flex:1,
18+
alignItems:"center",
19+
},
20+
tittle:{
21+
fontSize:25,
22+
backgroundColor:"green",
23+
color:"#fff",
24+
textAlign:"center",
25+
margin:5
26+
}
27+
})
28+
29+
export default ActivityIndicatorLoader

‎components/ButtonEvent.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { View, Text, Button } from 'react-native'
2+
import React, { useState } from 'react'
3+
4+
const ButtonEvent = () => {
5+
6+
const[name,setName]=useState("Shubham");
7+
8+
const buttonEventHandle=()=>{
9+
console.warn("Hello Shubham Bade");
10+
setName("shubham bade")
11+
}
12+
13+
const handledata=(data)=>{
14+
console.warn("My Name : ",data)
15+
}
16+
return (
17+
<View style={{marginTop:10,alignItems:"center"}}>
18+
<Text style={{fontSize:25,marginBottom:5}}>Button and onPress Event</Text>
19+
<Button title='Press On Me' onPress={buttonEventHandle} color={"blue"}/>
20+
21+
<Button color={"grey"} title='Choose Me' onPress={()=>setName("Its Me")}/>
22+
<Button color={"grey"} title='See Name' onPress={()=>handledata("Bade")}/>
23+
<Text style={{fontSize:25,color:"blue",margin:5}}>{name}</Text>
24+
</View>
25+
)
26+
}
27+
28+
export default ButtonEvent

‎components/ClassBasedComp.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Button, StyleSheet, Text, TextInput, View } from 'react-native'
2+
import React, { Component } from 'react'
3+
4+
export class ClassBasedComp extends Component {
5+
constructor(){
6+
super();
7+
this.state={
8+
name:"Shubham"
9+
}
10+
}
11+
render() {
12+
return (
13+
<>
14+
<View>
15+
<Text style={styles.tittle}>ClassBased Component</Text>
16+
<TextInput placeholder='Enter Your Name Here' onChangeText={(val)=>{this.setState({name:val})}}/>
17+
<View style={{margin:5}}>
18+
<Button title='Submit' onPress={()=>{this.setState({name:"Bade"})}}></Button>
19+
</View>
20+
<ClassBasedComp2 name={this.state.name}/>
21+
</View>
22+
</>
23+
)
24+
}
25+
}
26+
27+
export class ClassBasedComp2 extends Component {
28+
render() {
29+
return (
30+
<View>
31+
<Text style={styles.tittle}>ClassBased Component2</Text>
32+
<Text>{this.props.name}</Text>
33+
</View>
34+
)
35+
}
36+
}
37+
38+
const styles=StyleSheet.create({
39+
tittle:{
40+
backgroundColor:"grey",
41+
textAlign:"center",
42+
fontSize:25,
43+
color:"white",
44+
margin:5
45+
}
46+
})
47+
export default ClassBasedComp

‎components/DymanicGrid.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { View, Text, StyleSheet, FlatList } from 'react-native'
2+
import React from 'react'
3+
4+
const DymanicGrid = () => {
5+
const users=[
6+
{
7+
id:1,
8+
name:"Shubham"
9+
},
10+
{
11+
id:2,
12+
name:"Shubham"
13+
},
14+
{
15+
id:3,
16+
name:"Shubham"
17+
},
18+
{
19+
id:4,
20+
name:"Shubham"
21+
},
22+
{
23+
id:5,
24+
name:"Shubham"
25+
},
26+
]
27+
return (
28+
<>
29+
<View>
30+
<Text style={styles.tittle}>DymanicGrid</Text>
31+
{/* <View style={{flex:1,flexDirection:"row",flexWrap:"wrap"}}>
32+
<Text style={styles.itemstyle}>Item 1</Text>
33+
<Text style={styles.itemstyle}>Item 2</Text>
34+
<Text style={styles.itemstyle}>Item 3</Text>
35+
<Text style={styles.itemstyle}>Item 4</Text>
36+
<Text style={styles.itemstyle}>Item 5</Text>
37+
<Text style={styles.itemstyle}>Item 6</Text>
38+
<Text style={styles.itemstyle}>Item 7</Text>
39+
<Text style={styles.itemstyle}>Item 9</Text>
40+
<Text style={styles.itemstyle}>Item 10</Text>
41+
</View> */}
42+
<View style={{flex:1,flexDirection:"row",flexWrap:"wrap"}}>
43+
<FlatList
44+
data={users}
45+
renderItem={({item})=><Text style={styles.itemstyle}>{item.name}</Text>}
46+
keyExtractor={item=>item.id}
47+
/>
48+
</View>
49+
</View>
50+
</>
51+
)
52+
}
53+
54+
const styles=StyleSheet.create({
55+
tittle:{
56+
fontSize:25,
57+
textAlign:"center",
58+
margin:5
59+
},
60+
itemstyle:{
61+
fontSize:25,
62+
fontWeight:"bold",
63+
backgroundColor:"blue",
64+
width:120,
65+
height:120,
66+
color:"white",
67+
margin:5,
68+
textAlign:"center",
69+
textAlignVertical:"center",
70+
borderRadius:5
71+
}
72+
})
73+
export default DymanicGrid

0 commit comments

Comments
 (0)