react-native-story-component

A decent story component for React-Native

Preview

Table of Contents

• Getting started
• Props
• Usage
• Example App
• Credit
• Contributing
• License

Getting started

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

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

const App = () => {
  return (
    <Stories
      data={[
        {
          id: 1,
          avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
          name: 'Marvin Lane',
          stories: [
            {
              id: 1,
              image: 'https://images.unsplash.com/photo-1510215744419-742d9dce947f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8MTA4MHgxOTIwfGVufDB8fDB8fA%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-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={() => (
        <View>
          <Text>Swipe</Text>
        </View>
      )}
    />
  );
};

Example App

# 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 to learn how to contribute to the repository and the development workflow.

License

MIT