react-native-flyy 1.4.28 → 1.4.30

package/src/index.tsx

@@ -9,11 +9,12 @@ import {
   Dimensions,
   AppState,
   ToastAndroid,
-  Linking
+  Linking,
+  FlatList
 } from 'react-native';
-import Draggable from 'react-native-draggable';
+// import Draggable from 'react-native-draggable';
 import FlyyCheckinComponent from './flyy_checkin_view';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { FlyyStoriesWidget } from './flyy_stories';
 
 type FlyyType = {
   getUserId(arg0: (data: any) => void): unknown;
@@ -39,209 +40,328 @@ const windowHeight = Dimensions.get('window').height;
 const windowWidth = Dimensions.get('window').width;
 
 // ****** Flyy Floating Widget ******
-export const FlyyFloatingWidget = ({
-  props = {
-    backgroundColor: "#654EA3",
-    buttonHeight: 55,
-    buttonWidth: 55,
-    buttonCornerRadius: 40,
-    buttonIcon: require('./assets/images/rewardwidget.png'),
-    onPress: () => { },
-    x: windowWidth - 75,
-    y: windowHeight - 100,
-    minX: 5,
-    minY: 5,
-    maxX: windowWidth - 5,
-    maxY: windowHeight - 5,
-    show: true,
-    stick: false,
-    startDate: 0,
-    endDate: 0
-  } }) => {
-
-    const [showWidget,setShowWidget] = useState(false);
-    const [userData,setUserData] = useState({});
-    const [iconUrl,setIconUrl] = useState(require('./assets/images/rewardwidget.png'));
-    const [backgroundColor,setBackgroundColor] = useState("#654EA3");
-    const [buttonSize,setButtonSize] = useState(55);  
-    const [buttonXPosition,setButtonXPosition] = useState(windowWidth - 75);
-    const [buttonYPosition,setButtonYPosition] = useState(windowHeight - 100);
-    const [deeplink,setDeeplink] = useState(null);
-    const flyyConfigDate = "flyy_config_date";
-    const flyyConfigUserId = "user_id";
-    var oldState = null;
-    var currentState = null;
-    var data = null;
+// export const FlyyFloatingWidget = ({
+//   props = {
+//     backgroundColor: "#654EA3",
+//     buttonHeight: 55,
+//     buttonWidth: 55,
+//     buttonCornerRadius: 40,
+//     buttonIcon: require('./assets/images/rewardwidget.png'),
+//     onPress: () => { },
+//     x: windowWidth - 75,
+//     y: windowHeight - 100,
+//     minX: 5,
+//     minY: 5,
+//     maxX: windowWidth - 5,
+//     maxY: windowHeight - 5,
+//     show: true,
+//     stick: false,
+//     startDate: 0,
+//     endDate: 0
+//   } }) => {
 
-    useEffect(()=>{
-      fetchData();
-    },[]);
+//     const [showWidget,setShowWidget] = useState(false);
+//     const [userData,setUserData] = useState({});
+//     const [iconUrl,setIconUrl] = useState(require('./assets/images/rewardwidget.png'));
+//     const [backgroundColor,setBackgroundColor] = useState("#654EA3");
+//     const [buttonSize,setButtonSize] = useState(55);  
+//     const [buttonXPosition,setButtonXPosition] = useState(windowWidth - 75);
+//     const [buttonYPosition,setButtonYPosition] = useState(windowHeight - 100);
+//     const [deeplink,setDeeplink] = useState(null);
+//     const flyyConfigDate = "flyy_config_date";
+//     const flyyConfigUserId = "user_id";
+//     var oldState = null;
+//     var currentState = null;
+//     var data = null;
 
-    const fetchData = async() => {
-      const sdkInfo = await Flyy.getUserData();
-      const appData = await Flyy.getAppData();
-      const resp = await fetch(`https://${sdkInfo["environment"] == 0 ? "ghc-stage" : "ghc"}.theflyy.com/api/v8/flyy_app_info`, {
-        headers: {
-            "X-Key": sdkInfo["partner_id"],
-            "Content-Type": "application/json",
-            "X-App-Data": appData
-        }
-    });
-     data = await resp.json();
-     if(!data.success){
-      ToastAndroid.show(data.message, ToastAndroid.SHORT);
-      return;
-     }
-     const widgetConfig = data.info.floating_widget_configuration;
-
-      if (widgetConfig.icon_url != null && widgetConfig.icon_url != '') {
-        setIconUrl({ uri: widgetConfig.icon_url })
-      } else {
-        setIconUrl(props.buttonIcon)
+//     useEffect(()=>{
+//       fetchData();
+//     },[]);
+
+//     const fetchData = async() => {
+//       const sdkInfo = await Flyy.getUserData(); 
+//       const appData = await Flyy.getAppData();
+//       const resp = await fetch(`https://${sdkInfo["environment"] == 0 ? "ghc-stage" : "ghc"}.theflyy.com/api/v8/flyy_app_info`, {
+//         headers: {
+//             "X-Key": sdkInfo["partner_id"],
+//             "Content-Type": "application/json",
+//             "X-App-Data": appData
+//         }
+//     });
+//      data = await resp.json();
+//      if(!data.success){
+//       if (Platform.OS === 'android') {
+//         ToastAndroid.show(data.message, ToastAndroid.SHORT);
+//       } else {
+//           // Toast.showWithGravity(data.message, Toast.SHORT, Toast.BOTTOM);
+//       }
+//       return;
+//      }
+//      const widgetConfig = data.info.floating_widget_configuration;
+
+//       if (widgetConfig.icon_url != null && widgetConfig.icon_url != '') {
+//         setIconUrl({ uri: widgetConfig.icon_url })
+//       } else {
+//         setIconUrl(props.buttonIcon)
+//       }
+
+//       if (widgetConfig.color != null && widgetConfig.color != '') {
+//         setBackgroundColor(widgetConfig.color)
+//       } else {
+//         setBackgroundColor(props.backgroundColor)
+//       }
+
+//       if (widgetConfig.size != null && widgetConfig.color != 0) {
+//         setButtonSize(parseInt(data.info.floating_widget_configuration.size))
+//       } else {
+//         setButtonSize(props.buttonHeight)
+//       }
+
+//       //FloatingButton Position 
+//       if (widgetConfig.position == "bottom_left") {
+//         setButtonXPosition(10)
+//       } else if (widgetConfig.position == "bottom_right") {
+//         setButtonXPosition(windowWidth - 75)
+//       } else if (widgetConfig.position == "upper_left") {
+//         setButtonXPosition(10)
+//         if (Platform.OS === 'android'){
+//           setButtonYPosition(10)
+//         }else{
+//           setButtonYPosition(50)
+//         }
+//       } else if (widgetConfig.position == "upper_right") {
+//         setButtonXPosition(windowWidth - 75)
+//         if (Platform.OS === 'android'){
+//           setButtonYPosition(10)
+//         }else{
+//           setButtonYPosition(50)
+//         }
+//       }
+
+//       //Set DeepLink 
+//       if (widgetConfig.deeplink != null && widgetConfig.deeplink != "") {
+//         setDeeplink(widgetConfig.deeplink)
+//       }
+//       //Set Visibility of FloatingButton
+//       var currentDate = new Date();
+//       const getDate = await AsyncStorage.getItem(flyyConfigDate);
+//       const userId = await AsyncStorage.getItem(flyyConfigUserId);
+//       var date = new Date(parseInt(getDate));
+//       const diffTime = Math.abs(getDate - currentDate);
+//       const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))-1; 
+//       if(diffDays != 0 || userId == null || userId != sdkInfo[flyyConfigUserId]){
+//         var data = await Flyy.getAppOccurence(1);
+//         await AsyncStorage.setItem(
+//             flyyConfigUserId,
+//             sdkInfo[flyyConfigUserId]
+//           );
+//       }
+//       const occurrenceCount = await Flyy.getAppOccurence(0);
+//       if (widgetConfig.show_to_user && occurrenceCount <= parseInt(widgetConfig.num_times)) {
+//         // var numberOfDaysToAdd = widgetConfig.num_days+1;
+//         // var result = currentDate.setDate(currentDate.getDate() + numberOfDaysToAdd);
+//         if(getDate === null || userId == null || userId != sdkInfo[flyyConfigUserId]){
+//           await AsyncStorage.setItem(
+//             flyyConfigDate,
+//             JSON.stringify(currentDate.getTime())
+//           );
+//         }
+//         const getDate2 = await AsyncStorage.getItem(flyyConfigDate);
+//         var date = new Date(parseInt(getDate2));
+//         const diffTime = Math.abs(getDate2 - currentDate);
+//         const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))-1;
+//         //Show widget on same day
+//         if(diffDays === 0 || diffDays === -1){
+//           setShowWidget(true)
+//         }else{
+//           //reset occurrence on next day
+//           await Flyy.getAppOccurence(1);
+//           if(diffDays >= parseInt(widgetConfig.num_days)+1){
+//             await AsyncStorage.setItem(
+//               flyyConfigDate,
+//               JSON.stringify(currentDate.getTime())
+//             );
+//             setShowWidget(true)
+//           }
+//         }
+//       }else{
+//         setShowWidget(false);
+//         const getDate2 = await AsyncStorage.getItem(flyyConfigDate);
+//         var date = new Date(parseInt(getDate2));
+//         const diffTime = Math.abs(getDate2 - currentDate);
+//         const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
+//         if(diffDays != 1){
+//           var data = await Flyy.getAppOccurence(1);
+//         }
+//       }
+//     }
+
+//   //  if(props.show){
+//   //   if(props.startDate != null && props.startDate != 0){
+//   //     var now = new Date().getTime();
+//   //     if(now >= props.startDate && now <= props.endDate){
+//   //       props.show = true
+//   //     }else{
+//   //       props.show = false
+//   //     }
+//   //   }
+//   //  }
+
+//   //  AppState.addEventListener('change', state =>{
+//   //   console.log('AppState updated to', AppState.currentState) 
+//   //   oldState = currentState;
+//   //   currentState = state;
+//   //   if(oldState == null){
+//   //     console.log('App is newly start :::') 
+//   //   }})
+
+//   return (
+//     // @ts-ignore
+//    props.show && showWidget? <Draggable x={buttonXPosition}
+//       y={buttonYPosition}
+//       minX={props.minX ?? 5}
+//       minY={props.minY ?? 5}
+//       maxX={props.maxX ?? windowWidth - 5}
+//       maxY={props.maxY ?? windowHeight - 5}
+//       renderSize={56}
+//       //  shouldReverse = {true}
+//       onDragRelease={props.stick ? () => {
+
+//       } : null} isCircle>
+//         <TouchableOpacity
+//         onPress={deeplink != null ? async()=>{
+//           if (Platform.OS === 'android' || !deeplink.startsWith("flyy://")) {
+//             const supported = await Linking.canOpenURL(deeplink);
+//             await Linking.openURL(deeplink);
+//           } else {
+//               navigateTo(deeplink);
+//           }
+//         }:props.onPress}
+//         style={{
+//           height: buttonSize,
+//           width: buttonSize,
+//           backgroundColor: backgroundColor,
+//           borderRadius: buttonSize/2,
+//           justifyContent: 'center',
+//           alignItems: 'center',
+//         }}>
+//         <Image source={iconUrl} style={{ height: buttonSize*55/100, width: buttonSize*55/100 }} />
+//         <TouchableOpacity 
+//       onPress={()=>{  
+//         props.show = false;
+//         setShowWidget(false);
+//       }}
+//       style = {{height: 20, width: 20, backgroundColor: "transparent",position:'absolute',left:buttonSize-11, bottom: buttonSize*72/100}}>
+//       <Image source={require('./assets/images/xmark.png')} style={{ height: 18, width: 18, tintColor: "black"}} />
+//       </TouchableOpacity>
+//       </TouchableOpacity>
+//     </Draggable> : <View/>  
+//   );
+// }
+
+const navigateTo = (deeplink) => {
+  let components = deeplink.split("/");
+  let screenCode = components[components.length - 1];
+  switch (screenCode) {
+    case "flyy_offers":
+      {
+        Flyy.openOffersScreen();
+      } 
+      break;
+    case "challenge_details":
+      {
+        Flyy.openFlyyChallengeDetailPage(0);
       }
+      break;
 
-      if (widgetConfig.color != null && widgetConfig.color != '') {
-        setBackgroundColor(widgetConfig.color)
-      } else {
-        setBackgroundColor(props.backgroundColor)
+    case "flyy_quiz_list":
+      {
+        Flyy.openFlyyQuizListPage();
       }
+      break;
 
-      if (widgetConfig.size != null && widgetConfig.color != 0) {
-        setButtonSize(parseInt(data.info.floating_widget_configuration.size))
-      } else {
-        setButtonSize(props.buttonHeight)
+    case "stamp_campaign_new":
+      {
+        Flyy.openFlyyStampsPage();
       }
+      break;
 
-      //FloatingButton Position 
-      if (widgetConfig.position == "bottom_left") {
-        setButtonXPosition(10)
-      } else if (widgetConfig.position == "bottom_right") {
-        setButtonXPosition(windowWidth - 75)
-      } else if (widgetConfig.position == "upper_left") {
-        setButtonXPosition(10)
-        setButtonYPosition(10)
-      } else if (widgetConfig.position == "upper_right") {
-        setButtonXPosition(windowWidth - 75)
-        setButtonYPosition(10)
+    case "campaign_home":
+      {
+        Flyy.openFlyyStampsPage();
       }
+      break;
 
-      //Set DeepLink 
-      if (widgetConfig.deeplink != null && widgetConfig.deeplink != "") {
-        setDeeplink(widgetConfig.deeplink)
+    case "bonanza_details":
+      {
+        Flyy.openFlyyBonanzaPage();
       }
-      //Set Visibility of FloatingButton
-      var currentDate = new Date();
-      const getDate = await AsyncStorage.getItem(flyyConfigDate);
-      const userId = await AsyncStorage.getItem(flyyConfigUserId);
-      var date = new Date(parseInt(getDate));
-      const diffTime = Math.abs(getDate - currentDate);
-      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))-1; 
-      if(diffDays != 0 || userId == null || userId != sdkInfo[flyyConfigUserId]){
-        var data = await Flyy.getAppOccurence(1);
-        await AsyncStorage.setItem(
-            flyyConfigUserId,
-            sdkInfo[flyyConfigUserId]
-          );
+      break;
+    case "invite_earn":
+      {
+        Flyy.openFlyyInviteAndEarnPage(0);
       }
-      const occurrenceCount = await Flyy.getAppOccurence(0);
-      if (widgetConfig.show_to_user && occurrenceCount <= parseInt(widgetConfig.num_times)) {
-        // var numberOfDaysToAdd = widgetConfig.num_days+1;
-        // var result = currentDate.setDate(currentDate.getDate() + numberOfDaysToAdd);
-        if(getDate === null || userId == null || userId != sdkInfo[flyyConfigUserId]){
-          await AsyncStorage.setItem(
-            flyyConfigDate,
-            JSON.stringify(currentDate.getTime())
-          );
-        }
-        const getDate2 = await AsyncStorage.getItem(flyyConfigDate);
-        var date = new Date(parseInt(getDate2));
-        const diffTime = Math.abs(getDate2 - currentDate);
-        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))-1;
-        //Show widget on same day
-        if(diffDays === 0 || diffDays === -1){
-          setShowWidget(true)
-        }else{
-          //reset occurrence on next day
-          await Flyy.getAppOccurence(1);
-          if(diffDays >= parseInt(widgetConfig.num_days)+1){
-            await AsyncStorage.setItem(
-              flyyConfigDate,
-              JSON.stringify(currentDate.getTime())
-            );
-            setShowWidget(true)
-          }
-        }
-      }else{
-        setShowWidget(false);
-        const getDate2 = await AsyncStorage.getItem(flyyConfigDate);
-        var date = new Date(parseInt(getDate2));
-        const diffTime = Math.abs(getDate2 - currentDate);
-        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
-        if(diffDays != 1){
-          var data = await Flyy.getAppOccurence(1);
-        }
+      break;
+    case "invite_details":
+      {
+        Flyy.openFlyyInviteDetailsPage(0);
       }
-    }
-
-  //  if(props.show){
-  //   if(props.startDate != null && props.startDate != 0){
-  //     var now = new Date().getTime();
-  //     if(now >= props.startDate && now <= props.endDate){
-  //       props.show = true
-  //     }else{
-  //       props.show = false
-  //     }
-  //   }
-  //  }
-
-  //  AppState.addEventListener('change', state =>{
-  //   console.log('AppState updated to', AppState.currentState) 
-  //   oldState = currentState;
-  //   currentState = state;
-  //   if(oldState == null){
-  //     console.log('App is newly start :::') 
-  //   }})
+      break;
+    case "custom_invite_details":
+      {
+        Flyy.openFlyyCustomInviteAndEarnPage(0, FlyyFlutterPlugin.themeColor);
+      }
+      break;
+    case "raffle_details":
+      {
+        Flyy.openFlyyRafflePage(0);
+      }
+      break;
+    case "quiz_history":
+      {
+        Flyy.openFlyyQuizHistoryPage();
+      }
+      break;
+    case "flyy_rewards":
+      {
+        Flyy.openRewardsScreen();
+      }
+      break;
+    case "flyy_referrals":
+      {
+        Flyy.openReferralHistory();
+      }
+      break;
+    case "flyy_gift_cards":
+      {
+        Flyy.openGiftCardScreen();
+      }
+      break;
+    case "flyy_wallet":
+      {
+        Flyy.openWalletScreen();
+      }
+      break;
+    case "game_list":
+      {
+        Flyy.openFlyyGamesPage();
+      }
+      break;  
+    case "flyy_bonanza":
+      {
+        Flyy.openFlyyBonanzaPage();
+      }
+      break;
+    case "flyy_quiz_detail":
+      {
+        Flyy.openFlyyQuizPage(0);
+      }
+      break;
+    default:
+      // Toast.showWithGravity("ACTION NOT FOUND", Toast.SHORT, Toast.BOTTOM);
 
-  return (
-    // @ts-ignore
-   props.show && showWidget? <Draggable x={buttonXPosition}
-      y={buttonYPosition}
-      minX={props.minX ?? 5}
-      minY={props.minY ?? 5}
-      maxX={props.maxX ?? windowWidth - 5}
-      maxY={props.maxY ?? windowHeight - 5}
-      renderSize={56}
-      //  shouldReverse = {true}
-      onDragRelease={props.stick ? () => {
-
-      } : null} isCircle>
-        <TouchableOpacity
-        onPress={deeplink != null ? async()=>{
-          const supported = await Linking.canOpenURL(deeplink);
-          await Linking.openURL(deeplink);
-        }:props.onPress}
-        style={{
-          height: buttonSize,
-          width: buttonSize,
-          backgroundColor: backgroundColor,
-          borderRadius: buttonSize/2,
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-        <Image source={iconUrl} style={{ height: buttonSize*55/100, width: buttonSize*55/100 }} />
-        <TouchableOpacity 
-      onPress={()=>{  
-        props.show = false;
-        setShowWidget(false);
-      }}
-      style = {{height: 20, width: 20, backgroundColor: "transparent",position:'absolute',left:buttonSize-11, bottom: buttonSize*72/100}}>
-      <Image source={require('./assets/images/xmark.png')} style={{ height: 18, width: 18, tintColor: "black"}} />
-      </TouchableOpacity>
-      </TouchableOpacity>
-    </Draggable> : <View/>  
-  );
+  }
 }
-
 export const FlyyWidget = ({
   widgetStyle = {
     rewardsButtonIcon: require('./assets/images/rewardwidget.png'),
@@ -378,3 +498,198 @@ const FlyyCardView = ({ cardStyle, buttonTitle, buttonIcon }) => {
     </View>
   );
 };
+
+
+// ****** Flyy Stories Widget ******
+
+export const FlyyStories = ({
+  widgetStyle = {
+    titleColor: 'black',
+    iconButtonBgColor: '#654EA3',
+    fontSize: 16.0,
+    iconCornerRadius: 55,
+    iconSize: 60,
+    iconBgSize: 100
+  },
+}) => {
+  const [data,setData] = useState(null);
+
+    useEffect(()=>{
+      fetchStoriesData();
+    },[]);
+
+    const fetchStoriesData = async() => {
+      const sdkInfo = await Flyy.getUserData(); 
+      const appData = await Flyy.getAppData();
+      const resp = await fetch(`https://${sdkInfo["environment"] == 0 ? "ghc-stage" : "ghc"}.theflyy.com/api/storyboard`, {
+        headers: {
+            "X-Key": sdkInfo["partner_id"],
+            "Content-Type": "application/json",
+            "X-App-Data": appData
+        }
+    });
+      const responseData = await resp.json();
+      setData(responseData.storyboard_items);
+    }
+
+    const navigateTo = (screenCode) => {
+      switch (screenCode) {
+        case "offers":
+          {
+            Flyy.openOffersScreen();
+          } 
+          break;
+        case "spin_wheel":
+          {
+            Flyy.openFlyySpinTheWheelPage(0);
+          }
+          break;
+
+        case "challenge":
+          {
+            Flyy.openFlyyChallengeDetailPage(0);
+          }
+          break;
+    
+        case "quiz_list":
+          {
+            Flyy.openFlyyQuizListPage();
+          }
+          break;
+    
+        case "stamp_campaign":
+          {
+            Flyy.openFlyyStampsPage();
+          }
+          break;
+    
+        case "campaign_home":
+          {
+            Flyy.openFlyyStampsPage();
+          }
+          break;
+    
+        case "bonanza_details":
+          {
+            Flyy.openFlyyBonanzaPage();
+          }
+          break;
+        case "invite_earn":
+          {
+            Flyy.openFlyyInviteAndEarnPage(0);
+          }
+          break;
+        case "invite_details":
+          {
+            Flyy.openFlyyInviteDetailsPage(0);
+          }
+          break;
+        case "custom_invite_details":
+          {
+            Flyy.openFlyyCustomInviteAndEarnPage(0, FlyyFlutterPlugin.themeColor);
+          }
+          break;
+        case "raffle":
+          {
+            Flyy.openFlyyRafflePage(0);
+          }
+          break;
+        case "quiz_history":
+          {
+            Flyy.openFlyyQuizHistoryPage();
+          }
+          break;
+        case "flyy_rewards":
+          {
+            Flyy.openRewardsScreen();
+          }
+          break;
+        case "referrals":
+          {
+            Flyy.openReferralHistory();
+          }
+          break;
+        case "flyy_gift_cards":
+          {
+            Flyy.openGiftCardScreen();
+          }
+          break;
+        case "wallet":
+          {
+            Flyy.openWalletScreen();
+          }
+          break;
+        case "game_list":
+          {
+            Flyy.openFlyyGamesPage();
+          }
+          break;
+        case "bonanza":
+          {
+            Flyy.openFlyyBonanzaPage();
+          }
+          break;
+        case "quiz_detail":
+          {
+            Flyy.openFlyyQuizPage(0);
+          }
+          break;
+        default:
+          // Toast.showWithGravity("ACTION NOT FOUND", Toast.SHORT, Toast.BOTTOM);
+    
+      }
+    }
+
+    const StoriesItem = ({data}) => {
+      return (
+        <View style = {{alignItems: 'center'}}>
+          <View style={{ height: 10 }} />
+          <TouchableOpacity
+          onPress={()=>{
+            navigateTo(data.screen_code);
+          }}
+            style={{
+              backgroundColor: widgetStyle.iconButtonBgColor ?? '#654EA3',
+              height: widgetStyle.iconBgSize ?? 60,
+              width: widgetStyle.iconBgSize ?? 60,
+              borderRadius: widgetStyle.iconCornerRadius ?? 55,
+              alignSelf: 'center',
+              justifyContent: 'center',
+              alignItems: 'center',
+              marginHorizontal: 10
+            }}
+          >
+            <Image source={{uri: data.icon_url}} style={{ height: 60, width: 60 }} />
+          </TouchableOpacity>
+          <View style={{ height: 10 }} />
+          <View style = {{width:120}}>
+          <Text
+            style={{
+              alignSelf: 'center',
+              flexShrink: 1,
+              color: widgetStyle.titleColor ?? 'black',
+              fontSize: widgetStyle.fontSize ?? 14,
+              fontFamily: 'Montserrat-Bold',
+              textAlign: 'center',
+              paddingLeft: 5,
+              paddingRight: 5,
+            }}
+            numberOfLines={2}
+          >
+            {data.title}  
+          </Text>
+          </View>
+          <View style={{ height: 10 }} />
+        </View>
+      );
+    };
+
+  return (<View style = {{flexDirection: "row",justifyContent: "center",width:"100%",alignItems:'center',alignContent:'center',backgroundColor: "white"}}>
+      <FlatList
+      horizontal={true}
+      data={data}
+      renderItem={({ item }) => <StoriesItem data={item} />}
+      keyExtractor={item => item.id}
+  />
+  </View>); 
+}