From 225e5635b26193dec529f777709ade57e44b2911 Mon Sep 17 00:00:00 2001
From: Noah Malmed <nmalmed@adlerplanetarium.org>
Date: Thu, 8 Feb 2018 15:49:57 -0600
Subject: [PATCH] ImageBackground is the new proper component to use here

---
 src/components/Onboarding.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/Onboarding.js b/src/components/Onboarding.js
index e245340d..1a6dd17b 100644
--- a/src/components/Onboarding.js
+++ b/src/components/Onboarding.js
@@ -2,6 +2,7 @@ import React from 'react'
 import {
   Animated,
   Image,
+  ImageBackground,
   StatusBar,
   View
 } from 'react-native'
@@ -59,7 +60,7 @@ class Onboarding extends React.Component {
     var requiredImage = this.getRandomImage(images)
 
     return (
-      <Image source={requiredImage} style={styles.container}>
+      <ImageBackground source={requiredImage} style={styles.container}>
         <View style={styles.logoContainer}>
           <Image source={require('../../images/logo.png')} style={styles.logo} />
           <StyledText
@@ -75,8 +76,7 @@ class Onboarding extends React.Component {
               text={'Get Started'} />
           </Animated.View>
         </View>
-
-      </Image>
+      </ImageBackground>
     );
   }
 }
@@ -85,8 +85,6 @@ const styles = EStyleSheet.create({
   container: {
     backgroundColor: 'black',
     flex: 1,
-    width: null,
-    height: null,
   },
   logoContainer: {
     flex: 1,
@@ -112,8 +110,8 @@ const styles = EStyleSheet.create({
     width: '80%',
   },
   footerContainer: {
-    position: 'absolute',
-    bottom: 50,
+    alignSelf: 'flex-end',
+    paddingBottom: 50,
     flex: 1,
     flexDirection: 'column',
     alignItems: 'center',
@@ -131,7 +129,8 @@ const styles = EStyleSheet.create({
     color: '$darkTeal',
     fontFamily: 'OpenSans-Semibold',
     fontSize: 22,
-    letterSpacing: 1
+    letterSpacing: 1,
+    textAlign: 'center',
   }