├── Button
    ├── AppButton.js
    └── README.md
├── CreatePdf
    ├── ExportPdf.js
    └── README.md
├── Header
    ├── AppHeader.js
    └── README.md
├── Linking
    ├── README.md
    └── index.js
├── List
    ├── README.md
    └── VirtualizedList.tsx
├── ModalView
    ├── ModalView.js
    └── README.md
├── README.md
└── screenshots
    ├── header1.jpg
    ├── header2.jpg
    ├── header3.jpg
    └── rounded_button.png


/Button/AppButton.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native'
 3 | import Feather from 'react-native-vector-icons/Feather';
 4 | import LinearGradient from 'react-native-linear-gradient';
 5 | 
 6 | /**
 7 |  * can use 
 8 |  * <Text style={{ fontSize: iconSize, color: iconColor }}>+</Text>
 9 |  * at the place of Feather icon*/
10 | 
11 | export const RoundButton = ({ colors, onPress, style, iconSize = 30, bottom = 0, right = 0, icon = "plus", iconColor = 'black', backgroundColor = "white" }) => {
12 |     const ButtonView = colors && colors.length > 1 ? LinearGradient : View
13 |     const Icon = () => <Feather name={icon} size={iconSize} color={iconColor || 'white'} />
14 |     return (
15 |         <View style={{ position: 'absolute', bottom, right, }}>
16 |             <TouchableOpacity onPress={onPress} style={[styles.roundButton, style, { backgroundColor }]}>
17 |                 <ButtonView
18 |                     colors={colors}
19 |                     style={styles.btnView}>
20 |                     <Icon />
21 |                 </ButtonView>
22 |             </TouchableOpacity>
23 |         </View>
24 |     )
25 | }
26 | 
27 | export const Button = ({ label, onPress, colors, disabled = false, style, labelStyle, icon, loading, iconColor, iconSize = 20, fontSize = 18, textColor = 'white', }) => {
28 |     const ButtonView = colors && colors.length > 1 ? LinearGradient : View
29 |     const Icon = () => <Feather name={icon} size={iconSize} color={iconColor || 'white'} />
30 |     const TextView = () => <Text style={{ ...labelStyle, ...styles.text, fontSize: fontSize, color: textColor, textTransform: 'capitalize' }}>{label}</Text>
31 |     return (
32 |         <TouchableOpacity onPress={onPress} disabled={disabled}>
33 |             <ButtonView
34 |                 colors={colors}
35 |                 style={[styles.button, style]}>
36 |                 {!loading && icon && <Icon />}
37 |                 {!loading && label && <TextView/>}
38 |                 {loading && <ActivityIndicator color={'white'} size="small" />}
39 |             </ButtonView>
40 |         </TouchableOpacity>
41 |     )
42 | }
43 | 
44 | 
45 | const styles = StyleSheet.create({
46 |     button: {
47 |         width: 100,
48 |         minHeight: 45,
49 |         padding: 10,
50 |         borderRadius: 10,
51 |         flexDirection: 'row',
52 |         alignItems: 'center',
53 |         justifyContent: 'center',
54 |         backgroundColor: '#0091d9',
55 |     },
56 |     text: {
57 |         color: 'white',
58 |         paddingHorizontal: 10,
59 |     },
60 |     roundButton: {
61 |         width: 56,
62 |         height: 56,
63 |         margin: 16,
64 |         borderRadius: 30,
65 |         shadowOffset: { width: 2, height: 0 },
66 |         shadowColor: '#000',
67 |         shadowOpacity: 0.6,
68 |         shadowRadius: 0.6,
69 |         elevation: 10,
70 |         zIndex: 999,
71 |     },
72 |     btnView: {
73 |         width: 56,
74 |         height: 56,
75 |         borderRadius: 30,
76 |         alignItems: 'center',
77 |         justifyContent: 'center',
78 |     }
79 | })


--------------------------------------------------------------------------------
/Button/README.md:
--------------------------------------------------------------------------------
 1 | # react-native
 2 | 
 3 | clone the module and add on any react-native or expo project. 
 4 | ### use custom Button with icon, title and loading
 5 | 
 6 | ### install required dependency
 7 | ```
 8 | npm i react-native-paper react-native-vector-icons
 9 | link vector icons
10 | react-native link react-native-vector-icons
11 | ```
12 | Button usage:
13 | ```
14 | import {Button, RoundButton} from './components/AppButton';
15 | 
16 | <Button colors={['#5be9aa', '#09949d']} loading={false} label="Press me" icon="home"
17 |     style={{alignself: 'center'}} onPress={() => console.log('Pressed')}/>
18 | ```
19 | #### Rounded button
20 | ```
21 | <RoundButton bottom={80} onPress={() => console.log('Pressed')} />
22 | <RoundButton colors={['#5be9aa', '#09949d']} iconColor="white" onPress={() => console.log('Pressed')} />
23 | ```
24 | 
25 | #### Rounded Button Screenshot
26 | <div display="inline-block">
27 |   <img src="/screenshots/rounded_button.png" width="150" height="180" />
28 | </div>
29 | 
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/CreatePdf/ExportPdf.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { Image } from 'react-native';
  3 | import { TouchableOpacity, PermissionsAndroid } from 'react-native';
  4 | import { StyleSheet, Text, View } from 'react-native'
  5 | import RNHTMLtoPDF from 'react-native-html-to-pdf';
  6 | import FileViewer from 'react-native-file-viewer';
  7 | import { Alert } from 'react-native';
  8 | 
  9 | const data = {
 10 |   name: 'Tonny Hill',
 11 |   address: '101 E. Chapman Ave<br>Orange, CA 92866',
 12 |   phone: '98273-***11',
 13 |   company: 'Xyz Company',
 14 |   amount: '46899.50',
 15 |   amt: '53100.50',
 16 | }
 17 | 
 18 | const ExportPdf = () => {
 19 | 
 20 |   const htmlContent = `
 21 |         <html>
 22 |           <head>
 23 |             <meta charset="utf-8">
 24 |             <title>Invoice</title>
 25 |             <link rel="license" href="https://www.opensource.org/licenses/mit-license/">
 26 |             <style>
 27 |               ${htmlStyles}
 28 |             </style>
 29 |           </head>
 30 |           <body>
 31 |             <header>
 32 |               <h1>Invoice</h1>
 33 |               <address>
 34 |                 <p>${data.name}</p>
 35 |                 <p>${data.address}</p>
 36 |                 <p>${data.phone}</p>
 37 |               </address>
 38 |             </header>
 39 |             <article>
 40 |               <h1>Recipient</h1>
 41 |               <address>
 42 |                 <p>${data.company}<br>c/o ${data.name}</p>
 43 |               </address>
 44 |               <table class="meta">
 45 |                 <tr>
 46 |                   <th><span>Invoice #</span></th>
 47 |                   <td><span>101138</span></td>
 48 |                 </tr>
 49 |                 <tr>
 50 |                   <th><span>Date</span></th>
 51 |                   <td><span>${new Date()}</span></td>
 52 |                 </tr>
 53 |                 <tr>
 54 |                   <th><span>Amount Due</span></th>
 55 |                   <td><span id="prefix">$</span><span>${data.amount}</span></td>
 56 |                 </tr>
 57 |               </table>
 58 |               <table class="inventory">
 59 |                 <thead>
 60 |                   <tr>
 61 |                     <th><span>Item</span></th>
 62 |                     <th><span>Description</span></th>
 63 |                     <th><span>Rate</span></th>
 64 |                     <th><span>Quantity</span></th>
 65 |                     <th><span>Price</span></th>
 66 |                   </tr>
 67 |                 </thead>
 68 |                 <tbody>
 69 |                   <tr>
 70 |                     <td><span>Front End Consultation</span></td>
 71 |                     <td><span>Experience Review</span></td>
 72 |                     <td><span data-prefix>$</span><span>${data.amt}</span></td>
 73 |                     <td><span>4</span></td>
 74 |                     <td><span data-prefix>$</span><span>${data.amt}</span></td>
 75 |                   </tr>
 76 |                 </tbody>
 77 |               </table>
 78 |               <table class="balance">
 79 |                 <tr>
 80 |                   <th><span>Total</span></th>
 81 |                   <td><span data-prefix>$</span><span>${data.amt}</span></td>
 82 |                 </tr>
 83 |                 <tr>
 84 |                   <th><span>Amount Paid</span></th>
 85 |                   <td><span data-prefix>$</span><span>0.00</span></td>
 86 |                 </tr>
 87 |                 <tr>
 88 |                   <th><span>Balance Due</span></th>
 89 |                   <td><span data-prefix>$</span><span>${data.amount}</span></td>
 90 |                 </tr>
 91 |               </table>
 92 |             </article>
 93 |             <aside>
 94 |               <h1><span>Additional Notes</span></h1>
 95 |               <div>
 96 |                 <p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p>
 97 |               </div>
 98 |             </aside>
 99 |           </body>
100 |         </html>
101 |       `;
102 |   const askPermission = () => {
103 |     async function requestExternalWritePermission() {
104 |       try {
105 |         const granted = await PermissionsAndroid.request(
106 |           PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
107 |           {
108 |             title: 'Pdf creator needs External Storage Write Permission',
109 |             message:
110 |               'Pdf creator needs access to Storage data in your SD Card',
111 |           }
112 |         );
113 |         if (granted === PermissionsAndroid.RESULTS.GRANTED) {
114 |           createPDF();
115 |         } else {
116 |           alert('WRITE_EXTERNAL_STORAGE permission denied');
117 |         }
118 |       } catch (err) {
119 |         alert('Write permission err', err);
120 |         console.warn(err);
121 |       }
122 |     }
123 |     if (Platform.OS === 'android') {
124 |       requestExternalWritePermission();
125 |     } else {
126 |       createPDF();
127 |     }
128 |   }
129 |   const createPDF = async () => {
130 |     let options = {
131 |       //Content to print
132 |       html: htmlContent,
133 |       //File Name
134 |       fileName: 'my-test',
135 |       //File directory
136 |       directory: 'Download',
137 | 
138 |       base64: true
139 |     };
140 | 
141 |     let file = await RNHTMLtoPDF.convert(options)
142 |     // console.log(file.filePath);
143 |     Alert.alert('Successfully Exported', 'Path:' + file.filePath, [
144 |       { text: 'Cancel', style: 'cancel' },
145 |       { text: 'Open', onPress: () => openFile(file.filePath) }
146 |     ], { cancelable: true });
147 | 
148 |   }
149 | 
150 |   const openFile = (filepath) => {
151 |     const path = filepath;// absolute-path-to-my-local-file.
152 |     FileViewer.open(path)
153 |       .then(() => {
154 |         // success
155 |       })
156 |       .catch(error => {
157 |         // error
158 |       });
159 |   }
160 |   return (
161 |     <View style={styles.MainContainer}>
162 |       <TouchableOpacity onPress={askPermission}>
163 |         <Image
164 |           source={{
165 |             uri:
166 |               'https://raw.githubusercontent.com/AboutReact/sampleresource/master/pdf.png',
167 |           }}
168 |           style={styles.ImageStyle}
169 |         />
170 |         <Text style={styles.text}>Create PDF</Text>
171 |       </TouchableOpacity>
172 |     </View>
173 |   )
174 | }
175 | 
176 | export default ExportPdf
177 | 
178 | const styles = StyleSheet.create({
179 |   MainContainer: {
180 |     flex: 1,
181 |     justifyContent: 'center',
182 |     alignItems: 'center',
183 |     backgroundColor: '#123',
184 |   },
185 |   text: {
186 |     color: 'white',
187 |     textAlign: 'center',
188 |     fontSize: 25,
189 |   },
190 |   ImageStyle: {
191 |     height: 150,
192 |     width: 150,
193 |     resizeMode: 'center',
194 |   },
195 | });
196 | 
197 | const htmlStyles = `
198 | *{
199 |   border: 0;
200 |   box-sizing: content-box;
201 |   color: inherit;
202 |   font-family: inherit;
203 |   font-size: inherit;
204 |   font-style: inherit;
205 |   font-weight: inherit;
206 |   line-height: inherit;
207 |   list-style: none;
208 |   margin: 0;
209 |   padding: 0;
210 |   text-decoration: none;
211 |   vertical-align: top;
212 | }
213 | 
214 | h1 { font: bold 100% sans-serif; letter-spacing: 0.5em; text-align: center; text-transform: uppercase; }
215 | 
216 | /* table */
217 | 
218 | table { font-size: 75%; table-layout: fixed; width: 100%; }
219 | table { border-collapse: separate; border-spacing: 2px; }
220 | th, td { border-width: 1px; padding: 0.5em; position: relative; text-align: left; }
221 | th, td { border-radius: 0.25em; border-style: solid; }
222 | th { background: #EEE; border-color: #BBB; }
223 | td { border-color: #DDD; }
224 | 
225 | /* page */
226 | 
227 | html { font: 16px/1 'Open Sans', sans-serif; overflow: auto; }
228 | html { background: #999; cursor: default; }
229 | 
230 | body { box-sizing: border-box;margin: 0 auto; overflow: hidden; padding: 0.25in; }
231 | body { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); }
232 | 
233 | /* header */
234 | 
235 | header { margin: 0 0 3em; }
236 | header:after { clear: both; content: ""; display: table; }
237 | 
238 | header h1 { background: #000; border-radius: 0.25em; color: #FFF; margin: 0 0 1em; padding: 0.5em 0; }
239 | header address { float: left; font-size: 75%; font-style: normal; line-height: 1.25; margin: 0 1em 1em 0; }
240 | header address p { margin: 0 0 0.25em; }
241 | header span, header img { display: block; float: right; }
242 | header span { margin: 0 0 1em 1em; max-height: 25%; max-width: 60%; position: relative; }
243 | header img { max-height: 100%; max-width: 100%; }
244 | 
245 | /* article */
246 | 
247 | article, article address, table.meta, table.inventory { margin: 0 0 3em; }
248 | article:after { clear: both; content: ""; display: table; }
249 | article h1 { clip: rect(0 0 0 0); position: absolute; }
250 | 
251 | article address { float: left; font-size: 125%; font-weight: bold; }
252 | 
253 | /* table meta & balance */
254 | 
255 | table.meta, table.balance { float: right; width: 36%; }
256 | table.meta:after, table.balance:after { clear: both; content: ""; display: table; }
257 | 
258 | /* table meta */
259 | 
260 | table.meta th { width: 40%; }
261 | table.meta td { width: 60%; }
262 | 
263 | /* table items */
264 | 
265 | table.inventory { clear: both; width: 100%; }
266 | table.inventory th { font-weight: bold; text-align: center; }
267 | 
268 | table.inventory td:nth-child(1) { width: 26%; }
269 | table.inventory td:nth-child(2) { width: 38%; }
270 | table.inventory td:nth-child(3) { text-align: right; width: 12%; }
271 | table.inventory td:nth-child(4) { text-align: right; width: 12%; }
272 | table.inventory td:nth-child(5) { text-align: right; width: 12%; }
273 | 
274 | /* table balance */
275 | 
276 | table.balance th, table.balance td { width: 50%; }
277 | table.balance td { text-align: right; }
278 | 
279 | /* aside */
280 | 
281 | aside h1 { border: none; border-width: 0 0 1px; margin: 0 0 1em; }
282 | aside h1 { border-color: #999; border-bottom-style: solid; }
283 | `;


--------------------------------------------------------------------------------
/CreatePdf/README.md:
--------------------------------------------------------------------------------
 1 | # react-native
 2 | 
 3 | * packages
 4 | npm i react-native-html-to-pdf
 5 | npm i react-native-file-viewer
 6 | 
 7 | * add permissions on AndroidManifest.xml file
 8 | ```
 9 | <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
10 | <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
11 | ```
12 | 


--------------------------------------------------------------------------------
/Header/AppHeader.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
 3 | import { Badge, Surface, Title } from 'react-native-paper'
 4 | import Feather from 'react-native-vector-icons/Feather'
 5 | import Colors from '../constants/Colors';
 6 | 
 7 | const IconSize = 24;
 8 | 
 9 | const AppHeader = ({ style, menu, back, title, right, onRightPress, optionalBtn, optionalBtnPress, rightComponent, headerBg, iconColor, titleAlight, optionalBadge }) => {
10 | 
11 | 	const LeftView = () => (
12 | 		<View style={styles.view}>
13 | 			{menu && <TouchableOpacity onPress={() => { }}>
14 | 				<Feather name="menu" size={IconSize} color={iconColor} />
15 | 			</TouchableOpacity>}
16 | 			{back && <TouchableOpacity onPress={() => { }}>
17 | 				<Feather name="arrow-left" size={IconSize} color={iconColor} />
18 | 			</TouchableOpacity>}
19 | 		</View>
20 | 	)
21 | 	const RightView = () => (
22 | 		rightComponent ? rightComponent :
23 | 			<View style={[styles.view, styles.rightView]}>
24 | 				{optionalBtn && <TouchableOpacity style={styles.rowView} onPress={optionalBtnPress}>
25 | 					<Feather name={optionalBtn} size={IconSize} color={iconColor} />
26 | 					{optionalBadge && <Badge style={{ position: 'absolute', top: -5, right: -10 }}>{optionalBadge}</Badge>}
27 | 				</TouchableOpacity>}
28 | 				{right && <TouchableOpacity onPress={onRightPress}>
29 | 					<Feather name={right} size={IconSize} color={iconColor} />
30 | 				</TouchableOpacity>}
31 | 			</View>
32 | 	)
33 | 	const TitleView = () => (
34 | 		<View style={styles.titleView}>
35 | 			<Title style={{ color: iconColor, textAlign: titleAlight }}>{title}</Title>
36 | 		</View>
37 | 	)
38 | 	return (
39 | 		<Surface style={[styles.header, style, { backgroundColor: headerBg }]}>
40 | 			<LeftView />
41 | 			<TitleView />
42 | 			<RightView />
43 | 		</Surface>
44 | 	)
45 | }
46 | 
47 | export default AppHeader
48 | 
49 | const styles = StyleSheet.create({
50 | 	header: {
51 | 		height: 50,
52 | 		elevation: 8,
53 | 		justifyContent: 'space-between',
54 | 		alignItems: 'center',
55 | 		flexDirection: 'row',
56 | 		backgroundColor: Colors.black,
57 | 	},
58 | 	view: {
59 | 		marginHorizontal: 16,
60 | 		alignItems: 'center',
61 | 		flexDirection: 'row',
62 | 	},
63 | 	titleView: {
64 | 		flex: 1,
65 | 	},
66 | 	rightView: {
67 | 		justifyContent: 'flex-end',
68 | 	},
69 | 	rowView: {
70 | 		flexDirection: 'row',
71 | 		alignItems: 'center',
72 | 		marginRight: 10,
73 | 	}
74 | })
75 | 


--------------------------------------------------------------------------------
/Header/README.md:
--------------------------------------------------------------------------------
 1 | # react-native - Header Component
 2 | 
 3 | clone the module and add on any react-native or expo project. 
 4 | 
 5 | ### Fully Customize header component - AppHeader
 6 | 
 7 | ### install required dependencies
 8 | ```
 9 | npm i react-native-paper react-native-vector-icons
10 | link vector icons
11 | react-native link react-native-vector-icons
12 | ```
13 | Header usage:
14 | ```
15 | <AppHeader
16 |     title={"Home"}
17 |     headerBg={"#60c5a8"}
18 |     iconColor={"black"}
19 |     menu //or back
20 |     optionalBadge={5}
21 |     navigation={props.navigation}
22 |     right="more-vertical"
23 |     rightFunction={() => console.log('right')}
24 |     optionalIcon="bell"
25 |     optionalFunc={() => console.log('optional')}
26 | />
27 | ```
28 | 
29 | #### AppHeader Screenshot
30 | <div display="inline-block">
31 |   <img src="/screenshots/header1.jpg" width="300" height="100" />
32 |   <img src="/screenshots/header2.jpg" width="300" height="100" />
33 | </div>
34 | 
35 | 


--------------------------------------------------------------------------------
/Linking/README.md:
--------------------------------------------------------------------------------
1 | # react-native
2 | 
3 | clone the module and add on any react-native or expo project. 
4 | ### Linking Screen - Linking
5 | 


--------------------------------------------------------------------------------
/Linking/index.js:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useEffect, useState } from "react";
  2 | import { Alert, Button, Linking, Platform, StyleSheet, Text, View } from "react-native";
  3 | 
  4 | 
  5 | 
  6 | const LinkingPage = () => {
  7 | 
  8 |     const url1 = "https://github.com/vishal-pawar";
  9 |     const url2 = "abcd://abcd.com";
 10 |     const number = '+910987654321'
 11 |     const message = "hello there!!"
 12 | 
 13 |     const openUrl = async (url) => {
 14 |         const isSupported = await Linking.canOpenURL(url);
 15 |         if (isSupported) {
 16 |             await Linking.openURL(url);
 17 |         } else {
 18 |             Alert.alert(`Don't know how to open this url: ${url}`);
 19 |         }
 20 |     }
 21 |     
 22 |     const sendTextMessage = useCallback(async (phNumber, message) => {
 23 |         const separator = Platform.OS === 'ios' ? '&' : '?'
 24 |         const url = `sms:${phNumber}${separator}body=${message}`
 25 |         await Linking.openURL(url)
 26 |     }, [])
 27 | 
 28 |     const openPhotos = () => {
 29 |         if (Platform.OS == 'ios') {
 30 |             Linking.openURL("photos-redirect://");
 31 |         } else if (Platform.OS == 'android') {
 32 |             Linking.openURL("content://media/internal/images/media");
 33 |         } else {
 34 |             console.log("Could not open Photos")
 35 |         }
 36 |     }
 37 | 
 38 |     const openInsta = () => {
 39 |         Linking.openURL('instagram://user?username=instagram')
 40 |             .catch(() => {
 41 |                 Linking.openURL('https://www.instagram.com/instagram');
 42 |             })
 43 |     }
 44 |     return (
 45 |         <View style={styles.container}>
 46 |             <View style={styles.buttonContainer}>
 47 |                 <Button title="Open Url" onPress={() => {
 48 |                     openUrl(url1)
 49 |                 }} color="steelblue" />
 50 | 
 51 |             </View>
 52 |             <View style={styles.buttonContainer}>
 53 |                 <Button title="call" onPress={() => {
 54 |                     Linking.openURL(`tel:${number}`)
 55 |                 }} color="red" />
 56 |             </View>
 57 |             <View style={styles.buttonContainer}>
 58 |                 <Button title="SMS" onPress={() => sendTextMessage(number, message)} color="gold" />
 59 |             </View>
 60 |             <View style={styles.buttonContainer}>
 61 |                 <Button title="mail" onPress={() => {
 62 |                     Linking.openURL(`mailto:support@me.com?subject=testing&body=${message}`)
 63 |                 }} color="#ff6767" />
 64 |             </View>
 65 |             <View style={styles.buttonContainer}>
 66 |                 <Button title="Open setting" onPress={() => {
 67 |                     Linking.openSettings()
 68 |                 }} color="#112233" />
 69 |             </View>
 70 |             <View style={styles.buttonContainer}>
 71 |                 <Button title="Open Whatsapp" onPress={() => {
 72 |                     Linking.openURL(`whatsapp://send?phone=${number}&text=${message}`)
 73 |                 }} color="green" />
 74 |             </View>
 75 |             <View style={styles.buttonContainer}>
 76 |                 <Button title="Map" onPress={() => {
 77 |                     Linking.openURL(`https://www.google.com/maps/search/?api=1&query=india`)
 78 |                 }} color="" />
 79 |             </View>
 80 |             <View style={styles.buttonContainer}>
 81 |                 <Button title="open Youtube" onPress={() => {
 82 |                     Linking.openURL(`https://www.youtube.com`)
 83 |                 }} color="darkred" />
 84 |             </View>
 85 |             <View style={styles.buttonContainer}>
 86 |                 <Button title="open facebook" onPress={() => {
 87 |                     Linking.openURL(`fb://profile/`)
 88 |                 }} color="blue" />
 89 |             </View>
 90 |             <View style={styles.buttonContainer}>
 91 |                 <Button title="open Gallery" onPress={openPhotos} color="powderblue" />
 92 |             </View>
 93 |             <View style={styles.buttonContainer}>
 94 |                 <Button title="Open Instagram" onPress={openInsta} color="steelblue" />
 95 |             </View>
 96 |         </View>
 97 |     );
 98 | };
 99 | 
100 | const styles = StyleSheet.create({
101 |     container: { flex: 1, justifyContent: "center", alignItems: "center" },
102 |     buttonContainer: {
103 |         margin: 10
104 |     }
105 | });
106 | 
107 | export default LinkingPage
108 | 
109 | 
110 | 
111 | 
112 | 
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | 
136 | 
137 | 
138 | 
139 | 
140 | 
141 | 
142 | // const useMount = func => useEffect(() => func(), []);
143 | 
144 | // const useInitialURL = () => {
145 | //     const [url, setUrl] = useState(null);
146 | //     const [processing, setProcessing] = useState(true);
147 | 
148 | //     useMount(() => {
149 | //         const getUrlAsync = async () => {
150 | //             // Get the deep link used to open the app
151 | //             const initialUrl = await Linking.getInitialURL();
152 | 
153 | //             // The setTimeout is just for testing purpose
154 | //             setTimeout(() => {
155 | //                 setUrl(initialUrl);
156 | //                 setProcessing(false);
157 | //             }, 1000);
158 | //         };
159 | 
160 | //         getUrlAsync();
161 | //     });
162 | 
163 | //     return { url, processing };
164 | // };
165 | 
166 | 
167 | {/* <Text>
168 |                 {processing
169 |                     ? `Processing the initial url from a deep link`
170 |                     : `The deep link is: ${initialUrl || "None"}`}
171 |             </Text> */}
172 | 


--------------------------------------------------------------------------------
/List/README.md:
--------------------------------------------------------------------------------
1 | # react-native
2 | 
3 | clone the module and add on any react-native or expo project.
4 | ```
5 | <VirtualizedList>
6 |     <View/>
7 | </VirtualizedList>
8 | ```
9 | 


--------------------------------------------------------------------------------
/List/VirtualizedList.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { View, Text, FlatList } from 'react-native'
 3 | 
 4 | interface ListProps {
 5 |     children: React.ReactElement;
 6 | }
 7 | 
 8 | const VirtualizedList = ({children}: ListProps) => {
 9 |     return (
10 |         <FlatList
11 |             data={[]}
12 |             // keyExtractor={() => '1'}
13 |             ListHeaderComponent={<>{children}</>}
14 |             showsVerticalScrollIndicator={false}
15 |             showsHorizontalScrollIndicator={false}
16 |         />
17 |     )
18 | }
19 | 
20 | export default VirtualizedList
21 | 


--------------------------------------------------------------------------------
/ModalView/ModalView.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 3 | import { Title } from "react-native-paper";
 4 | 
 5 | const ModalView = ({ children, title, onSubmit, cancelable, visible = false, onDismiss, submitText = "Ok" }) => {
 6 |     return (
 7 |         <Modal
 8 |             animationType="fade"
 9 |             transparent={true}
10 |             visible={visible}
11 |             onDismiss={onDismiss}
12 |         >
13 |             <View style={styles.centeredView}>
14 |                 <View style={styles.modalView}>
15 |                     <Title style={styles.modalText}>{title}</Title>
16 |                     <View>
17 |                         {children}
18 |                     </View>
19 |                     <View style={{ alignSelf: 'flex-end', alignItems: 'center',flexDirection: 'row', }}>
20 |                         {cancelable && (<TouchableOpacity
21 |                             style={{ ...styles.button, backgroundColor: 'white' }}
22 |                             onPress={onDismiss}>
23 |                             <Text style={[styles.textStyle, { color: '#f44' }]}>Cancel</Text>
24 |                         </TouchableOpacity>)}
25 |                         {onSubmit && (<TouchableOpacity
26 |                             style={styles.button}
27 |                             onPress={onSubmit}>
28 |                             <Text style={styles.textStyle}>{submitText}</Text>
29 |                         </TouchableOpacity>)}
30 |                     </View>
31 |                 </View>
32 |             </View>
33 |         </Modal>
34 |     );
35 | };
36 | 
37 | const styles = StyleSheet.create({
38 |     centeredView: {
39 |         flex: 1,
40 |         justifyContent: "center",
41 |         // marginHorizontal: 20,
42 |         backgroundColor: 'rgba(0,0,0,0.6)'
43 |     },
44 |     modalView: {
45 |         margin: 30,
46 |         backgroundColor: "white",
47 |         borderRadius: 15,
48 |         padding: 20,
49 |         shadowColor: "#000",
50 |         shadowOffset: {
51 |             width: 0,
52 |             height: 2
53 |         },
54 |         shadowOpacity: 0.25,
55 |         shadowRadius: 4,
56 |         elevation: 5
57 |     },
58 |     button: {
59 |         borderRadius: 10,
60 |         padding: 10,
61 |         elevation: 1,
62 |         paddingHorizontal: 20,
63 |         marginTop: 20,
64 |         backgroundColor: '#f44',
65 |         marginLeft: 10
66 |     },
67 |     textStyle: {
68 |         color: "white",
69 |         fontWeight: "bold",
70 |         textAlign: "center"
71 |     },
72 |     modalText: {
73 |         marginBottom: 8,
74 |     }
75 | });
76 | 
77 | export default ModalView
78 | 


--------------------------------------------------------------------------------
/ModalView/README.md:
--------------------------------------------------------------------------------
 1 | # react-native
 2 | 
 3 | clone the module and add on any react-native or expo project.
 4 | 
 5 | #### install required dependencies
 6 | ```
 7 | npm i react-native-paper react-native-vector-icons
 8 | link vector icons
 9 | react-native link react-native-vector-icons
10 | ```
11 | #### ModalView
12 | ModalView usage:
13 | ```
14 | import ModalView from './components';
15 | 
16 | 
17 | const [visible, setVisible] = useState(false);
18 | 
19 | 
20 | <ModalView
21 |     visible={visible}
22 |     title="Title"
23 |     onDismiss={() => setVisible(false)}
24 |     onSubmit={() => {}}
25 |     cancelable>
26 |     <View/> 
27 | </ModalView>
28 | ```
29 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-native
2 | 
3 | clone the module and add on any react-native or expo project.
4 | 


--------------------------------------------------------------------------------
/screenshots/header1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishalpwr/react-native/3c713ad1b19ed8ba731c7ed2f870c21f9a806872/screenshots/header1.jpg


--------------------------------------------------------------------------------
/screenshots/header2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishalpwr/react-native/3c713ad1b19ed8ba731c7ed2f870c21f9a806872/screenshots/header2.jpg


--------------------------------------------------------------------------------
/screenshots/header3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishalpwr/react-native/3c713ad1b19ed8ba731c7ed2f870c21f9a806872/screenshots/header3.jpg


--------------------------------------------------------------------------------
/screenshots/rounded_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vishalpwr/react-native/3c713ad1b19ed8ba731c7ed2f870c21f9a806872/screenshots/rounded_button.png


--------------------------------------------------------------------------------