React Native

Installation

Install @storysdk/react-native-sdk package via npm or yarn

npm install @storysdk/react-native-sdk

Add the peer dependencies to your project:

"@miblanchard/react-native-slider": "^2.1.0",
"react-native-device-info": "^8.7.1",
"react-native-modal": "^13.0.1",
"react-native-svg": "^12.3.0",
"react-native-text-gradient": "^0.1.7",
"react-native-video": "^5.2.0"

Dependency linking:

react-native link

Usage

Read here to get a token

import Stories from '@storysdk/react-native-sdk';

const TOKEN = 'b881fa22-ef23-41f2-92a6-efb04b147834'

<Stories
  token={TOKEN}
/>

With reload option

You can use the reload option to reload data

reload: string | number

<Stories
  token={TOKEN}
  reload={'1234'}
/>

Render custom group

import Stories, { GroupItemProps } from '@storysdk/react-native-sdk';

function customGroupItem(props: GroupItemProps) {
  return (
    <View style={{ marginRight: 20 }}>
      <Image
        source={{ uri: props.imageUrl }}
        style={{ width: 100, height: 100, borderRadius: 10, marginBottom: 8 }}
      />
      <Text
        style={{
          fontFamily: 'Inter-Bold',
          color: '#333333',
          fontSize: 14,
        }}
      >
        {props.title}
      </Text>
    </View>
  );
}

...

<Stories
  token={TOKEN}
  reload={reloadTimestamp}
  renderGroupItem={customGroupItem}
/>

Demo

You can see an example of usage here.