carousel component

components/CarouselComponent.tsx

+import React from "react";
+import { Animated, Dimensions, View, ScrollView } from "react-native";
+
+
+interface Props {
+    style?: any,
+    base: any,
+    list: any
+}
+
+interface State {
+    scrollX: any,
+    indicator: any,
+    selectedId: Number
+}
+
+const { width } = Dimensions.get('window')
+export default class CarouselComponent extends React.Component<Props, State> {
+
+
+
+    state: Readonly<State> = {
+        selectedId: 0,
+        scrollX: new Animated.Value(0),
+        indicator: new Animated.Value(1)
+    };
+
+    componentDidMount = () => {
+
+        this.setState({
+            selectedId: 0,
+            scrollX: new Animated.Value(0),
+            indicator: new Animated.Value(1)
+        })
+
+        // this.state.scrollX.addListener(this.updateView.bind(this))
+    }
+
+    updateView(offset: any) {
+        let currentIndex = offset.value / width;
+        if (offset.value < 0) {
+            currentIndex = 0
+        } else if (offset.value > (this.props.list.length - 1) * width) {
+            currentIndex = this.props.list.length - 1
+        }
+        const INDICATOR_WIDTH = width / this.props.list.length
+        console.log(currentIndex, INDICATOR_WIDTH,currentIndex * INDICATOR_WIDTH)
+        this.state.indicator.setValue(currentIndex * INDICATOR_WIDTH)
+    }
+
+    renderRow = (item: any, index: any) => {
+        const inputRange = [
+            (index - 2) * width,
+            (index - 1) * width,
+            index * width,
+            (index + 1) * width
+        ];
+        const imageScale = this.state.scrollX.interpolate({
+            inputRange,
+            outputRange: [1, 0.4, 1, 0.4]
+        });
+        const imageOpacity = this.state.scrollX.interpolate({
+            inputRange,
+            outputRange: [1, 0.2, 1, 0.2]
+        });
+        return <View style={{ flex: 1 }}>
+            <Animated.Image
+                source={{ uri: this.props.base + item.image }}
+                style={[{
+                    width: width,
+                    height: width * 0.85,
+                    resizeMode: "contain"
+                }, {
+                    transform: [{
+                        scale: imageScale
+                    }],
+                    opacity: imageOpacity
+                }]}
+            />
+        </View>
+    }
+
+
+    render() {
+        const { list } = this.props
+
+        return (
+            <View style={{
+                flex: 1,
+            }}><ScrollView
+                scrollEventThrottle={16}
+                horizontal
+                onScroll={Animated.event(
+                    [{ nativeEvent: { contentOffset: { x: this.state.scrollX } } }]
+                )}
+
+            >
+                    {list && list.map((item: any, index: any) => (this.renderRow(item, index)))}
+
+                </ScrollView>
+                <Animated.View style={{ flex: 1 }}>
+                    <Animated.View style={[{
+                        height: "100%",
+                        width: "100%",
+                    }, { left: this.state.indicator }]} />
+                </Animated.View>
+            </View>
+        );
+    }
+}
+

container/HomeScreen.tsx

@@ -2,6 +2,8 @@ import React, { Component, Fragment } from 'react';
 import { Text, View, Image, Dimensions, ScrollView } from 'react-native';
 import { styles as s } from "react-native-style-tachyons";
 import AsyncStorage from '@react-native-community/async-storage';
+import CarouselComponent from '../components/CarouselComponent';
+import Carouselsample from '../components/Carouselsample';
 
 interface Props {
   navigation?: any
@@ -45,9 +47,10 @@ class HomeScreen extends Component<Props, State>{
     const { code, outletData } = this.state
     return (
       <ScrollView style={[s.flx_i]}>
-        <Text>This is home screen of {code}</Text>
-        <Text>Outlet location {outletData.city}</Text>
-        {outletData && <View>
+        <View><Text>This is home screen of {code}</Text></View>
+        <View><Text>Outlet location {outletData.city}</Text></View>
+        {outletData.banners && <CarouselComponent list={outletData.banners} base={outletData.banner_base_url}/>}
+        {/* {outletData && <View>
           {outletData.banners && outletData.banners.map((slide: any) => {
             return <View key={slide.created_at + slide.image}>
               <Image
@@ -60,7 +63,7 @@ class HomeScreen extends Component<Props, State>{
               />
             </View>
           })}
-        </View>}
+        </View>} */}
       </ScrollView>
     );
   }

container/MainScreen.tsx

 import React, { Component, Fragment } from 'react';
-import { Text, View, Button, SafeAreaView, Image, ImageBackground, TouchableOpacity, Modal } from 'react-native';
+import { Text, View, Image, ImageBackground, TouchableOpacity, Modal } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import NativeTachyons, { styles as s } from "react-native-style-tachyons";
 import { StackActions, NavigationActions } from 'react-navigation';
@@ -36,7 +36,7 @@ const MainScreen = NativeTachyons.wrap(class MainScreen extends Component<Props,
       })
       .catch((error) => {
         this.setState({ isLoading: false })
-        // console.error(error);
+        console.error(error);
       })
 
   }
@@ -61,7 +61,7 @@ const MainScreen = NativeTachyons.wrap(class MainScreen extends Component<Props,
               <GTextComponent style={[s.f3, s.secondary,{lineHeight:20}]}>CENTER</GTextComponent>
             </Text>
           </View>
-
+          
           {outletsList.map((outlet: any) => {
             return <TouchableOpacity
               key={outlet.code}