carousel component added to auction detail pae

Navigations/AuthStack.js

@@ -14,6 +14,7 @@ import HomeAuctionScreen from  "../screen/Home.Auction.Screen";
 import UserAuctionListScreen from "../screen/User.Auctions.Screen";
 import UserBidScreen from "../screen/User.Bids.Screen";
 import AuctionListScreen from "../screen/Auctions.List.Screen";
+import AuctionDetailScreen from "../screen/Auction.Detail.Screen";
 
 const Stack = createStackNavigator();
 
@@ -225,6 +226,15 @@ export function AuthStack({ navigation }) {
           headerTitleAlign: "center"
         }}
       />
+      <Stack.Screen
+        name="AuctionDetailScreen"
+        component={AuctionDetailScreen}
+        options={{
+          headerShown: false,
+          title: "Auctions List",
+          headerTitleAlign: "center"
+        }}
+      />
       <Stack.Screen
         name="AboutUs"
         component={AboutUs}

components/carousel.component.js

+
+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

screen/Auction.Detail.Screen.js

+// 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