Skip to content

Commit 92eaadb

Browse files
IamtheJSguyIamtheJSguy
committed
Dependencies updated & Stack navigator issues fixed
1 parent 3f62b18 commit 92eaadb

4 files changed

Lines changed: 140 additions & 91 deletions

File tree

‎navigation/Menu.js‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,61 @@
1-
import React from "react";
2-
import {
3-
ScrollView,
4-
StyleSheet,
5-
Image
6-
} from "react-native";
71
import { Block, Text, theme } from "galio-framework";
2+
import { Image, ScrollView, StyleSheet } from "react-native";
83

4+
import { DrawerItem as DrawerCustomItem } from "../components";
95
import Images from "../constants/Images";
10-
import { DrawerItem as DrawerCustomItem } from '../components';
6+
import React from "react";
117

12-
function CustomDrawerContent({ drawerPosition, navigation, profile, focused, state, ...rest }) {
13-
const screens = [
14-
"Home",
15-
"Profile",
16-
"Account",
17-
"Elements",
18-
"Articles",
19-
];
8+
function CustomDrawerContent({
9+
drawerPosition,
10+
navigation,
11+
profile,
12+
focused,
13+
state,
14+
...rest
15+
}) {
16+
const screens = ["Home", "Profile", "Account", "Elements", "Articles"];
2017
return (
2118
<Block
2219
style={styles.container}
23-
forceInset={{ top: 'always', horizontal: 'never' }}
20+
forceInset={{ top: "always", horizontal: "never" }}
2421
>
2522
<Block flex={0.06} style={styles.header}>
2623
<Image styles={styles.logo} source={Images.Logo} />
2724
</Block>
2825
<Block flex style={{ paddingLeft: 8, paddingRight: 14 }}>
2926
<ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
3027
{screens.map((item, index) => {
31-
return (
32-
<DrawerCustomItem
33-
title={item}
34-
key={index}
35-
navigation={navigation}
36-
focused={state.index === index ? true : false}
37-
/>
38-
);
39-
})}
40-
<Block flex style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}>
41-
<Block style={{ borderColor: "rgba(0,0,0,0.2)", width: '100%', borderWidth: StyleSheet.hairlineWidth }}/>
42-
<Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8 }}>DOCUMENTATION</Text>
43-
</Block>
44-
<DrawerCustomItem title="Getting Started" navigation={navigation} />
28+
return (
29+
<DrawerCustomItem
30+
title={item}
31+
key={index}
32+
navigation={navigation}
33+
focused={state.index === index ? true : false}
34+
/>
35+
);
36+
})}
37+
<Block
38+
flex
39+
style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}
40+
>
41+
<Block
42+
style={{
43+
borderColor: "rgba(0,0,0,0.2)",
44+
width: "100%",
45+
borderWidth: StyleSheet.hairlineWidth,
46+
}}
47+
/>
48+
<Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8 }}>
49+
DOCUMENTATION
50+
</Text>
51+
</Block>
52+
<DrawerCustomItem title="Getting Started" navigation={navigation} />
4553
</ScrollView>
4654
</Block>
4755
</Block>
4856
);
4957
}
5058

51-
5259
const styles = StyleSheet.create({
5360
container: {
5461
flex: 1,
@@ -57,8 +64,8 @@ const styles = StyleSheet.create({
5764
paddingHorizontal: 28,
5865
paddingBottom: theme.SIZES.BASE,
5966
paddingTop: theme.SIZES.BASE * 3,
60-
justifyContent: 'center'
61-
}
67+
justifyContent: "center",
68+
},
6269
});
6370

6471
export default CustomDrawerContent;

‎navigation/Screens.js‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,12 @@ function ElementsStack(props) {
6666

6767
function ArticlesStack(props) {
6868
return (
69-
<Stack.Navigator mode="card" headerMode="screen">
69+
<Stack.Navigator
70+
screenOptions={{
71+
mode: "card",
72+
headerShown: "screen",
73+
}}
74+
>
7075
<Stack.Screen
7176
name="Articles"
7277
component={Articles}
@@ -100,7 +105,13 @@ function ArticlesStack(props) {
100105

101106
function ProfileStack(props) {
102107
return (
103-
<Stack.Navigator initialRouteName="Profile" mode="card" headerMode="screen">
108+
<Stack.Navigator
109+
initialRouteName="Profile"
110+
screenOptions={{
111+
mode: "card",
112+
headerShown: "screen",
113+
}}
114+
>
104115
<Stack.Screen
105116
name="Profile"
106117
component={Profile}
@@ -141,7 +152,12 @@ function ProfileStack(props) {
141152

142153
function HomeStack(props) {
143154
return (
144-
<Stack.Navigator mode="card" headerMode="screen">
155+
<Stack.Navigator
156+
screenOptions={{
157+
mode: "card",
158+
headerShown: "screen",
159+
}}
160+
>
145161
<Stack.Screen
146162
name="Home"
147163
component={Home}
@@ -181,7 +197,12 @@ function HomeStack(props) {
181197

182198
export default function OnboardingStack(props) {
183199
return (
184-
<Stack.Navigator mode="card" headerMode="none">
200+
<Stack.Navigator
201+
screenOptions={{
202+
mode: "card",
203+
headerShown: false,
204+
}}
205+
>
185206
<Stack.Screen
186207
name="Onboarding"
187208
component={Onboarding}

‎screens/Articles.js‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
import React from "react";
1+
//galio
2+
import { Block, Text, theme } from "galio-framework";
23
import {
4+
Dimensions,
5+
Image,
6+
ImageBackground,
37
ScrollView,
48
StyleSheet,
5-
Image,
69
TouchableWithoutFeedback,
7-
ImageBackground,
8-
Dimensions
910
} from "react-native";
10-
//galio
11-
import { Block, Text, theme } from "galio-framework";
1211
//argon
13-
import { articles, Images, argonTheme } from "../constants/";
12+
import { Images, argonTheme, articles } from "../constants/";
13+
1414
import { Card } from "../components/";
15+
import React from "react";
1516

1617
const { width } = Dimensions.get("screen");
1718

@@ -24,16 +25,16 @@ const categories = [
2425
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
2526
image:
2627
"https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
27-
price: "$125"
28+
price: "$125",
2829
},
2930
{
3031
title: "Events",
3132
description:
3233
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
3334
image:
3435
"https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
35-
price: "$35"
36-
}
36+
price: "$35",
37+
},
3738
];
3839

3940
class Articles extends React.Component {
@@ -100,11 +101,11 @@ class Articles extends React.Component {
100101
source={{ uri: Images.Products["View article"] }}
101102
style={[
102103
styles.imageBlock,
103-
{ width: width - theme.SIZES.BASE * 2, height: 252 }
104+
{ width: width - theme.SIZES.BASE * 2, height: 252 },
104105
]}
105106
imageStyle={{
106107
width: width - theme.SIZES.BASE * 2,
107-
height: 252
108+
height: 252,
108109
}}
109110
>
110111
<Block style={styles.categoryTitle}>
@@ -125,7 +126,7 @@ class Articles extends React.Component {
125126
showsHorizontalScrollIndicator={false}
126127
snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
127128
contentContainerStyle={{
128-
paddingHorizontal: theme.SIZES.BASE / 2
129+
paddingHorizontal: theme.SIZES.BASE / 2,
129130
}}
130131
>
131132
{categories &&
@@ -183,9 +184,7 @@ class Articles extends React.Component {
183184
render() {
184185
return (
185186
<Block flex center>
186-
<ScrollView
187-
showsVerticalScrollIndicator={false}
188-
>
187+
<ScrollView showsVerticalScrollIndicator={false}>
189188
{this.renderCards()}
190189
{this.renderAlbum()}
191190
</ScrollView>
@@ -199,55 +198,55 @@ const styles = StyleSheet.create({
199198
paddingBottom: theme.SIZES.BASE,
200199
paddingHorizontal: theme.SIZES.BASE * 2,
201200
marginTop: 22,
202-
color: argonTheme.COLORS.HEADER
201+
color: argonTheme.COLORS.HEADER,
203202
},
204203
group: {
205-
paddingTop: theme.SIZES.BASE
204+
paddingTop: theme.SIZES.BASE,
206205
},
207206
albumThumb: {
208207
borderRadius: 4,
209208
marginVertical: 4,
210209
alignSelf: "center",
211210
width: thumbMeasure,
212-
height: thumbMeasure
211+
height: thumbMeasure,
213212
},
214213
category: {
215214
backgroundColor: theme.COLORS.WHITE,
216215
marginVertical: theme.SIZES.BASE / 2,
217-
borderWidth: 0
216+
borderWidth: 0,
218217
},
219218
categoryTitle: {
220219
height: "100%",
221220
paddingHorizontal: theme.SIZES.BASE,
222221
backgroundColor: "rgba(0, 0, 0, 0.5)",
223222
justifyContent: "center",
224-
alignItems: "center"
223+
alignItems: "center",
225224
},
226225
imageBlock: {
227226
overflow: "hidden",
228-
borderRadius: 4
227+
borderRadius: 4,
229228
},
230229
productItem: {
231230
width: cardWidth - theme.SIZES.BASE * 2,
232231
marginHorizontal: theme.SIZES.BASE,
233232
shadowColor: "black",
234233
shadowOffset: { width: 0, height: 7 },
235234
shadowRadius: 10,
236-
shadowOpacity: 0.2
235+
shadowOpacity: 0.2,
237236
},
238237
productImage: {
239238
width: cardWidth - theme.SIZES.BASE,
240239
height: cardWidth - theme.SIZES.BASE,
241-
borderRadius: 3
240+
borderRadius: 3,
242241
},
243242
productPrice: {
244243
paddingTop: theme.SIZES.BASE,
245-
paddingBottom: theme.SIZES.BASE / 2
244+
paddingBottom: theme.SIZES.BASE / 2,
246245
},
247246
productDescription: {
248-
paddingTop: theme.SIZES.BASE
247+
paddingTop: theme.SIZES.BASE,
249248
// paddingBottom: theme.SIZES.BASE * 2,
250-
}
249+
},
251250
});
252251

253252
export default Articles;

0 commit comments

Comments
 (0)