Commit f33f43f0 authored by Mr.Worldwide's avatar Mr.Worldwide
Browse files

carousel component

parent e080c412
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>
);
}
}
......@@ -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>
);
}
......
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}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment