Commit 23dac084 authored by Pramodh Rajapakse's avatar Pramodh Rajapakse

carousel component added to auction detail pae

parent fe5d897a
...@@ -14,6 +14,7 @@ import HomeAuctionScreen from "../screen/Home.Auction.Screen"; ...@@ -14,6 +14,7 @@ import HomeAuctionScreen from "../screen/Home.Auction.Screen";
import UserAuctionListScreen from "../screen/User.Auctions.Screen"; import UserAuctionListScreen from "../screen/User.Auctions.Screen";
import UserBidScreen from "../screen/User.Bids.Screen"; import UserBidScreen from "../screen/User.Bids.Screen";
import AuctionListScreen from "../screen/Auctions.List.Screen"; import AuctionListScreen from "../screen/Auctions.List.Screen";
import AuctionDetailScreen from "../screen/Auction.Detail.Screen";
const Stack = createStackNavigator(); const Stack = createStackNavigator();
...@@ -225,6 +226,15 @@ export function AuthStack({ navigation }) { ...@@ -225,6 +226,15 @@ export function AuthStack({ navigation }) {
headerTitleAlign: "center" headerTitleAlign: "center"
}} }}
/> />
<Stack.Screen
name="AuctionDetailScreen"
component={AuctionDetailScreen}
options={{
headerShown: false,
title: "Auctions List",
headerTitleAlign: "center"
}}
/>
<Stack.Screen <Stack.Screen
name="AboutUs" name="AboutUs"
component={AboutUs} component={AboutUs}
......
import React, { Component } from 'react'
import { Animated, View, StyleSheet, Image, Dimensions, ScrollView , Text} from 'react-native'
import themeColors from '../assets/colors'
const deviceWidth = Dimensions.get('window').width
const FIXED_BAR_WIDTH = 100
const BAR_SPACE = 10
const images = [
'https://s-media-cache-ak0.pinimg.com/originals/ee/51/39/ee5139157407967591081ee04723259a.png',
'https://s-media-cache-ak0.pinimg.com/originals/40/4f/83/404f83e93175630e77bc29b3fe727cbe.jpg',
'https://s-media-cache-ak0.pinimg.com/originals/8d/1a/da/8d1adab145a2d606c85e339873b9bb0e.jpg',
]
export default class AppCarousel extends Component {
numItems = images.length
itemWidth = (FIXED_BAR_WIDTH / this.numItems) - ((this.numItems - 1) * BAR_SPACE)
animVal = new Animated.Value(0)
render() {
let imageArray = []
let barArray = []
images.forEach((image, i) => {
console.log(image, i)
const thisImage = (
<Image
key={`image${i}`}
source={{uri: image}}
style={styles.image}
/>
)
imageArray.push(thisImage)
const scrollBarVal = this.animVal.interpolate({
inputRange: [deviceWidth * (i - 1), deviceWidth * (i + 1)],
outputRange: [-this.itemWidth, this.itemWidth],
extrapolate: 'clamp',
})
const thisBar = (
<View
key={`bar${i}`}
style={[
styles.track,
{
width: this.itemWidth,
marginLeft: i === 0 ? 0 : BAR_SPACE,
},
]}
>
<Animated.View
style={[
styles.bar,
{
width: this.itemWidth,
transform: [
{ translateX: scrollBarVal },
],
},
]}
/>
</View>
)
barArray.push(thisBar)
})
return (
<View
style={styles.container}
flex={1}
>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
scrollEventThrottle={10}
pagingEnabled
onScroll={
Animated.event(
[{ nativeEvent: { contentOffset: { x: this.animVal } } }]
)
}
>
{imageArray}
<View
style={styles.skip}
>
</View>
</ScrollView>
<View
style={styles.barContainer}
>
{barArray}
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
barContainer: {
position: 'absolute',
zIndex: 2,
bottom: 40,
flexDirection: 'row',
},
skip: {
position: 'absolute',
zIndex: 2,
bottom: 80,
flexDirection: 'row',
},
track: {
backgroundColor: themeColors.SECONDARY_COLOR,
overflow: 'hidden',
height: 2,
},
bar: {
backgroundColor: themeColors.WHITE,
height: 2,
position: 'absolute',
left: 0,
top: 0,
},
image: {
flex: 1,
width : deviceWidth,
borderBottomStartRadius: 20,
borderBottomEndRadius: 20
}
})
\ No newline at end of file
// Example of Splash, Login and Sign Up in React Native
// https://aboutreact.com/react-native-login-and-signup/
// Import React and Component
import React from 'react';
import {View, StyleSheet, Text, ScrollView} from 'react-native';
import { AppAuctionItem } from '../components/auction_item.component';
import { AppContainer } from '../container/container';
import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
import AppCarousel from '../components/carousel.component';
const AuctionDetailScreen = (props, {navigation}) => {
return (
<View style={styles.wrapper}>
<View style={styles.header}>
<AppCarousel/>
</View>
<View style={styles.container}>
<AppContainer>
<View>
<Text style={styles.auctionHeading}>Title</Text>
<View>
<Text style={styles.auctionHeading}>Lot No : </Text>
</View>
</View>
<Text style={styles.auctionHeading}>Last Stakes</Text>
<ScrollView>
<View>
<AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/>
<AppAuctionItem label='Auction Item 2'/>
<AppAuctionItem label='Auction Item 3'/>
<AppAuctionItem label='Auction Item 4'/>
</View>
</ScrollView>
</AppContainer>
<AuctionBottomTab/>
</View>
</View>
);
};
export default AuctionDetailScreen;
const styles = StyleSheet.create({
wrapper: {
flex: 1,
backgroundColor: themeColors.WHITE
},
container: {
flex: 1,
backgroundColor: '#ffffff'
},
header: {
height: '35%',
marginBottom: 25,
backgroundColor : themeColors.PRIMARY_COLOR,
borderBottomStartRadius: 20,
borderBottomEndRadius: 20,
},
btnRowContainer: {
maxHeight: 100
},
contentContainer: {
flex: 1,
flexDirection: 'row',
margin: 20
},
auctionHeading: {
fontSize: 24,
fontWeight: 'bold',
color: themeColors.SECONDARY_COLOR
}
})
\ No newline at end of file
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