create container for bottomContent

software-mansion-labs · Feb 3, 2025 · 71a853c · 71a853c
1 parent 007b1ff
commit 71a853c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
@@ -344,10 +344,10 @@ function ScreenWrapper(
                                         <ImportedStateIndicator />
                                     </>
                                 )}
-                                {bottomContent}
                             </ScreenWrapperStatusContext.Provider>
                         </PickerAvoidingView>
                     </KeyboardAvoidingView>
+                    <View style={styles.bottomContentContainer(shouldUseNarrowLayout, paddingBottom)}>{bottomContent}</View>
                 </View>
             </View>
         </FocusTrapForScreens>

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -588,6 +588,13 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.appBG,
         },
 
+        bottomContentContainer: (shouldUseNarrowLayout: boolean, bottomSafeAreaOffset: number) => ({
+            position: Platform.OS === 'web' ? 'fixed' : 'absolute',
+            width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth,
+            paddingBottom: bottomSafeAreaOffset,
+            bottom: 0,
+        }),
+
         bottomTabBarItem: {
             height: '100%',
             display: 'flex',