Design and Create Home Screen

[maxmagee]

Design and create the home screen. There are a few things to consider here:

• The render of the home screen changes if you are logged in or not. For this issue, implement just the logged out view.
• The background image and text changes based on day of the week (they're closed on Sunday) and time of day.
• The background image blurs on scroll position.
• The scrolling content moves 'over' the header text.
• The 'gear' icon fades based on scroll position too I believe.

[maxmagee]

This might be how I handle the scrolling content 'over' the header text. Found here

Try declaring your background element "behind" the ScrollView using position:absolute within a position:relative container, and make the ScrollView transparent to let the background show through:

<View style={[styles.container]}>
  <View style={[styles.fixed]}>
    {backgroundImageContent}
  </View>
  <ScrollView style={[styles.fixed, {backgroundColor: 'transparent'}]}>
    {scrollableContent}
  </ScrollView>
</View>

var styles = StyleSheet.create({
  container: {
    position: 'relative'
  },
  fixed: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  }
})