Skip to content

Commit 3c52005

Browse files
ibanjbibanjb
committed
Add some screens
1 parent 10ffe4d commit 3c52005

15 files changed

+131
-21
lines changed

‎App.js

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,17 @@ import React from 'react';
22
import { StyleSheet, Text, View, StatusBar } from 'react-native';
33
import { StackNavigator } from 'react-navigation';
44
import { AppLoading } from 'expo';
5+
import { Drawer } from 'native-base';
6+
7+
import Sidebar from './screens/Sidebar';
58
import Home from './screens/Home';
69
import Article from './screens/Article';
10+
import ClassicLayout from './screens/ClassicLayout';
711

812
const AppStackNavigator = StackNavigator({
913
HomeScreen: { screen: Home, navigationOptions: { header: false, }},
1014
ArticleScreen: { screen: Article, navigationOptions: { header: false, }},
15+
ClassicLayoutScreen: { screen: ClassicLayout, navigationOptions: { header: false, }},
1116
});
1217

1318
console.disableYellowBox = true;
@@ -28,8 +33,16 @@ export default class App extends React.Component {
2833
});
2934
}
3035

36+
closeDrawer = () => {
37+
this.drawer._root.close()
38+
};
39+
openDrawer = () => {
40+
this.drawer._root.open()
41+
};
42+
3143
render() {
32-
const isLoading = this.state.isLoading;
44+
const isLoading = this.state.isLoading;
45+
3346
if (isLoading) {
3447
return (
3548
<AppLoading
@@ -40,10 +53,15 @@ export default class App extends React.Component {
4053
);
4154
}
4255
return (
43-
<View style={styles.container}>
44-
<StatusBar backgroundColor='tomato' barStyle='light-content' />
45-
<AppStackNavigator />
56+
<Drawer
57+
ref={(ref) => { this.drawer = ref; }}
58+
content={<Sidebar />}
59+
onClose={() => this.closeDrawer()} >
60+
<View style={styles.container}>
61+
<StatusBar backgroundColor='tomato' barStyle='light-content' />
62+
<AppStackNavigator />
4663
</View>
64+
</Drawer>
4765
);
4866
}
4967
}

‎assets/img/barcelona.png

150 KB
Loading

‎mockups/concept.jpg

478 KB
Loading

‎mockups/explore.gif

3.08 MB
Loading

‎mockups/explore.png

967 KB
Loading

‎mockups/exploreApp.jpg

84.8 KB
Loading

‎mockups/real_routeme.png

1.04 MB
Loading

‎mockups/routme.png

467 KB
Loading

‎mockups/tourism.jpg

295 KB
Loading

‎mockups/tourismapp.jpg

57.8 KB
Loading

‎mockups/travelapp.png

649 KB
Loading

‎mockups/walkthrough.gif

2.91 MB
Loading

‎screens/ClassicLayout.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { StyleSheet,View, Dimensions, ImageBackground, TouchableOpacity, Image } from 'react-native';
3+
import { Container, Header, Content, Footer, FooterTab, Button, Icon, Text } from 'native-base';
4+
5+
const SCREEN_HEIGHT = Dimensions.get('window').height;
6+
const SCREEN_WIDTH = Dimensions.get('window').width;
7+
const IMAGE_BACKGROUND = require('../assets/img/background.jpg');
8+
9+
export default class ClassicLayout extends React.Component {
10+
render() {
11+
return (
12+
<ImageBackground source={IMAGE_BACKGROUND} style={{flex: 1}}>
13+
<Container>
14+
<Content />
15+
<Footer>
16+
<FooterTab style={{ backgroundColor: 'tomato'}}>
17+
<Button vertical active style={{ backgroundColor: 'tomato'}}>
18+
<Icon active name="walk" style={{ color: 'yellow'}} />
19+
<Text style={{ color: 'yellow'}}>A prop teu</Text>
20+
</Button>
21+
<Button vertical style={{ backgroundColor: 'tomato'}}>
22+
<Icon name="ribbon" />
23+
<Text>Destacat</Text>
24+
</Button>
25+
<Button vertical style={{ backgroundColor: 'tomato'}}>
26+
<Icon name="navigate" />
27+
<Text>Cercar</Text>
28+
</Button>
29+
<Button vertical style={{ backgroundColor: 'tomato'}}>
30+
<Icon name="text" />
31+
<Text>Parlem?</Text>
32+
</Button>
33+
</FooterTab>
34+
</Footer>
35+
</Container>
36+
</ImageBackground>
37+
);
38+
}
39+
}

‎screens/Home.js

Lines changed: 48 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,64 @@ import { Container, Header, Content, Footer, FooterTab, Button, Icon, Text } fro
55
const SCREEN_HEIGHT = Dimensions.get('window').height;
66
const SCREEN_WIDTH = Dimensions.get('window').width;
77
const IMAGE_BACKGROUND = require('../assets/img/background.jpg');
8+
const BARCELONA = require('../assets/img/barcelona.png');
9+
export default class Home extends React.Component {
10+
11+
onPress = () => {
12+
console.log('pressed');
13+
}
814

9-
export default class Home extends React.Component {
1015
render() {
16+
// with footer, height - 140
17+
//const availableHeight = SCREEN_HEIGHT - 140;
18+
19+
// withou footer, height - 84
20+
const availableHeight = SCREEN_HEIGHT - 84;
21+
22+
const boxHeight = availableHeight / 3;
23+
1124
return (
1225
<ImageBackground source={IMAGE_BACKGROUND} style={{flex: 1}}>
1326
<Container>
14-
<Content />
27+
<Content>
28+
<View style={{ flex: 1, backgroundColor: 'white', height: 60}}>
29+
</View>
30+
<View style={{ flex: 1 }}>
31+
<View>
32+
<TouchableOpacity onPress={this._onPressButton} style={{ flex: 1, backgroundColor: '#8b9fbf', height: boxHeight, width: undefined, alignItems: 'center'}}>
33+
<Image source={BARCELONA} style={{ resizeMode: 'cover', opacity: 0.2 }} />
34+
</TouchableOpacity>
35+
</View>
36+
<View>
37+
<TouchableOpacity onPress={this._onPressButton} style={{ flex: 1, backgroundColor: 'white', height: boxHeight, width: undefined, alignItems: 'center'}}>
38+
<Image source={BARCELONA} style={{ resizeMode: 'cover', opacity: 0.2 }} />
39+
</TouchableOpacity>
40+
</View>
41+
<View>
42+
<TouchableOpacity onPress={this._onPressButton} style={{ flex: 1, backgroundColor: 'grey', height: boxHeight, width: undefined, alignItems: 'center'}}>
43+
<Image source={BARCELONA} style={{ resizeMode: 'cover', opacity: 0.2 }} />
44+
</TouchableOpacity>
45+
</View>
46+
</View>
47+
</Content>
48+
{/*
1549
<Footer>
16-
<FooterTab style={{ backgroundColor: 'tomato'}}>
17-
<Button vertical style={{ backgroundColor: 'tomato'}}>
18-
<Icon active name="walk" style={{ color: 'yellow'}} />
19-
<Text style={{ color: 'yellow'}}>A prop teu</Text>
20-
</Button>
21-
<Button vertical active style={{ backgroundColor: 'tomato'}}>
22-
<Icon name="ribbon" />
23-
<Text>Destacat</Text>
50+
<FooterTab style={{ backgroundColor: 'tomato' }}>
51+
<Button>
52+
<Icon active name="md-navigate" style={{ color: '#e3cd1d'}} />
2453
</Button>
25-
<Button vertical active style={{ backgroundColor: 'tomato'}}>
26-
<Icon name="navigate" />
27-
<Text>Cercar</Text>
54+
<Button>
55+
<Icon name="md-apps" />
2856
</Button>
29-
<Button vertical style={{ backgroundColor: 'tomato'}}>
30-
<Icon name="text" />
31-
<Text>Parlem?</Text>
57+
<Button>
58+
<Icon name="md-chatbubbles" />
59+
</Button>
60+
<Button>
61+
<Icon name="md-person" />
3262
</Button>
3363
</FooterTab>
34-
</Footer>
64+
</Footer>
65+
*/ }
3566
</Container>
3667
</ImageBackground>
3768
);

‎screens/Sidebar.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { Container,Content, Text } from 'native-base';
3+
4+
export default class Sidebar extends React.Component {
5+
6+
constructor(props) {
7+
super(props);
8+
this.state = {
9+
shadowOffSetWidth: 1,
10+
shadowRadius: 4,
11+
};
12+
}
13+
render() {
14+
return (
15+
<Container>
16+
<Content style={{ backgroundColor: 'tomato', flex: 1, top: -1 }}>
17+
<Text>Sidebar screen </Text>
18+
</Content>
19+
</Container>
20+
);
21+
}
22+
}

0 commit comments

Comments
 (0)