react-native-stories-festo

Install

1. Step

npm install react-native-stories-festo --save

or

yarn add react-native-stories-festo

2. Step

cd ios && pod install

Import

import FestoStory from 'react-native-stories-festo';

Basic

import FestoStory from 'react-native-stories-festo';

const stories = [
  {
    user_id: 1,
    user_image:
      'https://pbs.twimg.com/profile_images/1222140802475773952/61OmyINj.jpg',
    user_name: 'You',
    stories: [
      {
        story_id: 1,
        story_image:
          'https://image.freepik.com/free-vector/universe-mobile-wallpaper-with-planets_79603-600.jpg',
        onPress: () => console.log('story 1 swiped'),
      },
      {
        story_id: 2,
        story_image:
          'https://image.freepik.com/free-vector/mobile-wallpaper-with-fluid-shapes_79603-601.jpg',
        onPress: () => console.log('story 1 swiped'),
      },
    ],
  },
  {
    user_id: 2,
    user_image:
      'https://images.unsplash.com/photo-1511367461989-f85a21fda167?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZmlsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
    user_name: 'Test User',
    stories: [
      {
        story_id: 1,
        story_image:
          'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjORKvjcbMRGYPR3QIs3MofoWkD4wHzRd_eg&usqp=CAU',
      },
      {
        story_id: 2,
        story_image:
          'https://files.oyebesmartest.com/uploads/preview/vivo-u20-mobile-wallpaper-full-hd-(1)qm6qyz9v60.jpg',
      },
    ],
  },
];

<View style={{paddingBottom: 32}}>
  <FestoStory
    setScrollOffset={setScrollOffset}
    flatListRef={flatListRef}

    data={stories}
    duration={10}
    onStorySeen={handleViewStory}
    getMoreData={loadData}
    onClose={handleReload}

    onCreate={handleCreate}
  />
</View>