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 |
|
9 | This library provides status/stories features like Instagram/WhatsApp or other social media, It is simple to use and fully customizable.
|
10 | It 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
|
39 | cd ios && pod install
|
40 | ```
|
41 |
|
42 | > Note: Make sure to add Reanimated's babel plugin to your `babel.config.js`
|
43 |
|
44 | ```
|
45 | module.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 />
|
59 | If you're facing issue related to 'android-scalablevideoview' or 'videocache' module not found.
|
60 | Add this code in android's build.gradle
|
61 |
|
62 | ```
|
63 | jcenter() {
|
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 |
|
93 | StoryView 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 />
|
96 | Checkout 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 />
|
99 | Checkout 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 />
|
101 | Checkout 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 |
|
107 | Define the users' **stories** array in the below format. There will be multiple users and multiple stories inside.
|
108 |
|
109 | ```js
|
110 | const 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 |
|
155 | This 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
|
160 | const 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 />
|
184 | Checkout 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 |
|
197 | This is an individual component, To display user details on header like instagram/whatsapp. In `renderHeaderComponent` of StoryContainer, Custom component can be assigned.
|
198 | For MultiStory, renderHeaderComponent receives `progressIndex`, `userStories`, `story` and `userStoryIndex` for getting current user data.
|
199 |
|
200 | ```js
|
201 | const 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 |
|
235 | This 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 |
|
268 | This 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
|
271 | const [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
|
316 | const [isStoryViewVisible, setIsStoryViewShow] = useState(false);
|
317 | const [pressedIndex, setPressedIndex] = useState<number>(0);
|
318 |
|
319 | const 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 |
|
357 | ProgressBar 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 |
|
384 | Pass 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 |
|
614 | A full working example project is here [Example](./example/src/App.tsx)
|
615 |
|
616 | ```sh
|
617 | yarn
|
618 | yarn example ios // For ios
|
619 | yarn 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 |
|
634 | Support it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-story-view/stargazers) for this repository.⭐
|
635 |
|
636 | ## Bugs / Feature requests / Feedbacks
|
637 |
|
638 | For 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 |
|
642 | We'd love to have you improve this library or fix a problem 💪
|
643 | Check 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)
|