Safe area view for IPhone x

mobile/AppInternal.js

@@ -15,22 +15,34 @@ import { SafeAreaView, View } from 'react-native'
 import Page from './components/Page'
 
 export class AppInternal extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      backgroundColor: 'white'
+    }
+    this.RouteWithProps = ({component: Component, ...rest}) => <Route {...rest} render={props => <Component {...props} changeSafeAreaViewBackground={this.changeSafeAreaViewBackground.bind(this)} />} />
+  }
+
+  changeSafeAreaViewBackground (color) {
+    this.setState({backgroundColor: color || 'white'})
+  }
+
   render () {
     return (<NativeRouter>
-      <SafeAreaView style={{backgroundColor: 'transparent'}}>
+      <SafeAreaView style={{backgroundColor: this.state.backgroundColor}}>
         <View style={styles.mainPage}>
           <View style={styles.topContainer} />
           {this.props.fontLoaded ? <Page>
-            <Route exact path='/' component={Home} />
-            <Route exact path='/intro' component={Intro} />
-            <Route exact path='/congratulations' component={Congratulations} />
-            <Route exact path='/questions' component={Questions} />
-            <Route exact path='/login' component={Login} />
-            <Route exact path='/lectures' component={Lectures} />
-            <Route exact path='/calendar' component={Calendar} />
-            <Route exact path='/profile' component={Profile} />
-            <Route exact path='/contact' component={Contact} />
-            <Route exact path='/nointernet' component={NoInternet} />
+            <this.RouteWithProps exact path='/' component={Home} />
+            <this.RouteWithProps exact path='/intro' component={Intro} />
+            <this.RouteWithProps exact path='/congratulations' component={Congratulations} />
+            <this.RouteWithProps exact path='/questions' component={Questions} />
+            <this.RouteWithProps exact path='/login' component={Login} />
+            <this.RouteWithProps exact path='/lectures' component={Lectures} />
+            <this.RouteWithProps exact path='/calendar' component={Calendar} />
+            <this.RouteWithProps exact path='/profile' component={Profile} />
+            <this.RouteWithProps exact path='/contact' component={Contact} />
+            <this.RouteWithProps exact path='/nointernet' component={NoInternet} />
           </Page> : null }
         </View>
       </SafeAreaView>

mobile/app.json

@@ -1 +1 @@
-{"expo":{"name":"The Brain Pro","icon":"./assets/icon.png","splash":{"image":"./assets/thebrainprologosplash1242x2208.png","backgroundColor":"#FEF9B0"},"version":"1.1.0","ios":{"bundleIdentifier":"com.thebrain.pro"},"sdkVersion":"23.0.0","packagerOpts":{"projectRoots":"","assetExts":["ttf"],"config":"rn-cli-config-with-links.js"}}}
+{"expo":{"name":"The Brain Pro","icon":"./assets/icon.png","splash":{"image":"./assets/thebrainprologosplash1242x2208.png"},"version":"1.1.0","ios":{"bundleIdentifier":"com.thebrain.pro"},"sdkVersion":"23.0.0","packagerOpts":{"projectRoots":"","assetExts":["ttf"],"config":"rn-cli-config-with-links.js"}}}

mobile/components/MainMenu/components/MainMenuOptions/index.js

@@ -55,6 +55,7 @@ class MainMenuOptions extends React.Component {
 
   go = (path) => () => {
     this.props.history.push(path)
+    this.props.changeSafeAreaViewBackground()
     this.closeMenu()
   }
 

mobile/components/MainMenu/index.js

@@ -60,7 +60,7 @@ class MainMenu extends React.Component {
 
     return <View style={[{height}]}>
       <MainMenuHeader level={level} currentUser={currentUser} username={username} sessionCount={sessionCount} />
-      <MainMenuOptions activated={activated} currentUser={currentUser} />
+      <MainMenuOptions activated={activated} currentUser={currentUser} changeSafeAreaViewBackground={this.props.changeSafeAreaViewBackground} />
     </View>
   }
 

mobile/components/PageContainer.js

@@ -35,10 +35,18 @@ class PageContainer extends React.Component {
     }
   }
 
+  changeSafeAreaViewBackground () {
+    return this.props.changeSafeAreaViewBackground || this.props.location.state.changeSafeAreaViewBackground
+  }
+
+  renderMainMenu = () => {
+    return this.props.mainMenu.visible ? <MainMenu changeSafeAreaViewBackground={this.changeSafeAreaViewBackground()} /> : this.props.children
+  }
+
   renderContainer = () => (
     <View style={{ height: '100%', backgroundColor: 'white' }}>
       <Header />
-      {this.props.mainMenu.visible ? <MainMenu /> : this.props.children}
+      {this.renderMainMenu()}
     </View>)
 
   renderKeyboardAwareContainer = () => (
@@ -50,7 +58,7 @@ class PageContainer extends React.Component {
         height: '100%'
       }}>
         <Header hideHamburger={this.props.hideHamburger} />
-        {this.props.mainMenu.visible ? <MainMenu /> : this.props.children}
+        {this.renderMainMenu()}
       </View>
     </KeyboardAwareScrollView>)
 

mobile/scenes/Calendar/Calendar.js

@@ -16,7 +16,7 @@ class Calendar extends React.Component {
     const year = currentDate.getFullYear()
 
     return (
-      <PageContainer dontUseKeyboarAware>
+      <PageContainer dontUseKeyboarAware changeSafeAreaViewBackground={this.props.changeSafeAreaViewBackground}>
 
         <PageTitle text={`REVIEWS - ${month} ${year}`} />
 

mobile/scenes/Contact/Contact.js

@@ -8,7 +8,7 @@ import PageTitle from '../../components/PageTitle'
 class Contact extends React.Component {
   render () {
     return (
-      <PageContainer dontUseKeyboarAware>
+      <PageContainer dontUseKeyboarAware changeSafeAreaViewBackground={this.props.changeSafeAreaViewBackground}>
 
         <PageTitle text='CONTACT' />
 

mobile/scenes/Home/Home.js

@@ -55,7 +55,10 @@ class Home extends React.Component {
 
     AsyncStorage.getItem('isIntroDisabled').then((isIntroDisabled) => {
       if (!isIntroDisabled) {
-        props.history.push('/intro')
+        props.history.push({
+          pathname: '/intro',
+          state: {changeSafeAreaViewBackground: props.changeSafeAreaViewBackground}
+        })
       }
     })
   }
@@ -193,6 +196,7 @@ class Home extends React.Component {
 
   selectCourse = async (course) => {
     if (!this.props.course.selectedCourse) {
+      this.props.changeSafeAreaViewBackground(course.color)
       const deviceId = Expo.Constants.deviceId
       this.props.dispatch(courseActions.select(course))
       await mutationConnectionHandler(this.props.history, () => {
@@ -240,6 +244,7 @@ class Home extends React.Component {
       this.setState({ isExitAnimationFinished: false })
       this.closeMenu()
       this.enableCourseSelector()
+      this.props.changeSafeAreaViewBackground()
     })
   }
 
@@ -332,7 +337,7 @@ class Home extends React.Component {
 
         {isExitAnimationFinished && <Course closeCourse={this.closeCourse} />}
 
-        {this.props.mainMenu.visible && <MainMenu closeCourse={this.closeCourse} logoutAction={this.logoutAction} />}
+        {this.props.mainMenu.visible && <MainMenu closeCourse={this.closeCourse} logoutAction={this.logoutAction} changeSafeAreaViewBackground={this.props.changeSafeAreaViewBackground} />}
       </View>
     )
   }

mobile/scenes/Lectures/Lectures.js

@@ -34,7 +34,7 @@ class Lectures extends React.Component {
       return <View />
     }
     return (
-      <PageContainer>
+      <PageContainer changeSafeAreaViewBackground={this.props.changeSafeAreaViewBackground}>
         <PageTitle text='LECTURES LIST' />
         <FlatList
           data={this.props.lessons.Lessons}

mobile/scenes/Login/Login.js

@@ -90,7 +90,7 @@ class Login extends React.Component {
       return <Loading />
     }
     return (
-      <PageContainer>
+      <PageContainer changeSafeAreaViewBackground={this.props.changeSafeAreaViewBackground}>
 
         <View style={{ alignItems: 'center' }}>
           <Text style={[styles.infoText, { fontWeight: 'bold', fontSize: 20, marginVertical: 20 }]}>

mobile/scenes/Profile/Profile.js

@@ -89,7 +89,7 @@ class Profile extends React.Component {
     const isFacebookUser = this.props.currentUser && this.props.currentUser.CurrentUser ? this.props.currentUser.CurrentUser.facebookId : false
 
     return (
-      <PageContainer>
+      <PageContainer changeSafeAreaViewBackground={this.props.changeSafeAreaViewBackground}>
         <PageTitle text='PROFILE' />
 
         <View style={{