Merge pull request #91 from thornbill/safe-space

Add safe area support
jellyfin · Jun 23, 2020 · 209e48e · 209e48e
2 parents da3bed8 + 9b12989
commit 209e48e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/App.js b/App.js
@@ -6,6 +6,7 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, StatusBar } from 'react-native';
 import { ThemeProvider } from 'react-native-elements';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { AppLoading } from 'expo';
 import { Asset } from 'expo-asset';
 import * as Font from 'expo-font';
@@ -56,10 +57,12 @@ function App({ skipLoadingScreen }) {
  }
 
  return (
- <ThemeProvider theme={Theme}>
- {Platform.OS === 'ios' && <StatusBar barStyle="light-content" />}
- <AppNavigator />
- </ThemeProvider>
+ <SafeAreaProvider>
+ <ThemeProvider theme={Theme}>
+ {Platform.OS === 'ios' && <StatusBar barStyle="light-content" />}
+ <AppNavigator />
+ </ThemeProvider>
+ </SafeAreaProvider>
  );
 }
 

diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
@@ -6,6 +6,7 @@
 import React from 'react';
 import { Platform, RefreshControl, StatusBar, StyleSheet, ScrollView, View } from 'react-native';
 import { Button, Text } from 'react-native-elements';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { WebView } from 'react-native-webview';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import Constants from 'expo-constants';
@@ -201,12 +202,13 @@ class HomeScreen extends React.Component {
  }
 
  render() {
+ // When not in fullscreen, the top adjustment is handled by the spacer View
+ const safeAreaStyle = this.state.isFullscreen ? styles.container : { ...styles.container, paddingTop: 0 };
  // Hide webview until loaded
- const webviewStyle = (this.state.isError || this.state.isLoading) ?
- styles.loading : styles.container;
+ const webviewStyle = (this.state.isError || this.state.isLoading) ? styles.loading : styles.container;
 
  return (
- <View style={styles.container}>
+ <SafeAreaView style={safeAreaStyle} >
  {!this.state.isFullscreen && (
  <View style={styles.statusBarSpacer} />
  )}
@@ -258,7 +260,7 @@ class HomeScreen extends React.Component {
  />
  )}
  </ScrollView>
- </View>
+ </SafeAreaView>
  );
  }
 }

diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js
@@ -15,6 +15,7 @@ import {
  View
 } from 'react-native';
 import { Button, colors, ListItem, Text, Icon, Overlay } from 'react-native-elements';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import Constants from 'expo-constants';
 import Url from 'url';
 import { useNavigation } from '@react-navigation/native';
@@ -216,7 +217,7 @@ class SettingsScreen extends React.Component {
 
  render() {
  return (
- <React.Fragment>
+ <SafeAreaView style={{...styles.container, paddingTop: 0}} >
  <ScrollView
  style={styles.container}
  showsVerticalScrollIndicator={false}
@@ -281,7 +282,7 @@ class SettingsScreen extends React.Component {
  successScreen={'Home'}
  />
  </Overlay>
- </React.Fragment>
+ </SafeAreaView>
  );
  }
 }