Skip to content

Commit

Permalink
feat: ability to use some custom components
Browse files Browse the repository at this point in the history
  • Loading branch information
ridvanaltun committed May 26, 2022
1 parent 2cdd8a5 commit 59ae346
Showing 16 changed files with 368 additions and 292 deletions.
48 changes: 28 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
@@ -7,6 +7,10 @@

> A decent story component for React-Native
| Preview |
| ----------------------------------------------------------------- |
| <img src="docs/preview.gif" alt="Preview Image" width="300px" /> |

# Table of Contents <!-- omit in toc -->

- [Getting started](#getting-started)
@@ -25,21 +29,25 @@ npm i react-native-story-component

## Props

| Name | Description | Type | Default Value |
| :--------------------- | :-------------------------------------------------- | :------------------------------------------------------------------------------------------- | :-----------: |
| data | Array of IUserStory. You can check from interfaces. | object | |
| unPressedBorderColor | Unpressed border color of profile circle | color | red |
| pressedBorderColor | Pressed border color of profile circle | color | grey |
| onClose | Todo when close | function | null |
| onStart | Todo when start | function | null |
| duration | Per story duration seconds | number | 10 |
| swipeText | Text of swipe component | string | Swipe Up |
| customSwipeUpComponent | For use custom component for swipe area | () => component | |
| customCloseComponent | For use custom component for close button | () => component | |
| customStoryList | For use custom component for story list | ({data: IUserStory[], onStoryPress: (item: IUserStory, index: number) => void}) => component | |
| avatarSize | Size of avatar circle | number | 60 |
| showAvatarText | For show or hide avatar text. | bool | true |
| textStyle | For avatar text style | TextStyle | |
| Name | Description | Type | Default Value |
| :------------------- | :--------------------------------------- | :----------------------------------------------- | :-----------: |
| data | Array of stories. | IUserStory[] | |
| unPressedBorderColor | Unpressed border color of profile circle | color | red |
| pressedBorderColor | Pressed border color of profile circle | color | grey |
| onClose | Todo when close | (item: IUserStory) => void | null |
| onStart | Todo when start | (item: IUserStory) => void | null |
| duration | Per story duration in seconds | number | 10 |
| swipeText | Text of swipe component | string | Swipe Up |
| customSwipeUpButton | Custom component for swipe area | () => ReactNode | |
| customCloseButton | Custom component for close button | () => ReactNode | |
| customStoryList | Custom component for story list | (props: ICustomStoryList) => React.ReactNode | |
| customStoryView | Custom component for story view | (props: ICustomStoryView) => React.ReactNode | |
| customProfileBanner | Custom component for profile banner | (props: ICustomProfileBanner) => React.ReactNode | |
| avatarSize | Size of avatar circle | number | 60 |
| showAvatarText | Show or hide avatar text | bool | true |
| showProfileBanner | Show or hide profile banner | bool | true |
| textStyle | Avatar text style | TextStyle | |
| storyListStyle | Story list view style | ViewStyle | |

## Usage

@@ -88,13 +96,13 @@ const App = () => {
},
]}
duration={10}
onStart={(item) => {
console.log(item);
onStart={(openedStory) => {
console.log(openedStory);
}}
onClose={(item) => {
console.log('close: ', item);
onClose={(closedStory) => {
console.log(closedStory);
}}
customSwipeUpComponent={() => (
customSwipeUpButton={() => (
<View>
<Text>Swipe</Text>
</View>
Binary file added docs/preview.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 68 additions & 0 deletions example/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { faker } from '@faker-js/faker';

import Story from 'react-native-story-component';

const createStories = () => {
const USER_COUNT = 5;
const USER_STORY_COUNT = 3;

return [...Array(USER_COUNT).keys()].map((i) => ({
id: `user-${i}`,
avatar: faker.image.avatar(),
name: faker.name.findName(),
// seen: Math.random() < 0.5,
stories: [...Array(USER_STORY_COUNT).keys()].map((y) => ({
id: `story-${i}-${y}`,
image: faker.image.imageUrl(1080, 1920, undefined, true),
swipeText: faker.lorem.text(),
onPress: () => console.log(`Story ${i}-${y} swiped!`),
})),
}));
};

const App = () => {
return (
<>
<StatusBar backgroundColor="#000" style="light" />
<View style={styles.container}>
<Story
data={createStories()}
duration={10}
// customStoryView={({ index }) => {
// return (
// <View
// key={index}
// style={{
// backgroundColor: '#fff',
// }}
// >
// <Text>Custom View</Text>
// </View>
// );
// }}
customSwipeUpButton={() => (
<View>
<Text>Swipe</Text>
</View>
)}
storyListStyle={styles.story}
/>
</View>
</>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
story: {
marginTop: 70,
},
});

export default App;
2 changes: 1 addition & 1 deletion example/App.js → example/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { registerRootComponent } from 'expo';

import App from './src/App';
import App from './App';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
2 changes: 1 addition & 1 deletion example/package.json
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
"description": "Example app for react-native-story-component",
"version": "0.0.1",
"private": true,
"main": "App",
"main": "index",
"scripts": {
"android": "expo start --android",
"ios": "expo start --ios",
67 changes: 0 additions & 67 deletions example/src/App.tsx

This file was deleted.

File renamed without changes.
File renamed without changes.
Loading

0 comments on commit 59ae346

Please sign in to comment.