Skip to content

Commit 83ce1ad

Browse files
ems-wuems-wu
committed
menu carousel
1 parent 7556fa9 commit 83ce1ad

3 files changed

Lines changed: 74 additions & 24 deletions

File tree

‎client/components/dining/DiningMenu.js‎

Lines changed: 51 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { connect } from "react-redux";
1010
import Colors from "../../constants/Colors";
1111
import { ScrollView } from "react-native-gesture-handler";
1212
import { getColors } from "../reusable/getColors";
13+
import Carousel from 'react-native-carousel-view';
14+
//import Carousel, { Pagination } from 'react-native-snap-carousel';
1315

1416
const mapStateToProps = (state) => {
1517
return {
@@ -43,30 +45,50 @@ const DiningMenu = (props) => {
4345
return (
4446

4547
<View style={styles.screen}>
46-
<View style={styles.header}>
47-
<Text style={styles.title}>{props.children}Sharpe Refrectory</Text>
48-
{/* <TouchableOpacity>
49-
<AntDesign
50-
style={styles.star}
51-
name={starName}
52-
size={30}
53-
color={starColor}
54-
/>
55-
</TouchableOpacity> */}
48+
<Carousel
49+
width={400}
50+
height={525}
51+
animate={false}
52+
indicatorSize={10}
53+
inactiveDotColor={Colors.inactive}
54+
delay={0}
55+
onScroll={() => console.log('on scroll view')}
56+
onScrollBegin={() => console.log('scroll begin')}
57+
onPageChange={(page) => console.log('scroll change', page)}
58+
>
59+
<View style={styles.contentContainer}>
60+
<View style={styles.header}>
61+
<Text style={styles.title}>{props.children}Sharpe Refrectory</Text>
62+
{/* <TouchableOpacity>
63+
<AtDesign
64+
style={styles.star}
65+
name={starName}
66+
size={30}
67+
color={starColor}
68+
/>
69+
</TouchableOpacity> */}
70+
</View>
71+
<View>
72+
{hoursHandler()}
73+
</View>
74+
<View style={styles.mealInfo}>
75+
<Text style={styles.text}>Now Serving</Text>
76+
<Text style={[styles.text, styles.mealStatus]}>Breakfast</Text>
77+
</View>
78+
<Text style={styles.menuTitle}>Entrees</Text>
79+
<View style={styles.horizontalLine} />
80+
<Text style={styles.menuTitle}>Fresh Fruits</Text>
81+
<View style={styles.horizontalLine} />
82+
<Text style={styles.menuTitle}>Desserts</Text>
83+
<View style={styles.horizontalLine} />
5684
</View>
57-
<View>
58-
{hoursHandler()}
59-
</View>
60-
<View style={styles.mealInfo}>
61-
<Text style={styles.text}>Now Serving</Text>
62-
<Text style={[styles.text, styles.mealStatus]}>Breakfast</Text>
63-
</View>
64-
<Text style={styles.menuTitle}>Entrees</Text>
65-
<View style={styles.horizontalLine} />
66-
<Text style={styles.menuTitle}>Fresh Fruits</Text>
67-
<View style={styles.horizontalLine} />
68-
<Text style={styles.menuTitle}>Desserts</Text>
69-
<View style={styles.horizontalLine} />
85+
<View style={styles.contentContainer}>
86+
<Text>Page 2</Text>
87+
</View>
88+
<View style={styles.contentContainer}>
89+
<Text>Page 3</Text>
90+
</View>
91+
</Carousel>
7092
</View>
7193
);
7294
};
@@ -86,6 +108,12 @@ const getStyles = (Colors) => StyleSheet.create({
86108
alignItems: "center",
87109
backgroundColor: "#fafafa",
88110
},
111+
contentContainer: {
112+
borderWidth: 0,
113+
flex: 1,
114+
justifyContent: 'center',
115+
alignItems: 'center',
116+
},
89117
header: {
90118
height: 110,
91119
backgroundColor: "#f9f9f9",

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"react-dom": "~16.9.0",
3535
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
3636
"react-native-animated-loader": "^0.0.8",
37+
"react-native-carousel-view": "^0.5.1",
3738
"react-native-collapsible": "^1.5.2",
3839
"react-native-elements": "^2.0.1",
3940
"react-native-gesture-handler": "~1.6.0",

‎client/yarn.lock‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6453,13 +6453,29 @@ react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1, react-
64536453
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
64546454
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
64556455

6456+
react-mixin@^3.0.5:
6457+
version "3.1.1"
6458+
resolved "https://registry.yarnpkg.com/react-mixin/-/react-mixin-3.1.1.tgz#68749756bfe32699e561372a4aeecb926db72b7f"
6459+
integrity sha512-z9fZ0aCRDjlgxLdMeWkJ9TwhmVLhQ09r8RFpin/cEPA2T6jsb7YHNWcIe0Oii+hhJNyMymdy91CSya5mRkuCkg==
6460+
dependencies:
6461+
object-assign "^4.0.1"
6462+
smart-mixin "^2.0.0"
6463+
64566464
react-native-animated-loader@^0.0.8:
64576465
version "0.0.8"
64586466
resolved "https://registry.yarnpkg.com/react-native-animated-loader/-/react-native-animated-loader-0.0.8.tgz#5475166c2185da641c6a20477fc93819144383e8"
64596467
integrity sha512-NFdAbMABoS1Gfv4BGYmVKAAK++y1cAPjooJefRAAOVC0ehUGsWpzu+AwvgJPmbTCAJ6xwXGzpDdvP1n/Bw/6ZA==
64606468
dependencies:
64616469
prop-types "^15.6.2"
64626470

6471+
react-native-carousel-view@^0.5.1:
6472+
version "0.5.1"
6473+
resolved "https://registry.yarnpkg.com/react-native-carousel-view/-/react-native-carousel-view-0.5.1.tgz#2b0d64d32d71be09ff7555aa8c19b1dac98c5969"
6474+
integrity sha1-Kw1k0y1xvgn/dVWqjBmx2smMWWk=
6475+
dependencies:
6476+
react-mixin "^3.0.5"
6477+
react-timer-mixin "^0.13.3"
6478+
64636479
react-native-collapsible@^1.5.2:
64646480
version "1.5.3"
64656481
resolved "https://registry.yarnpkg.com/react-native-collapsible/-/react-native-collapsible-1.5.3.tgz#d6bc7274ae8f40f7688cca23ededa263e6c81c63"
@@ -6642,7 +6658,7 @@ react-test-renderer@~16.9.0:
66426658
react-is "^16.9.0"
66436659
scheduler "^0.15.0"
66446660

6645-
react-timer-mixin@^0.13.4:
6661+
react-timer-mixin@^0.13.3, react-timer-mixin@^0.13.4:
66466662
version "0.13.4"
66476663
resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
66486664
integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
@@ -7232,6 +7248,11 @@ slugify@^1.3.4:
72327248
resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.4.5.tgz#a7517acf5f4c02a4df41e735354b660a4ed1efcf"
72337249
integrity sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ==
72347250

7251+
smart-mixin@^2.0.0:
7252+
version "2.0.0"
7253+
resolved "https://registry.yarnpkg.com/smart-mixin/-/smart-mixin-2.0.0.tgz#a34a1055e32a75b30d2b4e3ca323dc99cb53f437"
7254+
integrity sha1-o0oQVeMqdbMNK048oyPcmctT9Dc=
7255+
72357256
snapdragon-node@^2.0.1:
72367257
version "2.1.1"
72377258
resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"

0 commit comments

Comments
 (0)