Bottom Card Home Screen React-Native

index.js

import React, {PureComponent} from 'react'
import {View, Image, Text, ScrollView} from 'react-native'

//import leafImg from './img/leaf-bg.jpg'

import styles from './styles'

class Home extends PureComponent {
  render() {
    return (
      <View style={styles.Flex1}>
      <Image
          source={leafImg}
          style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}
          resizeMode="repeat"
        />
        <View style={styles.Page}>
          <View style={styles.TitleBar} />
          <Text style={styles.PageTitle}>Ludisia{'\n'}Discolor</Text>
          <View style={styles.Cards}>
            <View style={[styles.TopCard]}>
              <Text
                style={[
                  styles.H4,
                  styles.Bold,
                  {marginLeft: 16, color: '#ffffff'},
                ]}>
                Plants Ready for Watering
              </Text>
              <ScrollView horizontal style={styles.ScrollView}>
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
                <View style={styles.IconBoxSM} />
              </ScrollView>
            </View>

            <View style={styles.BottomCard}>
              <View style={[styles.TopRow]}>
                <View style={styles.CardTopLeft}>
                  <Text style={[styles.H4, styles.Bold]}>Next Watering in</Text>
                  <Text style={[styles.H1, styles.Black]}>1 day</Text>
                  <Text style={[styles.H4, styles.LightText]}>
                    watering every 7 days
                  </Text>
                </View>

                <View style={styles.CardTopRight}>
                  <View style={styles.IconBox} />
                </View>
              </View>

              <View style={styles.NavBar}>
                <Text style={styles.H2}>(Y)</Text>
                <Text style={styles.H1}>(+)</Text>
                <Text style={styles.H2}>(B)</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

export default Home

styles.js

import {StyleSheet} from 'react-native'

let styles = StyleSheet.create({
  // Main Sections
  H1: {
    fontFamily: 'roboto-regular',
    fontSize: 45,
  },
  H2: {
    fontFamily: 'roboto-regular',
    fontSize: 35,
  },
  H3: {
    fontFamily: 'roboto-regular',
    fontSize: 25,
  },
  H4: {
    fontFamily: 'roboto-regular',
    fontSize: 16,
  },

  Text: {
    fontFamily: 'roboto-regular',
  },

  Bold: {
    fontFamily: 'roboto-bold',
  },

  Black: {
    fontFamily: 'roboto-black',
  },

  LightText: {
    fontFamily: 'roboto-regular',
    color: '#93adc1',
  },

  Flex1: {
    flex: 1,
  },
  Row: {
    flexDirection: 'row',
  },

  TitleBar: {
    marginTop: 22,
    height: 30,
  },
  PageTitle: {
    color: '#ffffff',
    fontSize: 47,
    fontFamily: 'roboto-bold',
    marginTop: 10,
    marginLeft: 16,
  },
  Page: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0, 0.5)',
  },
  Cards: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    justifyContent: 'flex-end',
  },

  TopCard: {
    overflow: 'hidden',
    flex: 0,
    paddingTop: 20,
    height: 160,
    marginBottom: -18,
    backgroundColor: 'rgba(0,0,0, 0.7)',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },

  BottomCard: {
    overflow: 'hidden',
    flex: 0,
    padding: 16,
    height: 245,
    backgroundColor: '#ffffff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  TopRow: {
    flex: 1,
    flexDirection: 'row',
    marginTop: 25,
  },
  CardTopLeft: {
    flex: 1,
  },
  CardTopRight: {
    flex: 0,
    width: 100,
    alignItems: 'center',
  },
  IconBox: {
    height: 100,
    width: 100,
    borderRadius: 20,
    backgroundColor: '#1dc6b2',
  },

  ScrollView: {
    marginTop: 15,
  },

  IconBoxSM: {
    height: 70,
    width: 70,
    marginLeft: 10,
    borderRadius: 10,
    backgroundColor: '#1dc6b2',
  },

  NavBar: {
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'flex-end',
  },
})

export default {
  ...styles,
}