[WEB] Fix zero height

src/components/common/Screen.tsx

@@ -3,7 +3,6 @@ import { StyleSheet, View, ViewStyle } from 'react-native'
 import SplashScreen from 'react-native-splash-screen'
 import { SafeAreaView } from 'react-navigation'
 
-import Platform from '../../../src/libs/platform'
 import theme from '../../styles/themes/dark'
 
 let isSplashScreenVisible = true
@@ -23,7 +22,7 @@ const styles = StyleSheet.create({
 
 export default class Screen extends PureComponent<IProps> {
   static defaultProps = {
-    useSafeArea: Platform.OS !== 'web',
+    useSafeArea: true,
   }
 
   componentDidMount() {
@@ -36,7 +35,7 @@ export default class Screen extends PureComponent<IProps> {
   render() {
     const { useSafeArea, style, ...props } = this.props
 
-    if (useSafeArea && Platform.OS !== 'web')
+    if (useSafeArea)
       return <SafeAreaView {...props} style={[styles.container, style]} />
 
     return <View {...props} style={[styles.container, style]} />

src/components/common/Screen.web.tsx

@@ -0,0 +1,32 @@
+import React, { PureComponent, ReactNode } from 'react'
+import { SafeAreaView, StyleSheet, View, ViewStyle } from 'react-native'
+
+import theme from '../../styles/themes/dark'
+
+export interface IProps {
+  children?: ReactNode
+  useSafeArea?: boolean
+  style?: ViewStyle
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.base00,
+    flex: 1,
+  } as ViewStyle,
+})
+
+export default class Screen extends PureComponent<IProps> {
+  static defaultProps = {
+    useSafeArea: true,
+  }
+
+  render() {
+    const { useSafeArea, style, ...props } = this.props
+
+    if (useSafeArea)
+      return <SafeAreaView {...props} style={[styles.container, style]} />
+
+    return <View {...props} style={[styles.container, style]} />
+  }
+}

web/src/index.css

@@ -16,7 +16,7 @@
   box-sizing: border-box;
 }
 
-html, body {
+html, body, #root, #root > div {
   width: 100%;
   height: 100%;
   overflow: hidden;