https://github.com/ridvanaltun/react-native-story-component
Add Instagram story feature to your React-Native app.
https://github.com/ridvanaltun/react-native-story-component
react-native story
Last synced: 3 months ago
JSON representation
Add Instagram story feature to your React-Native app.
- Host: GitHub
- URL: https://github.com/ridvanaltun/react-native-story-component
- Owner: ridvanaltun
- License: mit
- Created: 2022-05-25T20:03:43.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-09T14:53:54.000Z (about 2 years ago)
- Last Synced: 2025-06-22T16:06:29.454Z (4 months ago)
- Topics: react-native, story
- Language: TypeScript
- Homepage:
- Size: 6.34 MB
- Stars: 6
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-story-component
[](https://npmjs.com/package/react-native-story-component)
[](https://circleci.com/gh/ridvanaltun/react-native-story-component/tree/master)
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/ridvanaltun/react-native-story-component/blob/master/LICENSE)
> A decent story component for React-Native
| Preview |
| ----------------------------------------------------------------- |
| 
|
# Table of Contents
- [Getting started](#getting-started)
- [Props](#props)
- [Usage](#usage)
- [Example App](#example-app)
- [Credit](#credit)
- [Contributing](#contributing)
- [License](#license)
## Getting started
```sh
npm i react-native-story-component
```
## Props
| Name | Description | Type | Default Value |
| :------------------- | :---------------------------------------- | :---------------------------------------------- | :-----------: |
| data | Array of stories. | UserStory[] | |
| unPressedBorderColor | Unpressed border color of profile circle | color | red |
| pressedBorderColor | Pressed border color of profile circle | color | grey |
| onClose | Todo when close | (item: UserStory) => void | null |
| onStart | Todo when start | (item: UserStory) => 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: CustomStoryList) => React.ReactNode | |
| customStoryView | Custom component for story view | (props: CustomStoryView) => React.ReactNode | |
| customProfileBanner | Custom component for profile banner | (props: CustomProfileBanner) => React.ReactNode | |
| customStoryImage | Custom component for story image | (props: CustomStoryImage) => 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 | |
| prefetchImages | Prefetch story images | bool | true |
| onImagesPrefetched | Callback function for prefetching process | (allImagesPrefetched: bool) => void | |
## Usage
```jsx
import Stories from 'react-native-story-component';
const App = () => {
return (
console.log('story 1 swiped'),
},
{
id: 2,
image: 'https://images.unsplash.com/photo-1493509094819-bd2d26fac21b?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8MTA4MHgxOTIwfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1200',
},
],
},
{
id: 2,
avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
name: 'Manuel Weaver',
stories: [
{
id: 1,
image: 'https://images.unsplash.com/photo-1524821261922-e353d72c20e5?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8MTA4MHgxOTIwfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1200',
swipeText: 'Custom swipe text for this story',
onPress: () => console.log('story 1 swiped'),
},
{
id: 2,
image: 'https://images.unsplash.com/photo-1590846083693-f23fdede3a7e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8MTA4MHgxOTIwfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1200',
swipeText: 'Custom swipe text for this story',
onPress: () => console.log('story 2 swiped'),
},
],
},
]}
duration={10}
onStart={(openedStory) => {
console.log(openedStory);
}}
onClose={(closedStory) => {
console.log(closedStory);
}}
customSwipeUpButton={() => (
Swipe
)}
/>
);
};
```
## Example App
```sh
# clone the project
git clone https://github.com/ridvanaltun/react-native-story-component.git
# go into the project
cd react-native-story-component
# make project ready
npm run bootstrap
# go into the example
cd example
# run for android
npm run android
# or
# run for ios
npm run ios
```
## Credit
I copied and rewrite the codebase from https://github.com/caglardurmus/react-native-insta-story in this project. I created this project because I was needed a better one.
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
[MIT](LICENSE)