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'
}
});
view raw App.js hosted with ❤ by GitHub