UNPKG

32 kBMarkdownView Raw
1![Story View - Simform](./assets/banner.png)
2
3# react-native-story-view
4
5[![react-native-story-view on npm](https://img.shields.io/npm/v/react-native-story-view.svg?style=flat)](https://www.npmjs.com/package/react-native-story-view) [![react-native-story-view downloads](https://img.shields.io/npm/dm/react-native-story-view)](https://www.npmtrends.com/react-native-story-view) [![react-native-story-view install size](https://packagephobia.com/badge?p=react-native-story-view)](https://packagephobia.com/result?p=react-native-story-view) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)
6
7---
8
9This library provides status/stories features like Instagram/WhatsApp or other social media, It is simple to use and fully customizable.
10It works on both android and iOS platforms.
11
12## Quick Access
13
14[Installation](#installation) | [StoryView](#storyview) | [Usage](#usage) | [Props](#props) | [Example](#example) | [License](#license)
15
16## Installation
17
18##### 1. Install Story View
19
20```bash
21$ npm install react-native-story-view
22# --- or ---
23$ yarn add react-native-story-view
24```
25
26##### 2. Install peer dependencies
27
28```bash
29$ npm install react-native-video react-native-reanimated react-native-gesture-handler react-native-video-cache-control
30# --- or ---
31$ yarn add react-native-video react-native-reanimated react-native-gesture-handler react-native-video-cache-control
32```
33
34> Note: If you already have these libraries installed and at the latest version, you are done here!
35
36##### 3. Install cocoapods in the ios project
37
38```bash
39cd ios && pod install
40```
41
42> Note: Make sure to add Reanimated's babel plugin to your `babel.config.js`
43
44```
45module.exports = {
46 ...
47 plugins: [
48 ...
49 'react-native-reanimated/plugin',
50 ],
51 };
52```
53
54<br />
55
56#### Extra Step
57
58<b>Android:</b><br />
59If you're facing issue related to 'android-scalablevideoview' or 'videocache' module not found.
60Add this code in android's build.gradle
61
62```
63jcenter() {
64 content {
65 includeModule("com.yqritc", "android-scalablevideoview")
66 includeModule("com.danikula", "videocache")
67 }
68}
69```
70
71##### Know more about [react-native-video](https://www.npmjs.com/package/react-native-video), [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated), [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler) and [react-native-video-cache-control](https://www.npmjs.com/package/react-native-video-cache-control)
72
73---
74
75## StoryView
76
77#### 🎬 Preview
78
79---
80
81 <table>
82 <tr>
83 <td><a href="https://github.com/SimformSolutionsPvtLtd/react-native-story-view"><img width="300" alt="SimformSolutions" src="./assets/StoryView.gif"></a></td>
84 <td><a href="https://github.com/SimformSolutionsPvtLtd/react-native-story-view"><img width="300" alt="SimformSolutions" src="./assets/SingleStory.gif"></a>
85 </td>
86 </tr>
87 </table>
88
89---
90
91## Usage
92
93StoryView is divided into several components, `MultiStory` is the root component. ProfileHeader and Footer are individual components for header and footer. StoryContainer internally used for rendering Story. We'll look usage and customization of all these.
94
95<br />
96Checkout Multi Story Example
97<a href='https://github.com/SimformSolutionsPvtLtd/react-native-story-view/blob/develop/example/src/modules/MultiStory/MultiStoryScreen.tsx'><b>here</b></a>
98<br />
99Checkout Stories Data Format <a href='https://github.com/SimformSolutionsPvtLtd/react-native-story-view/blob/develop/example/src/constants/stories.ts'><b> here</b></a>
100<br />
101Checkout Single Story Example <a href='https://github.com/SimformSolutionsPvtLtd/react-native-story-view/blob/develop/example/src/modules/Story/StoryScreen.tsx'><b> here</b></a>
102
103<br />
104
105### Story Data Format
106
107Define the users' **stories** array in the below format. There will be multiple users and multiple stories inside.
108
109```js
110const userStories = [
111 {
112 id: 1, //unique id (required)
113 username: 'Alan', //user name on header
114 title: 'Albums', //title below username
115 profile: 'https://sosugary.com/wp-content/uploads/2022/01/TheWeeknd_001.jpg', //user profile picture
116 stories: [
117 {
118 id: 0, //unique id (required)
119 url: 'https://i1.sndcdn.com/artworks-IrhmhgPltsdrwMu8-thZohQ-t500x500.jpg', // story url
120 type: 'image', //image or video type of story
121 duration: 5, //default duration
122 storyId: 1,
123 isSeen: false,
124 },
125 {
126 id: 1,
127 url: 'https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
128 type: 'video',
129 duration: 15,
130 storyId: 1,
131 isSeen: false,
132 },
133 ],
134 },
135 {
136 id:2,
137 username: 'Weekend',
138 ...
139 }
140]
141```
142
143---
144
145### MultiStory
146
147 <table>
148 <tr>
149 <td><a href="https://github.com/SimformSolutionsPvtLtd/react-native-story-view"><img width="300" alt="SimformSolutions" src="./assets/stories_list.gif"></a></td>
150 <td><a href="https://github.com/SimformSolutionsPvtLtd/react-native-story-view"><img width="200" alt="SimformSolutions" src="./assets/multistory.gif"></a>
151 </td>
152 </tr>
153 </table>
154
155This is the root component of StoryView package. It displays horizontal list of users with pre-defined ui from `StoryAvatar` component and uses animated flatlist under the hood to display stories. `StoryContainer` is used under the hood for story so all customization can be done from `storyContainerProps`.
156
157#### Basic Usage
158
159```tsx
160const multiStoryRef = useRef<MultiStoryRef>(null);
161
162<MultiStory
163 stories={stories}
164 ref={multiStoryRef}
165 avatarProps={{
166 userNameStyle: { fontSize: 16 },
167 }}
168 // all StoryContainer props applies here
169 storyContainerProps={{
170 renderHeaderComponent: ({ userStories, progressIndex, userStoryIndex }) => (
171 <Header {...{ userStories, progressIndex, multiStoryRef }} />
172 ),
173 renderFooterComponent: ({ userStories, progressIndex, userStoryIndex }) => (
174 <Footer {...{ userStories }} />
175 ),
176 barStyle: {
177 barActiveColor: Colors.red,
178 },
179 }}
180/>;
181```
182
183<br />
184Checkout Multi Story Example
185<a href='https://github.com/SimformSolutionsPvtLtd/react-native-story-view/blob/develop/example/src/modules/MultiStory/MultiStoryScreen.tsx'><b>here</b></a>
186<br />
187<br />
188
189### ProfileHeader
190
191 <table>
192 <tr>
193 <td><a href="https://github.com/SimformSolutionsPvtLtd/react-native-story-view"><img width="300" alt="SimformSolutions" src="./assets/header.png"></a></td>
194 </tr>
195 </table>
196
197This is an individual component, To display user details on header like instagram/whatsapp. In `renderHeaderComponent` of StoryContainer, Custom component can be assigned.
198For MultiStory, renderHeaderComponent receives `progressIndex`, `userStories`, `story` and `userStoryIndex` for getting current user data.
199
200```js
201const multiStoryRef = useRef(null);
202
203<MultiStory
204 ref={multiStoryRef}
205 storyContainerProps={{
206 renderHeaderComponent: ({
207 userStories,
208 story,
209 progressIndex,
210 userStoryIndex,
211 }) => (
212 <ProfileHeader
213 userImage={{ uri: userStories?.profile ?? '' }}
214 userName={userStories?.username}
215 userMessage={userStories?.title}
216 onClosePress={() => {
217 multiStoryRef?.current?.close?.();
218 }}
219 />
220 ),
221 }}
222/>;
223```
224
225### Footer
226
227 <table>
228 <tr>
229 <td><a href="https://github.com/SimformSolutionsPvtLtd/react-native-story-view"><img width="300" alt="SimformSolutions" src="./assets/footer.png"></a></td>
230 <td><a href="https://github.com/SimformSolutionsPvtLtd/react-native-story-view"><img width="200" alt="SimformSolutions" src="./assets/footer.gif"></a>
231 </td>
232 </tr>
233 </table>
234
235This is an individual component, To display footer like instagram. Any TextInput props can be directly passed to `Footer`. In `renderFooterComponent` of StoryContainer, Custom component can be assigned.
236
237```js
238<MultiStory
239 storyContainerProps={{
240 renderFooterComponent: ({
241 userStories,
242 story,
243 progressIndex,
244 userStoryIndex,
245 }) => (
246 <Footer
247 onIconPress={() => {
248 console.log('Share icon clicked');
249 }}
250 onSendTextPress={() => {
251 console.log('Message sent');
252 }}
253 shouldShowSendImage={true}
254 shouldShowTextInputSend={true}
255 placeholder="Enter Message"
256 />
257 ),
258 }}
259/>
260```
261
262---
263
264## Additional Reference
265
266### StoryContainer
267
268This is the core component of StoryView, which provides all functionality of story view and customization. It is used to render all stories in `MultiStory`. This component is just for _reference_ how `storyContainerProps` in `MultiStory` being passed in this component internally.
269
270```js
271const [isStoryViewVisible, setIsStoryViewShow] = useState(false);
272
273<StoryContainer
274 visible={isStoryViewVisible}
275 maxVideoDuration={10}
276 stories={userStories[0].stories}
277 renderFooterComponent={({ story, progressIndex }) => (
278 <Footer
279 onSendTextPress={() => {
280 Alert.alert(`Current Story id ${story?.[progressIndex].id} `);
281 Keyboard.dismiss();
282 }}
283 onIconPress={() => {
284 Alert.alert('Current Story progress index' + progressIndex);
285 }}
286 />
287 )}
288 renderHeaderComponent={({ story, progressIndex }) => (
289 <ProfileHeader
290 userImage={{ uri: userStories[0]?.profile ?? '' }}
291 userName={userStories[0]?.username}
292 userMessage={userStories[0]?.title}
293 onImageClick={() => {}}
294 onClosePress={() => setIsStoryViewShow(false)}
295 />
296 )}
297 //Callback when all stories completes
298 onComplete={() => setIsStoryViewShow(false)}
299/>;
300```
301
302### MultiStoryContainer
303
304`MultiStory` is wrapper on this component with extra horizontal user list UI of `StoryAvatar`. If MultiStory's horizontal list customisation is not sufficient for any use-case, use this base component and add your own customised horizontal user list UI.
305
306 <table>
307 <tr>
308 <td><a href="https://github.com/SimformSolutionsPvtLtd/react-native-story-view"><img width="140" alt="SimformSolutions" src="./assets/multiStoryContainer.gif"></a>
309 </td>
310 </tr>
311 </table>
312
313#### Basic Usage
314
315```js
316const [isStoryViewVisible, setIsStoryViewShow] = useState(false);
317const [pressedIndex, setPressedIndex] = useState<number>(0);
318
319const openStories = (index: number) => {
320 setIsStoryViewShow(true);
321 setPressedIndex(index);
322};
323
324 <View style={styles.container}>
325 <FlatList
326 horizontal
327 data={userStories}
328 keyExtractor={item => item?.id?.toString()}
329 renderItem={({ item, index }) => (
330 <Pressable onPress={() => openStories(index)}>
331 <CustomStoryAvatar {...{ item, index }} />
332 </Pressable>
333 )}
334 />
335 {isStoryViewVisible && (
336 // add other StoryContainer Props
337 <MultiStoryContainer
338 visible={isStoryViewVisible}
339 onComplete={() => setIsStoryViewShow(false)}
340 stories={userStories}
341 renderHeaderComponent={...}
342 renderFooterComponent={...}
343 userStoryIndex={pressedIndex}
344 />
345 )}
346 </View>
347```
348
349### ProgressBar
350
351 <table>
352 <tr>
353 <td><a href="https://github.com/SimformSolutionsPvtLtd/react-native-story-view"><img width="300" alt="SimformSolutions" src="./assets/progressbar.gif"></a></td>
354 </tr>
355 </table>
356
357ProgressBar customisation can be controlled through StoryContainer itself. `enableProgress` to make visible the progressbar.`progressIndex` to start story from any index. `barStyle` to customize look feel of progressbar.`onChangePosition` trigger when progressbar index will change returns current index.
358
359```js
360<MultiStory
361 storyContainerProps={{
362 enableProgress: true,
363 //Callback when progressbar index changes
364 onChangePosition: position => {},
365 barStyle: {
366 barHeight: 2,
367 barInActiveColor: 'green',
368 barActiveColor: 'grey',
369 },
370 maxVideoDuration: 25,
371 progressIndex: 0,
372 }}
373/>
374```
375
376### Custom View
377
378 <table>
379 <tr>
380 <td><a href="https://github.com/SimformSolutionsPvtLtd/react-native-story-view"><img width="300" alt="SimformSolutions" src="./assets/custom_view.png"></a></td>
381 </tr>
382 </table>
383
384Pass any custom view in story view. It will be rendered on top of story view as it has an absolute position. In `renderCustomView` of StoryContainer, Any custom component can be assigned.
385
386```js
387<MultiStory
388 storyContainerProps={{
389 renderCustomView: () => (
390 <View
391 style={{
392 position: 'absolute',
393 top: 40,
394 right: 50,
395 }}>
396 <Image
397 source={Images.star}
398 style={{
399 height: 25,
400 width: 25,
401 tintColor: 'green',
402 }}
403 />
404 </View>
405 ),
406 }}
407/>
408```
409
410---
411
412## Story Data
413
414```javascript
415[{
416 id: number;
417 username: string;
418 title: string;
419 profile: string;
420 stories:Array<Story>[
421 {
422 id: number;
423 url: string;
424 type: 'image' | 'video';
425 duration: number
426 isReadMore: boolean
427 storyId: number,
428 isSeen?: boolean,
429 }
430 ]
431}]
432```
433
434---
435
436### Transitions
437
438| Cube | Scale | Default |
439| -------------------------------------------- | --------------------------------------------- | ----------------------------------------------- |
440| <img src="./assets/cube.gif" width="200" /> | <img src="./assets/scale.gif" width="200" /> | <img src="./assets/default.gif" width="200" /> |
441
442---
443
444## Props
445
446### MultiStory
447
448<br />
449
450> | Name | Default | Type | <div style="width:290px">Description</div> |
451> | :------------------ | :-----------------: | :---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
452> | **stories\*** | undefined | StoriesType[] | Array of multiple user stories |
453> | ref | null | MultiStoryRef | To access `close` story method |
454> | storyContainerProps | {} | StoryContainerProps | Customize all story props, detailed props in below `StoryContainer` section |
455> | avatarProps | {} | [StoryAvatarStyleProps](#storyavatarstyleprops) | Customize avatar component styles |
456> | onChangePosition | null | (progressIndex, storyIndex) => {} | Callback when progress index changes |
457> | transitionMode | TransitionMode.Cube | TransitionMode: {Default, Cube, Scale} | To customize user story transition, (TransitionMode.default : no transition, Transition.scale : zoomIn/zoomOut transition, Transition.Cube: 3D cube transition) cube |
458> | onComplete | null | (viewedStories?: Array<boolean[]>) => void | Callback when stories closed or completes. `viewedStories` contains multi array of boolean whether story is seen or not |
459> | `props` | - | FlatListProps | Pass any `FlatList` props to customize horizontal user list |
460
461---
462
463### StoryAvatarStyleProps
464
465<br />
466
467> | Name | Default | Type | <div style="width:290px">Description</div> |
468> | :------------------------ | :-----: | :------------- | --------------------------------------------------------- |
469> | userNameStyle | - | TextStyle | To change style of user name |
470> | userImageStyle | - | ImageStyle | To change style of user avatar |
471> | containerStyle | - | ViewStyle | To change style of image container |
472> | userImageProps | - | ImageProps | To customize image props |
473> | userNameProps | - | ViewStyle | To customize text props |
474> | rootProps | - | PressableProps | To customize root view props |
475> | viewedStoryContainerStyle | - | ViewStyle | To customize story avatar when all stories of it are seen |
476
477---
478
479<br />
480
481### MultiStoryContainer
482
483<br />
484
485> | Name | Default | Type | <div style="width:290px">Description</div> |
486> | :------------------ | :-----------------: | :------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
487> | **stories\*** | undefined | StoriesType[] | Array of multiple user stories |
488> | **visible\*** | false | boolean | Hide / show story view |
489> | userStoryIndex | 0 | number | Pass clicked index of horizontal user list. |
490> | storyContainerProps | {} | StoryContainerProps | Customize all story props, detailed props in below `StoryContainer` section |
491> | onChangePosition | null | (progressIndex, userIndex) => {} | Callback when progress index changes |
492> | transitionMode | TransitionMode.Cube | TransitionMode: {Default, Cube, Scale} | To customize user story transition, (TransitionMode.default : no transition, Transition.scale : zoomIn/zoomOut transition, Transition.Cube: 3D cube transition) cube |
493> | onComplete | null | () => {} | Callback when stories closed or complete |
494> | `props` | - | StoryContainerProps | Pass any `StoryContainerProps` props to customize story |
495
496---
497
498<br />
499
500### StoryContainer
501
502<br />
503
504> | Name | Default | Type | <div style="width:290px">Description</div> |
505> | :----------------------- | :-------: | :--------------------------------------------------------- | -------------------------------------------------------------------------------- |
506> | **visible\*** | false | boolean | Hide / show story view |
507> | **stories\*** | undefined | StoryType[] | Array of stories |
508> | backgroundColor | #000000 | string | Background color of story view |
509> | maxVideoDuration | null | number | Override video progress duration (default is actual duration of video) |
510> | style | {} | ViewStyle | Style of story view |
511> | showSourceIndicator | true | boolean | Display indicator while video loading |
512> | sourceIndicatorProps | {} | ActivityIndicatorProps | To override indicator props |
513> | onComplete | null | () => {} | Callback when all stories completes |
514> | renderHeaderComponent | null | (callback: [CallbackProps](#callbackprops)) => JSX.Element | Render Header component (`ProfileHeader`) or custom component |
515> | renderFooterComponent | null | (callback: [CallbackProps](#callbackprops)) => JSX.Element | Render Footer component (`Footer`) or custom component |
516> | renderCustomView | null | (callback: [CallbackProps](#callbackprops)) => JSX.Element | Render any custom view on Story |
517> | renderIndicatorComponent | {} | () => JSX.Element | Render loader when we press on Story, which represent loading state of story |
518> | storyContainerViewProps | {} | ViewProps | Root story view props |
519> | headerViewProps | {} | ViewProps | Header view wrapper props |
520> | footerViewProps | {} | ViewProps | Footer view wrapper props |
521> | customViewProps | {} | ViewProps | Custom view wrapper props |
522> | videoProps | {} | VideoProperties | To override video properties |
523> | ref | {} | StoryRef | To access 'pause' story method and 'viewedStories' stories object (Single Story) |
524> | customViewStyle | {} | ViewStyle | Style of custom view container |
525> | headerStyle | {} | ViewStyle | Style of header container |
526> | footerStyle | {} | ViewStyle | Style of footer container |
527
528---
529
530<br />
531
532### CallbackProps
533
534<br />
535
536> | Name | Default | Type | <div style="width:290px">Description</div> |
537> | :---------------- | :-------: | :---------- | ------------------------------------------------- |
538> | **progressIndex** | 0 | number | Current progress index of story |
539> | story | undefined | StoryType[] | Current story array |
540> | userStories | undefined | StoriesType | Current user story array (`Only for Multi Story`) |
541> | userStoryIndex | undefined | number | Current user story index (`Only for Multi Story`) |
542
543---
544
545<br />
546
547### StoryContainer: Progressbar
548
549<br />
550
551> | Name | Default | Type | <div style="width:290px">Description</div> |
552> | :---------------- | :--------------------------------------------------------------------------------------------------: | :--------------- | ---------------------------------------------------------------------- |
553> | progressIndex | 0 | number | To start story with any index |
554> | barStyle | {<br />`barActiveColor`: #ffffff' <br /> `barInActiveColor`: #FFFFFF7F <br /> `barHeight` : 2<br />} | BarStyleProps | Progressbar Style: (`barActiveColor`, `barInActiveColor`, `barHeight`) |
555> | enableProgress | true | boolean | To display progressbar |
556> | progressViewProps | {} | ViewProps | ProgressBar view wrapper props |
557> | onChangePosition | null | (position) => {} | Callback when progress index changes |
558
559---
560
561<br />
562
563### ProfileHeader
564
565<br />
566
567> | Name | Default | Type | <div style="width:290px">Description</div> |
568> | :---------------- | :-----: | :------------------ | ------------------------------------------ |
569> | userImage | {} | ImageSourcePropType | Circular view image |
570> | userName | '' | string | To display username |
571> | userMessage | '' | string | Display text below username |
572> | customCloseButton | null | any | To render custom close button |
573> | closeIconProps | {} | ViewProps | ProgressBar view wrapper props |
574> | onImageClick | null | () => {} | Callback on user image click |
575> | rootStyle | {} | ViewStyle | root view style changes |
576> | containerStyle | {} | ViewStyle | container view style changes |
577> | userImageStyle | {} | ImageStyle | To change profile Image view style |
578> | userNameStyle | {} | TextStyle | To change profile name style |
579> | userMessageStyle | {} | TextStyle | To change profile message/subtext style |
580> | closeIconStyle | {} | ImageStyle | To change close icon style |
581> | userImageProps | {} | ImageProps | User Image props |
582> | userMessageProps | {} | TextProps | User Message Props |
583> | userNameProps | {} | TextProps | User Name Props |
584
585---
586
587<br />
588
589### Footer
590
591<br />
592
593> | Name | Default | Type | <div style="width:290px">Description</div> |
594> | :---------------------- | :-----: | :------------------- | ------------------------------------------------------ |
595> | customInput | null | TextInput | Render any custom text input |
596> | shouldShowSendImage | true | bool | Show/hide send icon image |
597> | onIconPress | null | () => {} | Callback on send icon press |
598> | sendIconProps | {} | ImageProps | Additional props to customize 'send' image view |
599> | sendText | 'Send' | string | To change text 'send' with any other string |
600> | shouldShowTextInputSend | true | bool | Show/hide send text inside text input (like instagram) |
601> | onSendTextPress | null | () => {} | Callback on send text press |
602> | sendTextProps | {} | TextProps | Additional props to customize 'send' text view |
603> | sendTextStyle | {} | TextStyle | To change style of send text |
604> | sendIconStyle | {} | ImageStyle | To change style of send icon |
605> | inputStyle | {} | StyleProp<TextStyle> | To change style of input |
606> | containerStyle | {} | ViewStyle | To change style of root view |
607> | containerViewProps | {} | ViewProps | Root view props |
608> | `props` | - | TextInputProps | Pass any `TextInput` props on `Footer` component |
609
610---
611
612## Example
613
614A full working example project is here [Example](./example/src/App.tsx)
615
616```sh
617yarn
618yarn example ios // For ios
619yarn example android // For Android
620```
621
622# TODO
623
624- [ ] Customize StoryAvatar in reference of Instagram
625- [ ] Customized Story example
626- [ ] Refactor Cube transition (make perfect cube in reference of Instagram)
627- [ ] Landscape support
628- [ ] Optimize video loading on android
629
630<br />
631
632## Find this library useful? ❤️
633
634Support it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-story-view/stargazers) for this repository.⭐
635
636## Bugs / Feature requests / Feedbacks
637
638For bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-story-view/issues/new?labels=bug&late=BUG_REPORT.md&title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-story-view/issues/new?labels=enhancement&late=FEATURE_REQUEST.md&title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-story-view/issues/new?labels=enhancement&late=FEATURE_REQUEST.md&title=%5BFEEDBACK%5D%3A)
639
640## 🤝 How to Contribute
641
642We'd love to have you improve this library or fix a problem 💪
643Check out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.
644
645## Awesome Mobile Libraries
646
647- Check out our other available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)
648
649## License
650
651- [MIT License](./LICENSE)