/
App.js
58 lines (53 loc) · 1.42 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
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import BreadCrumb from 'react-native-breadcrumb-navigation';
export default function App() {
const trailData = ['Home', 'Explore', 'Message', 'Settings'];
const [selectedIndex, setSelectedIndex] = useState(0);
const updateSelection = (index) => {
setSelectedIndex(index);
}
return (
<View style={styles.container}>
<Text style={styles.title}> react-native-breadcrumb-navigation </Text>
<BreadCrumb
trailData={trailData}
selectedIndex={selectedIndex}
onPress={updateSelection}
backgroundColor={'#2196f3'}
fontColor={'#000000'}
fontSize={15}
height={'10%'}
top={'24%'}
textSpacing={'4%'}
/>
<Text style={styles.bodyText}> Selected Trail: {' '}{trailData[selectedIndex]} </Text>
<Text style={styles.creditText}> Author: Marcus Lee Eugene </Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
top: '-30%'
},
bodyText: {
fontSize: 17,
top: '-10%'
},
creditText: {
fontSize: 17,
fontWeight: 'bold',
top: '15%',
opacity: .7
}
});