|
import React from 'react'; |
|
import { StyleSheet, Text, View, Dimensions, StatusBar } from 'react-native'; |
|
|
|
import { LinearGradient } from 'expo-linear-gradient'; |
|
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; |
|
import { faBars } from '@fortawesome/free-solid-svg-icons'; |
|
|
|
|
|
export default function App() { |
|
|
|
return ( |
|
<LinearGradient colors={['#282828', '#121212']} style={styles.linearGradient}> |
|
<StatusBar |
|
barStyle = "light-content" |
|
hidden = {false} |
|
backgroundColor = "#121212" |
|
translucent = {true} |
|
networkActivityIndicatorVisible = {true} |
|
/> |
|
|
|
<View style={styles.topbar}> |
|
<View style={styles.topbar_inner}> |
|
<FontAwesomeIcon icon={faBars} style={styles.topbar_hamburger} /> |
|
<View style={styles.topbar_avatar}></View> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.spaceBetween}> |
|
<View style={styles.header}> |
|
<Text style={styles.header_title}>D3 + ART Bar Graph</Text> |
|
<Text style={styles.header_sub}>Made by you bc you're a bad ass.</Text> |
|
</View> |
|
|
|
|
|
{/* |
|
* |
|
* The Column Chart will live here |
|
* |
|
*/} |
|
|
|
</View> |
|
|
|
<View style={styles.footer}></View> |
|
</LinearGradient> |
|
); |
|
} |
|
|
|
const styles = StyleSheet.create({ |
|
linearGradient: { |
|
flex: 1, |
|
height: Math.round(Dimensions.get('window').height), |
|
justifyContent: 'space-between', |
|
}, |
|
topbar: { |
|
backgroundColor: 'rgba(18,18,18,0.75)', |
|
bottom: 2, |
|
height: 68 |
|
}, |
|
topbar_inner: { |
|
marginTop: 25, |
|
paddingTop: 10, |
|
paddingBottom: 10, |
|
paddingHorizontal: 15, |
|
flexDirection: 'row', |
|
justifyContent: 'space-between', |
|
alignItems: 'center', |
|
backgroundColor: '#121212' |
|
}, |
|
topbar_hamburger: { |
|
padding: 10, |
|
color: '#fff' |
|
}, |
|
topbar_avatar: { |
|
borderRadius: 100, |
|
width: 25, |
|
height: 25, |
|
borderColor: '#fff', |
|
borderWidth: 1 |
|
}, |
|
footer: { |
|
height: 70, |
|
backgroundColor: '#232323', |
|
}, |
|
header: { |
|
paddingTop: 20, |
|
paddingLeft: 25, |
|
}, |
|
header_title: { |
|
color: '#fff', |
|
fontSize: 34, |
|
textTransform: 'capitalize', |
|
}, |
|
header_sub: { |
|
color: '#fff', |
|
fontSize: 16, |
|
fontStyle: 'italic' |
|
}, |
|
spaceBetween: { |
|
flex: 1, |
|
justifyContent: 'space-between' |
|
} |
|
}); |