fix: display screen size

flexn-io · Apr 22, 2024 · b9dcc0d · b9dcc0d
1 parent 3c58430
commit b9dcc0d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/template-starter/src/components/menu.tv.native.tsx b/packages/template-starter/src/components/menu.tv.native.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Animated } from 'react-native';
+import { Animated, useWindowDimensions } from 'react-native';
 import { TouchableOpacity, Text, Screen, setFocus } from '@flexn/create';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { ThemeContext, ROUTES, Ratio } from '../config';
@@ -11,6 +11,7 @@ const TRANSLATE_VAL_HIDDEN = Ratio(-300);
 
 const Menu = ({ navigation }: { navigation?: any }) => {
     const navigate = useNavigate({ navigation });
+    const { height } = useWindowDimensions();
     const { theme } = useContext(ThemeContext);
 
     const translateBgAnim = useRef(new Animated.Value(TRANSLATE_VAL_HIDDEN)).current;
@@ -59,7 +60,7 @@ const Menu = ({ navigation }: { navigation?: any }) => {
 
     return (
         <Screen
-            style={theme.styles.menuContainer}
+            style={[theme.styles.menuContainer, { minHeight: height }]}
             onFocus={onFocus}
             onBlur={onBlur}
             focusOptions={{

diff --git a/packages/template-starter/src/screens/screen.tsx b/packages/template-starter/src/screens/screen.tsx
@@ -1,9 +1,11 @@
 import { Screen as FMScreen, ScreenProps, ScreenStates } from '@flexn/create';
 import React, { useState, useCallback } from 'react';
 import { useFocusEffect } from '../hooks';
+import { useWindowDimensions } from 'react-native';
 
 const Screen = ({ children, focusOptions, style, ...rest }: ScreenProps) => {
     const [screenState, setScreenState] = useState<ScreenStates>('foreground');
+    const { height, width } = useWindowDimensions();
 
     useFocusEffect(
         useCallback(() => {
@@ -16,7 +18,11 @@ const Screen = ({ children, focusOptions, style, ...rest }: ScreenProps) => {
     );
 
     return (
-        <FMScreen focusOptions={{ ...focusOptions, screenState }} style={style} {...rest}>
+        <FMScreen
+            focusOptions={{ ...focusOptions, screenState }}
+            style={[style, { minHeight: height, minWidth: width }]}
+            {...rest}
+        >
             {children}
         </FMScreen>
     );