Skip to content

Commit ce62e44

Browse files
palingheorghepalingheorghe
committed
Cards and DrawerItems fixed
1 parent d7e3035 commit ce62e44

File tree

5 files changed

+76
-52
lines changed

5 files changed

+76
-52
lines changed

‎components/Card.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,12 @@ class Card extends React.Component {
3131

3232
return (
3333
<Block row={horizontal} card flex style={cardContainer}>
34-
<TouchableWithoutFeedback onPress={() => navigation.navigate('Product', { product: item })}>
34+
<TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
3535
<Block flex style={imgContainer}>
3636
<Image resizeMode="cover" source={item.image} style={imageStyles} />
3737
</Block>
3838
</TouchableWithoutFeedback>
39-
<TouchableWithoutFeedback onPress={() => navigation.navigate('Product', { product: item })}>
39+
<TouchableWithoutFeedback onPress={() => navigation.navigate('Pro')}>
4040
<Block flex space="between" style={styles.cardDescription}>
4141
<Block flex>
4242
<Text

‎components/DrawerItem.js‎

Lines changed: 71 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,102 @@
1-
import React from 'react';
2-
import { StyleSheet } from 'react-native';
3-
import { Block, Text, theme } from 'galio-framework';
1+
import React from "react";
2+
import { StyleSheet, TouchableOpacity, Linking } from "react-native";
3+
import { Block, Text, theme } from "galio-framework";
44

5-
import Icon from './Icon';
6-
import nowTheme from '../constants/Theme';
5+
import Icon from "./Icon";
6+
import nowTheme from "../constants/Theme";
77

88
class DrawerItem extends React.Component {
99
renderIcon = () => {
1010
const { title, focused } = this.props;
1111

1212
switch (title) {
13-
case 'Home':
13+
case "Home":
1414
return (
1515
<Icon
1616
name="app2x"
1717
family="NowExtra"
1818
size={18}
19-
color={focused ? nowTheme.COLORS.PRIMARY : 'white'}
19+
color={focused ? nowTheme.COLORS.PRIMARY : "white"}
2020
style={{ opacity: 0.5 }}
21-
/>
21+
/>
2222
);
23-
case 'Components':
23+
case "Components":
2424
return (
2525
<Icon
2626
name="atom2x"
2727
family="NowExtra"
28-
size={18} color={focused ? nowTheme.COLORS.PRIMARY : 'white'}
28+
size={18}
29+
color={focused ? nowTheme.COLORS.PRIMARY : "white"}
2930
style={{ opacity: 0.5 }}
30-
/>
31+
/>
3132
);
32-
case 'Articles':
33+
case "Articles":
3334
return (
3435
<Icon
3536
name="paper"
3637
family="NowExtra"
3738
size={18}
38-
color={focused ? nowTheme.COLORS.PRIMARY : 'white'}
39+
color={focused ? nowTheme.COLORS.PRIMARY : "white"}
3940
style={{ opacity: 0.5 }}
40-
/>
41+
/>
4142
);
42-
case 'Profile':
43+
case "Profile":
4344
return (
4445
<Icon
4546
name="profile-circle"
4647
family="NowExtra"
4748
size={18}
48-
color={focused ? nowTheme.COLORS.PRIMARY : 'white'}
49+
color={focused ? nowTheme.COLORS.PRIMARY : "white"}
4950
style={{ opacity: 0.5 }}
50-
/>
51+
/>
5152
);
52-
case 'Account':
53+
case "Account":
5354
return (
5455
<Icon
5556
name="badge2x"
5657
family="NowExtra"
5758
size={18}
58-
color={focused ? nowTheme.COLORS.PRIMARY : 'white'}
59+
color={focused ? nowTheme.COLORS.PRIMARY : "white"}
60+
style={{ opacity: 0.5 }}
61+
/>
62+
);
63+
case "Settings":
64+
return (
65+
<Icon
66+
name="settings-gear-642x"
67+
family="NowExtra"
68+
size={18}
69+
color={focused ? nowTheme.COLORS.PRIMARY : "white"}
5970
style={{ opacity: 0.5 }}
60-
/>
71+
/>
6172
);
62-
case 'Examples':
73+
case "Examples":
6374
return (
6475
<Icon
6576
name="album"
6677
family="NowExtra"
6778
size={14}
68-
color={focused ? nowTheme.COLORS.PRIMARY : 'white'}
79+
color={focused ? nowTheme.COLORS.PRIMARY : "white"}
6980
/>
7081
);
71-
case 'GETTING STARTED':
82+
case "GETTING STARTED":
7283
return (
7384
<Icon
7485
name="spaceship2x"
7586
family="NowExtra"
7687
size={18}
77-
style={{ borderColor: 'rgba(0,0,0,0.5)', opacity: 0.5 }}
78-
color={focused ? nowTheme.COLORS.PRIMARY : 'white'}
88+
style={{ borderColor: "rgba(0,0,0,0.5)", opacity: 0.5 }}
89+
color={focused ? nowTheme.COLORS.PRIMARY : "white"}
7990
/>
8091
);
81-
case 'LOGOUT':
92+
case "LOGOUT":
8293
return (
8394
<Icon
8495
name="share"
8596
family="NowExtra"
8697
size={18}
87-
style={{ borderColor: 'rgba(0,0,0,0.5)', opacity: 0.5 }}
88-
color={focused ? nowTheme.COLORS.PRIMARY : 'white'}
98+
style={{ borderColor: "rgba(0,0,0,0.5)", opacity: 0.5 }}
99+
color={focused ? nowTheme.COLORS.PRIMARY : "white"}
89100
/>
90101
);
91102
default:
@@ -94,29 +105,44 @@ class DrawerItem extends React.Component {
94105
};
95106

96107
render() {
97-
const { focused, title } = this.props;
108+
const { focused, title, navigation } = this.props;
98109

99110
const containerStyles = [
100111
styles.defaultStyle,
101112
focused ? [styles.activeStyle, styles.shadow] : null
102113
];
103114

104115
return (
105-
<Block flex row style={containerStyles}>
106-
<Block middle flex={0.1} style={{ marginRight: 5 }}>
107-
{this.renderIcon()}
108-
</Block>
109-
<Block row center flex={0.9}>
110-
<Text
111-
style={{ fontFamily: 'montserrat-regular', textTransform: 'uppercase', fontWeight: '300' }}
112-
size={12}
113-
bold={focused ? true : false}
114-
color={focused ? nowTheme.COLORS.PRIMARY : 'white'}
115-
>
116-
{title}
117-
</Text>
116+
<TouchableOpacity
117+
style={{ height: 60 }}
118+
onPress={() =>
119+
title == "GETTING STARTED"
120+
? Linking.openURL(
121+
"https://demos.creative-tim.com/now-ui-pro-react-native/docs/"
122+
).catch(err => console.error("An error occurred", err))
123+
: navigation.navigate(title == 'LOGOUT' ? 'Onboarding' : title)
124+
}
125+
>
126+
<Block flex row style={containerStyles}>
127+
<Block middle flex={0.1} style={{ marginRight: 5 }}>
128+
{this.renderIcon()}
129+
</Block>
130+
<Block row center flex={0.9}>
131+
<Text
132+
style={{
133+
fontFamily: "montserrat-regular",
134+
textTransform: "uppercase",
135+
fontWeight: "300"
136+
}}
137+
size={12}
138+
bold={focused ? true : false}
139+
color={focused ? nowTheme.COLORS.PRIMARY : "white"}
140+
>
141+
{title}
142+
</Text>
143+
</Block>
118144
</Block>
119-
</Block>
145+
</TouchableOpacity>
120146
);
121147
}
122148
}
@@ -125,12 +151,12 @@ const styles = StyleSheet.create({
125151
defaultStyle: {
126152
paddingVertical: 15,
127153
paddingHorizontal: 14,
128-
color: 'white'
154+
color: "white"
129155
},
130156
activeStyle: {
131157
backgroundColor: nowTheme.COLORS.WHITE,
132158
borderRadius: 30,
133-
color: 'white'
159+
color: "white"
134160
},
135161
shadow: {
136162
shadowColor: theme.COLORS.BLACK,

‎navigation/Menu.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ function CustomDrawerContent({
3131
"Articles",
3232
"Profile",
3333
"Account",
34-
"Settings"
3534
];
3635
return (
3736
<Block

‎navigation/Screens.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Drawer = createDrawerNavigator();
2727
function ComponentsStack(props) {
2828
return (
2929
<Stack.Navigator>
30-
<Stack.Screen name="Components" articles={Components} options={{
30+
<Stack.Screen name="Components" component={Components} options={{
3131
navigationOptions:({ navigation, scene }) => ({
3232
header: <Header title="Components" navigation={navigation} scene={scene} />
3333
}),
@@ -37,7 +37,6 @@ function ComponentsStack(props) {
3737
);
3838
}
3939

40-
4140
function SettingsStack(props) {
4241
return (
4342
<Stack.Navigator initialRouteName="Settings" mode="card" headerMode="screen">
@@ -69,7 +68,6 @@ function AccountStack(props) {
6968
options={{
7069
header: ({ navigation, scene }) => (
7170
<Header
72-
white
7371
transparent
7472
title="Create Account"
7573
navigation={navigation}
@@ -200,6 +198,7 @@ function AppStack(props) {
200198
<Drawer.Screen name="Articles" component={ArticlesStack} />
201199
<Drawer.Screen name="Profile" component={ProfileStack} />
202200
<Drawer.Screen name="Account" component={AccountStack} />
201+
<Drawer.Screen name="Settings" component={AccountStack} />
203202
</Drawer.Navigator>
204203
);
205204
}

‎screens/Pro.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ class Pro extends React.Component {
8282
onPress={() => navigation.navigate("Home")}
8383

8484
>
85-
Comming Soon
85+
BUY NOW
8686
</Button>
8787
</Block>
8888
</Block>

0 commit comments

Comments
 (0)