-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
106 lines (100 loc) · 3.11 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React from 'react';
import {
SafeAreaView,
StyleSheet,
View,
Text,
StatusBar, TouchableOpacity
} from 'react-native';
import {
Colors,
} from 'react-native/Libraries/NewAppScreen';
import Icon from 'react-native-vector-icons/Ionicons';
import TopImageSlider from './Components/ImageSlider';
const App = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<StatusBar backgroundColor='#fff' barStyle="dark-content" />
<View style={styles.mainView}>
<View style={styles.row}>
<TouchableOpacity>
<Icon name='chevron-back' size={25} /></TouchableOpacity>
<Text style={{ color: '#3BCEBE', fontWeight: 'bold' }}>View all plans</Text>
</View>
<TopImageSlider />
<View>
<View style={[styles.row, { marginTop: '5%' }]}>
<Text style={styles.sectionTitle}>Trueno Bolt</Text>
<View style={styles.row}>
<Text style={[styles.sectionTitle, { color: '#3BCEBE' }]}>
Rs 4500 </Text>
<Text style={styles.sectionDescription}>
/ month</Text>
</View>
</View>
<Text style={styles.sectionDescription}>
Electric vehicle</Text>
</View>
<Text style={[styles.sectionDescription, { marginVertical: '5%' }]}>
If you want to travel, running errands or have some fun, Trueno Bolt is the most perfect. Light, smart and affordable!
</Text>
<View style={styles.row}>
<View>
<Text style={styles.sectionDescription}>
Range{'\n'}<Text style={{ fontWeight: 'bold' }}>50mil</Text>
</Text>
</View>
<View>
<Text style={styles.sectionDescription}>
Speed{'\n'}<Text style={{ fontWeight: 'bold' }}>50kph</Text>
</Text>
</View>
<View>
<Text style={styles.sectionDescription}>
Total Distance{'\n'}<Text style={{ fontWeight: 'bold' }}>500kms</Text>
</Text>
</View>
</View>
<Text style={[styles.sectionDescription, { marginVertical: '10%' }]}>
<Text style={{ fontWeight: 'bold' }}>*500 kms </Text>complimentary{'\n'}
(Post 500 kms,<Text style={{ fontWeight: 'bold' }}> Rs 7/km</Text>)</Text>
<TouchableOpacity style={styles.button}>
<Text style={{ color: '#fff', fontWeight: 'bold' }}>Rent this EV</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
mainView: {
flex: 1,
backgroundColor: '#fff',
padding: 15,
justifyContent: 'space-around'
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
sectionTitle: {
fontSize: 18,
fontWeight: 'bold',
color: Colors.black,
},
sectionDescription: {
fontSize: 14,
fontWeight: '400',
color: Colors.dark,
},
button: {
width: '40%',
backgroundColor: '#3BCEBE',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
padding: 10,
borderRadius: 20
},
});
export default App;