diff --git a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx index 05d180a1..966a01a5 100644 --- a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx +++ b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx @@ -23,6 +23,7 @@ function BottomTabNavigator({ backBehavior, children, screenOptions, + sceneContainerStyle, ...rest }: Props) { const { state, descriptors, navigation } = useNavigationBuilder< @@ -43,6 +44,7 @@ function BottomTabNavigator({ state={state} navigation={navigation} descriptors={descriptors} + sceneContainerStyle={sceneContainerStyle} /> ); } diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx index cfefd536..fc1dc2ff 100644 --- a/packages/bottom-tabs/src/types.tsx +++ b/packages/bottom-tabs/src/types.tsx @@ -170,6 +170,10 @@ export type BottomTabNavigationConfig = { * Options for the tab bar which will be passed as props to the tab bar component. */ tabBarOptions?: T; + /** + * Style object for the component wrapping the screen content. + */ + sceneContainerStyle?: StyleProp; }; export type BottomTabBarOptions = { diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx index 8b538618..60e7e52f 100644 --- a/packages/bottom-tabs/src/views/BottomTabView.tsx +++ b/packages/bottom-tabs/src/views/BottomTabView.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { View, StyleSheet } from 'react-native'; +import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'; import { NavigationHelpersContext, @@ -31,9 +31,11 @@ type State = { function SceneContent({ isFocused, children, + style, }: { isFocused: boolean; children: React.ReactNode; + style?: StyleProp; }) { const { colors } = useTheme(); @@ -41,7 +43,7 @@ function SceneContent({ {children} @@ -85,7 +87,13 @@ export default class BottomTabView extends React.Component { }; render() { - const { state, descriptors, navigation, lazy } = this.props; + const { + state, + descriptors, + navigation, + lazy, + sceneContainerStyle, + } = this.props; const { routes } = state; const { loaded } = this.state; @@ -114,7 +122,10 @@ export default class BottomTabView extends React.Component { style={StyleSheet.absoluteFill} isVisible={isFocused} > - + {descriptor.render()}