@react-navigation/material-top-tabs 8.0.0-alpha.12 → 8.0.0-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/module/views/MaterialTopTabView.js +48 -4
  2. package/lib/module/views/MaterialTopTabView.js.map +1 -1
  3. package/lib/typescript/src/types.d.ts +46 -34
  4. package/lib/typescript/src/types.d.ts.map +1 -1
  5. package/lib/typescript/src/views/MaterialTopTabView.d.ts.map +1 -1
  6. package/package.json +12 -12
  7. package/src/types.tsx +57 -42
  8. package/src/views/MaterialTopTabView.tsx +65 -2
package/lib/module/views/MaterialTopTabView.js CHANGED
@@ -1,6 +1,9 @@
1
1
  "use strict";
2
2
 
3
+ import { ActivityView } from '@react-navigation/elements/internal';
3
4
  import { CommonActions, useLocale, useTheme } from '@react-navigation/native';
5
+ import { useMemo, useState } from 'react';
6
+ import { StyleSheet } from 'react-native';
4
7
  import { TabView } from 'react-native-tab-view';
5
8
  import { TabAnimationContext } from "../utils/TabAnimationContext.js";
6
9
  import { MaterialTopTabBar } from "./MaterialTopTabBar.js";
@@ -48,10 +51,11 @@ export function MaterialTopTabView({
48
51
  renderScene: ({
49
52
  route,
50
53
  position
51
- }) => /*#__PURE__*/_jsx(TabAnimationContext.Provider, {
52
- value: {
53
- position
54
- },
54
+ }) => /*#__PURE__*/_jsx(SceneContent, {
55
+ focused: route.key === state.routes[state.index].key,
56
+ preloaded: state.preloadedRouteKeys.includes(route.key),
57
+ position: position,
58
+ options: descriptors[route.key].options,
55
59
  children: descriptors[route.key].render()
56
60
  }),
57
61
  navigationState: state,
@@ -82,4 +86,44 @@ export function MaterialTopTabView({
82
86
  }))
83
87
  });
84
88
  }
89
+ function SceneContent({
90
+ focused,
91
+ preloaded,
92
+ position,
93
+ options,
94
+ children
95
+ }) {
96
+ const {
97
+ inactiveBehavior = 'pause',
98
+ lazy
99
+ } = options;
100
+ const [loaded, setLoaded] = useState(focused);
101
+ if (focused && !loaded) {
102
+ setLoaded(true);
103
+ }
104
+ const animationContext = useMemo(() => ({
105
+ position
106
+ }), [position]);
107
+
108
+ // For preloaded screens and if lazy is false,
109
+ // Keep them active so that the effects can run
110
+ const isActive = inactiveBehavior === 'none' || focused || preloaded || lazy === false && !loaded;
111
+ return /*#__PURE__*/_jsx(TabAnimationContext.Provider, {
112
+ value: animationContext,
113
+ children: /*#__PURE__*/_jsx(ActivityView, {
114
+ mode: isActive ? 'normal' : 'paused',
115
+ visible:
116
+ // Tabs can be swiped quickly
117
+ // So we keep all tabs visible to avoid flash of blank screen
118
+ true,
119
+ style: styles.scene,
120
+ children: children
121
+ })
122
+ });
123
+ }
124
+ const styles = StyleSheet.create({
125
+ scene: {
126
+ flex: 1
127
+ }
128
+ });
85
129
  //# sourceMappingURL=MaterialTopTabView.js.map
package/lib/module/views/MaterialTopTabView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["CommonActions","useLocale","useTheme","TabView","TabAnimationContext","MaterialTopTabBar","jsx","_jsx","renderTabBarDefault","props","MaterialTopTabView","tabBar","state","navigation","descriptors","rest","colors","direction","renderTabBar","navigationState","options","focusedOptions","routes","index","key","onIndexChange","route","dispatch","navigate","target","renderScene","position","Provider","value","children","render","renderLazyPlaceholder","lazyPlaceholder","lazy","preloadedRouteKeys","includes","lazyPreloadDistance","swipeEnabled","animationEnabled","onSwipeStart","emit","type","onSwipeEnd","Object","fromEntries","map","sceneStyle","backgroundColor","background"],"sourceRoot":"../../../src","sources":["views/MaterialTopTabView.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["ActivityView","CommonActions","useLocale","useTheme","useMemo","useState","StyleSheet","TabView","TabAnimationContext","MaterialTopTabBar","jsx","_jsx","renderTabBarDefault","props","MaterialTopTabView","tabBar","state","navigation","descriptors","rest","colors","direction","renderTabBar","navigationState","options","focusedOptions","routes","index","key","onIndexChange","route","dispatch","navigate","target","renderScene","position","SceneContent","focused","preloaded","preloadedRouteKeys","includes","children","render","renderLazyPlaceholder","lazyPlaceholder","lazy","lazyPreloadDistance","swipeEnabled","animationEnabled","onSwipeStart","emit","type","onSwipeEnd","Object","fromEntries","map","sceneStyle","backgroundColor","background","inactiveBehavior","loaded","setLoaded","animationContext","isActive","Provider","value","mode","visible","style","styles","scene","create","flex"],"sourceRoot":"../../../src","sources":["views/MaterialTopTabView.tsx"],"mappings":"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","ignoreList":[]}
package/lib/typescript/src/types.d.ts CHANGED
@@ -42,7 +42,7 @@ export type MaterialTopTabNavigationOptions = {
42
42
  /**
43
43
  * Title text for the screen.
44
44
  */
45
- title?: string;
45
+ title?: string | undefined;
46
46
  /**
47
47
  * Title string of a tab displayed in the tab bar
48
48
  * or a function that given { focused: boolean, color: ColorValue } returns a React.Node, to display in tab bar.
@@ -53,116 +53,116 @@ export type MaterialTopTabNavigationOptions = {
53
53
  focused: boolean;
54
54
  color: ColorValue;
55
55
  children: string;
56
- }) => React.ReactNode);
56
+ }) => React.ReactNode) | undefined;
57
57
  /**
58
58
  * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
59
59
  * It's recommended to set this if you don't have a label for the tab.
60
60
  */
61
- tabBarAccessibilityLabel?: string;
61
+ tabBarAccessibilityLabel?: string | undefined;
62
62
  /**
63
63
  * Whether label font should scale to respect Text Size accessibility settings.
64
64
  */
65
- tabBarAllowFontScaling?: boolean;
65
+ tabBarAllowFontScaling?: boolean | undefined;
66
66
  /**
67
67
  * Whether the tab label should be visible. Defaults to `true`.
68
68
  */
69
- tabBarShowLabel?: boolean;
69
+ tabBarShowLabel?: boolean | undefined;
70
70
  /**
71
71
  * A function that given { focused: boolean, color: ColorValue } returns a React.Node to display in the tab bar.
72
72
  */
73
- tabBarIcon?: (props: {
73
+ tabBarIcon?: ((props: {
74
74
  focused: boolean;
75
75
  color: ColorValue;
76
- }) => React.ReactElement;
76
+ }) => React.ReactElement) | undefined;
77
77
  /**
78
78
  * Whether the tab icon should be visible. Defaults to `false`.
79
79
  */
80
- tabBarShowIcon?: boolean;
80
+ tabBarShowIcon?: boolean | undefined;
81
81
  /**
82
82
  * Function that returns a React element to use as a badge for the tab.
83
83
  */
84
- tabBarBadge?: () => React.ReactElement;
84
+ tabBarBadge?: (() => React.ReactElement) | undefined;
85
85
  /**
86
86
  * Function that returns a React element as the tab bar indicator.
87
87
  */
88
- tabBarIndicator?: (props: Omit<Parameters<NonNullable<React.ComponentProps<typeof TabBar>['renderIndicator']>>[0], 'navigationState'> & {
88
+ tabBarIndicator?: ((props: Omit<Parameters<NonNullable<React.ComponentProps<typeof TabBar>['renderIndicator']>>[0], 'navigationState'> & {
89
89
  state: TabNavigationState<ParamListBase>;
90
- }) => React.ReactNode;
90
+ }) => React.ReactNode) | undefined;
91
91
  /**
92
92
  * Style object for the tab bar indicator.
93
93
  */
94
- tabBarIndicatorStyle?: StyleProp<ViewStyle>;
94
+ tabBarIndicatorStyle?: StyleProp<ViewStyle> | undefined;
95
95
  /**
96
96
  * Style object for the view containing the tab bar indicator.
97
97
  */
98
- tabBarIndicatorContainerStyle?: StyleProp<ViewStyle>;
98
+ tabBarIndicatorContainerStyle?: StyleProp<ViewStyle> | undefined;
99
99
  /**
100
100
  * ID to locate this tab button in tests.
101
101
  */
102
- tabBarButtonTestID?: string;
102
+ tabBarButtonTestID?: string | undefined;
103
103
  /**
104
104
  * Color for the icon and label in the active tab.
105
105
  */
106
- tabBarActiveTintColor?: ColorValue;
106
+ tabBarActiveTintColor?: ColorValue | undefined;
107
107
  /**
108
108
  * Color for the icon and label in the inactive tabs.
109
109
  */
110
- tabBarInactiveTintColor?: ColorValue;
110
+ tabBarInactiveTintColor?: ColorValue | undefined;
111
111
  /**
112
112
  * Color for material ripple (Android >= 5.0 only).
113
113
  */
114
- tabBarPressColor?: ColorValue;
114
+ tabBarPressColor?: ColorValue | undefined;
115
115
  /**
116
116
  * Opacity for pressed tab (iOS and Android < 5.0 only).
117
117
  */
118
- tabBarPressOpacity?: number;
118
+ tabBarPressOpacity?: number | undefined;
119
119
  /**
120
120
  * Boolean indicating whether the tab bar bounces when overscrolling.
121
121
  */
122
- tabBarBounces?: boolean;
122
+ tabBarBounces?: boolean | undefined;
123
123
  /**
124
124
  * Boolean indicating whether to make the tab bar scrollable.
125
125
  *
126
126
  * If you set this to `true`, you should also specify a width in `tabBarItemStyle` to improve the performance of initial render.
127
127
  */
128
- tabBarScrollEnabled?: boolean;
128
+ tabBarScrollEnabled?: boolean | undefined;
129
129
  /**
130
130
  * Style object for the tab label.
131
131
  */
132
- tabBarLabelStyle?: StyleProp<TextStyle>;
132
+ tabBarLabelStyle?: StyleProp<TextStyle> | undefined;
133
133
  /**
134
134
  * Style object for the individual tab items.
135
135
  */
136
- tabBarItemStyle?: StyleProp<ViewStyle>;
136
+ tabBarItemStyle?: StyleProp<ViewStyle> | undefined;
137
137
  /**
138
138
  * Style object for the view containing the tab items.
139
139
  */
140
- tabBarContentContainerStyle?: StyleProp<ViewStyle>;
140
+ tabBarContentContainerStyle?: StyleProp<ViewStyle> | undefined;
141
141
  /**
142
142
  * Style object for the the tab bar.
143
143
  */
144
- tabBarStyle?: StyleProp<ViewStyle>;
144
+ tabBarStyle?: StyleProp<ViewStyle> | undefined;
145
145
  /**
146
146
  * Gap between tabs
147
147
  */
148
- tabBarGap?: number;
148
+ tabBarGap?: number | undefined;
149
149
  /**
150
150
  * Allows to customize the android ripple effect (Android >= 5.0 only).
151
151
  *
152
152
  * Default: `{ borderless: true }`
153
153
  */
154
- tabBarAndroidRipple?: PressableAndroidRippleConfig;
154
+ tabBarAndroidRipple?: PressableAndroidRippleConfig | undefined;
155
155
  /**
156
156
  * Whether to enable swipe gestures when this screen is focused.
157
157
  * Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,
158
158
  * but the user can still switch tabs by pressing the tab bar.
159
159
  */
160
- swipeEnabled?: boolean;
160
+ swipeEnabled?: boolean | undefined;
161
161
  /**
162
162
  * Whether to enable animations when switching between tabs by pressing on the tab bar or programmatically.
163
163
  * Switching tab via swipe gesture will still result in an animation.
164
164
  */
165
- animationEnabled?: boolean;
165
+ animationEnabled?: boolean | undefined;
166
166
  /**
167
167
  * Whether this screen should be lazily rendered. When this is set to `true`,
168
168
  * the screen will be rendered as it comes into the viewport.
@@ -174,12 +174,12 @@ export type MaterialTopTabNavigationOptions = {
174
174
  * when they come into the viewport. You can use the `lazyPlaceholder` prop to customize
175
175
  * what the user sees during this short period.
176
176
  */
177
- lazy?: boolean;
177
+ lazy?: boolean | undefined;
178
178
  /**
179
179
  * When `lazy` is enabled, you can specify how many adjacent screens should be preloaded in advance with this prop.
180
180
  * This value defaults to `0` which means lazy pages are loaded as they come into the viewport.
181
181
  */
182
- lazyPreloadDistance?: number;
182
+ lazyPreloadDistance?: number | undefined;
183
183
  /**
184
184
  * Function that returns a React element to render if this screen hasn't been rendered yet.
185
185
  * The `lazy` option also needs to be enabled for this to work.
@@ -188,11 +188,23 @@ export type MaterialTopTabNavigationOptions = {
188
188
  *
189
189
  * By default, this renders `null`.
190
190
  */
191
- lazyPlaceholder?: () => React.ReactNode;
191
+ lazyPlaceholder?: (() => React.ReactNode) | undefined;
192
192
  /**
193
193
  * Style object for the component wrapping the screen content.
194
194
  */
195
- sceneStyle?: StyleProp<ViewStyle>;
195
+ sceneStyle?: StyleProp<ViewStyle> | undefined;
196
+ /**
197
+ * What should happen when screens become inactive.
198
+ * - `pause`: Effects are cleaned up.
199
+ * - `none`: Screen renders normally
200
+ *
201
+ * Defaults to `pause`.
202
+ *
203
+ * If you set `lazy: false` or preload a screen,
204
+ * It won't be paused until after the first time it becomes focused.
205
+ * This makes sure that effects are run to initialize the screen.
206
+ */
207
+ inactiveBehavior?: ('pause' | 'none') | undefined;
196
208
  };
197
209
  export type MaterialTopTabDescriptor = Descriptor<MaterialTopTabNavigationOptions, MaterialTopTabNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
198
210
  export type MaterialTopTabDescriptorMap = Record<string, MaterialTopTabDescriptor>;
@@ -200,11 +212,11 @@ export type MaterialTopTabNavigationConfig = Omit<TabViewProps<Route<string>>, '
200
212
  /**
201
213
  * Function that returns a React element to display as the tab bar.
202
214
  */
203
- tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode;
215
+ tabBar?: ((props: MaterialTopTabBarProps) => React.ReactNode) | undefined;
204
216
  /**
205
217
  * Function that returns a React element to override the underlying adapter.
206
218
  */
207
- adapter?: TabViewProps<Route<string>>['renderAdapter'];
219
+ adapter?: TabViewProps<Route<string>>['renderAdapter'] | undefined;
208
220
  };
209
221
  export type MaterialTopTabBarProps = Pick<TabBarProps<Route<string>>, 'position' | 'subscribe' | 'jumpTo'> & {
210
222
  state: TabNavigationState<ParamListBase>;
package/lib/typescript/src/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}
package/lib/typescript/src/views/MaterialTopTabView.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MaterialTopTabView.d.ts","sourceRoot":"","sources":["../../../../src/views/MaterialTopTabView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,kBAAkB,EAGxB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,KAAK,EAEV,2BAA2B,EAC3B,8BAA8B,EAC9B,+BAA+B,EAChC,MAAM,UAAU,CAAC;AAIlB,KAAK,KAAK,GAAG,8BAA8B,GAAG;IAC5C,KAAK,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IACzC,UAAU,EAAE,+BAA+B,CAAC;IAC5C,WAAW,EAAE,2BAA2B,CAAC;CAC1C,CAAC;AAMF,wBAAgB,kBAAkB,CAAC,EACjC,MAA4B,EAC5B,KAAK,EACL,UAAU,EACV,WAAW,EACX,GAAG,IAAI,EACR,EAAE,KAAK,2CAuEP"}
1
+ {"version":3,"file":"MaterialTopTabView.d.ts","sourceRoot":"","sources":["../../../../src/views/MaterialTopTabView.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,kBAAkB,EAGxB,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAEV,2BAA2B,EAC3B,8BAA8B,EAC9B,+BAA+B,EAEhC,MAAM,UAAU,CAAC;AAIlB,KAAK,KAAK,GAAG,8BAA8B,GAAG;IAC5C,KAAK,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IACzC,UAAU,EAAE,+BAA+B,CAAC;IAC5C,WAAW,EAAE,2BAA2B,CAAC;CAC1C,CAAC;AAMF,wBAAgB,kBAAkB,CAAC,EACjC,MAA4B,EAC5B,KAAK,EACL,UAAU,EACV,WAAW,EACX,GAAG,IAAI,EACR,EAAE,KAAK,2CA4EP"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@react-navigation/material-top-tabs",
3
3
  "description": "Integration for the animated tab view component from react-native-tab-view",
4
- "version": "8.0.0-alpha.12",
4
+ "version": "8.0.0-alpha.13",
5
5
  "keywords": [
6
6
  "react-native-component",
7
7
  "react-component",
@@ -46,26 +46,26 @@
46
46
  "clean": "del lib"
47
47
  },
48
48
  "dependencies": {
49
- "@react-navigation/elements": "^3.0.0-alpha.12",
49
+ "@react-navigation/elements": "^3.0.0-alpha.13",
50
50
  "color": "^4.2.3",
51
- "react-native-tab-view": "^5.0.0-alpha.2"
51
+ "react-native-tab-view": "^5.0.0-alpha.3"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@jest/globals": "^30.0.0",
55
- "@react-navigation/native": "^8.0.0-alpha.11",
56
- "@testing-library/react-native": "^13.2.1",
57
- "@types/react": "~19.1.10",
55
+ "@react-navigation/native": "^8.0.0-alpha.12",
56
+ "@testing-library/react-native": "^13.3.3",
57
+ "@types/react": "~19.2.2",
58
58
  "del-cli": "^6.0.0",
59
- "react": "19.1.0",
60
- "react-native": "0.81.4",
59
+ "react": "19.2.0",
60
+ "react-native": "0.83.2",
61
61
  "react-native-builder-bob": "^0.40.12",
62
62
  "react-native-pager-view": "^8.0.0",
63
- "react-native-safe-area-context": "~5.6.0",
64
- "react-test-renderer": "19.1.0",
63
+ "react-native-safe-area-context": "~5.6.2",
64
+ "react-test-renderer": "19.2.0",
65
65
  "typescript": "^5.9.2"
66
66
  },
67
67
  "peerDependencies": {
68
- "@react-navigation/native": "^8.0.0-alpha.11",
68
+ "@react-navigation/native": "^8.0.0-alpha.12",
69
69
  "react": ">= 19.0.0",
70
70
  "react-native": "*",
71
71
  "react-native-pager-view": ">= 7.0.0",
@@ -89,5 +89,5 @@
89
89
  ]
90
90
  ]
91
91
  },
92
- "gitHead": "5d08a615905bbdaf8feba748bd83828d3eea5fdf"
92
+ "gitHead": "4ac6c41c1f751fba9dd82db050865bc71f3310f5"
93
93
  }
package/src/types.tsx CHANGED
@@ -78,7 +78,7 @@ export type MaterialTopTabNavigationOptions = {
78
78
  /**
79
79
  * Title text for the screen.
80
80
  */
81
- title?: string;
81
+ title?: string | undefined;
82
82
 
83
83
  /**
84
84
  * Title string of a tab displayed in the tab bar
@@ -92,145 +92,147 @@ export type MaterialTopTabNavigationOptions = {
92
92
  focused: boolean;
93
93
  color: ColorValue;
94
94
  children: string;
95
- }) => React.ReactNode);
95
+ }) => React.ReactNode)
96
+ | undefined;
96
97
 
97
98
  /**
98
99
  * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
99
100
  * It's recommended to set this if you don't have a label for the tab.
100
101
  */
101
- tabBarAccessibilityLabel?: string;
102
+ tabBarAccessibilityLabel?: string | undefined;
102
103
 
103
104
  /**
104
105
  * Whether label font should scale to respect Text Size accessibility settings.
105
106
  */
106
- tabBarAllowFontScaling?: boolean;
107
+ tabBarAllowFontScaling?: boolean | undefined;
107
108
 
108
109
  /**
109
110
  * Whether the tab label should be visible. Defaults to `true`.
110
111
  */
111
- tabBarShowLabel?: boolean;
112
+ tabBarShowLabel?: boolean | undefined;
112
113
 
113
114
  /**
114
115
  * A function that given { focused: boolean, color: ColorValue } returns a React.Node to display in the tab bar.
115
116
  */
116
- tabBarIcon?: (props: {
117
- focused: boolean;
118
- color: ColorValue;
119
- }) => React.ReactElement;
117
+ tabBarIcon?:
118
+ | ((props: { focused: boolean; color: ColorValue }) => React.ReactElement)
119
+ | undefined;
120
120
 
121
121
  /**
122
122
  * Whether the tab icon should be visible. Defaults to `false`.
123
123
  */
124
- tabBarShowIcon?: boolean;
124
+ tabBarShowIcon?: boolean | undefined;
125
125
 
126
126
  /**
127
127
  * Function that returns a React element to use as a badge for the tab.
128
128
  */
129
- tabBarBadge?: () => React.ReactElement;
129
+ tabBarBadge?: (() => React.ReactElement) | undefined;
130
130
 
131
131
  /**
132
132
  * Function that returns a React element as the tab bar indicator.
133
133
  */
134
- tabBarIndicator?: (
135
- props: Omit<
136
- Parameters<
137
- NonNullable<React.ComponentProps<typeof TabBar>['renderIndicator']>
138
- >[0],
139
- 'navigationState'
140
- > & { state: TabNavigationState<ParamListBase> }
141
- ) => React.ReactNode;
134
+ tabBarIndicator?:
135
+ | ((
136
+ props: Omit<
137
+ Parameters<
138
+ NonNullable<React.ComponentProps<typeof TabBar>['renderIndicator']>
139
+ >[0],
140
+ 'navigationState'
141
+ > & { state: TabNavigationState<ParamListBase> }
142
+ ) => React.ReactNode)
143
+ | undefined;
142
144
 
143
145
  /**
144
146
  * Style object for the tab bar indicator.
145
147
  */
146
- tabBarIndicatorStyle?: StyleProp<ViewStyle>;
148
+ tabBarIndicatorStyle?: StyleProp<ViewStyle> | undefined;
147
149
 
148
150
  /**
149
151
  * Style object for the view containing the tab bar indicator.
150
152
  */
151
- tabBarIndicatorContainerStyle?: StyleProp<ViewStyle>;
153
+ tabBarIndicatorContainerStyle?: StyleProp<ViewStyle> | undefined;
152
154
 
153
155
  /**
154
156
  * ID to locate this tab button in tests.
155
157
  */
156
- tabBarButtonTestID?: string;
158
+ tabBarButtonTestID?: string | undefined;
157
159
 
158
160
  /**
159
161
  * Color for the icon and label in the active tab.
160
162
  */
161
- tabBarActiveTintColor?: ColorValue;
163
+ tabBarActiveTintColor?: ColorValue | undefined;
162
164
 
163
165
  /**
164
166
  * Color for the icon and label in the inactive tabs.
165
167
  */
166
- tabBarInactiveTintColor?: ColorValue;
168
+ tabBarInactiveTintColor?: ColorValue | undefined;
167
169
 
168
170
  /**
169
171
  * Color for material ripple (Android >= 5.0 only).
170
172
  */
171
- tabBarPressColor?: ColorValue;
173
+ tabBarPressColor?: ColorValue | undefined;
172
174
 
173
175
  /**
174
176
  * Opacity for pressed tab (iOS and Android < 5.0 only).
175
177
  */
176
- tabBarPressOpacity?: number;
178
+ tabBarPressOpacity?: number | undefined;
177
179
 
178
180
  /**
179
181
  * Boolean indicating whether the tab bar bounces when overscrolling.
180
182
  */
181
- tabBarBounces?: boolean;
183
+ tabBarBounces?: boolean | undefined;
182
184
 
183
185
  /**
184
186
  * Boolean indicating whether to make the tab bar scrollable.
185
187
  *
186
188
  * If you set this to `true`, you should also specify a width in `tabBarItemStyle` to improve the performance of initial render.
187
189
  */
188
- tabBarScrollEnabled?: boolean;
190
+ tabBarScrollEnabled?: boolean | undefined;
189
191
 
190
192
  /**
191
193
  * Style object for the tab label.
192
194
  */
193
- tabBarLabelStyle?: StyleProp<TextStyle>;
195
+ tabBarLabelStyle?: StyleProp<TextStyle> | undefined;
194
196
 
195
197
  /**
196
198
  * Style object for the individual tab items.
197
199
  */
198
- tabBarItemStyle?: StyleProp<ViewStyle>;
200
+ tabBarItemStyle?: StyleProp<ViewStyle> | undefined;
199
201
 
200
202
  /**
201
203
  * Style object for the view containing the tab items.
202
204
  */
203
- tabBarContentContainerStyle?: StyleProp<ViewStyle>;
205
+ tabBarContentContainerStyle?: StyleProp<ViewStyle> | undefined;
204
206
 
205
207
  /**
206
208
  * Style object for the the tab bar.
207
209
  */
208
- tabBarStyle?: StyleProp<ViewStyle>;
210
+ tabBarStyle?: StyleProp<ViewStyle> | undefined;
209
211
 
210
212
  /**
211
213
  * Gap between tabs
212
214
  */
213
- tabBarGap?: number;
215
+ tabBarGap?: number | undefined;
214
216
 
215
217
  /**
216
218
  * Allows to customize the android ripple effect (Android >= 5.0 only).
217
219
  *
218
220
  * Default: `{ borderless: true }`
219
221
  */
220
- tabBarAndroidRipple?: PressableAndroidRippleConfig;
222
+ tabBarAndroidRipple?: PressableAndroidRippleConfig | undefined;
221
223
 
222
224
  /**
223
225
  * Whether to enable swipe gestures when this screen is focused.
224
226
  * Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,
225
227
  * but the user can still switch tabs by pressing the tab bar.
226
228
  */
227
- swipeEnabled?: boolean;
229
+ swipeEnabled?: boolean | undefined;
228
230
 
229
231
  /**
230
232
  * Whether to enable animations when switching between tabs by pressing on the tab bar or programmatically.
231
233
  * Switching tab via swipe gesture will still result in an animation.
232
234
  */
233
- animationEnabled?: boolean;
235
+ animationEnabled?: boolean | undefined;
234
236
 
235
237
  /**
236
238
  * Whether this screen should be lazily rendered. When this is set to `true`,
@@ -243,13 +245,13 @@ export type MaterialTopTabNavigationOptions = {
243
245
  * when they come into the viewport. You can use the `lazyPlaceholder` prop to customize
244
246
  * what the user sees during this short period.
245
247
  */
246
- lazy?: boolean;
248
+ lazy?: boolean | undefined;
247
249
 
248
250
  /**
249
251
  * When `lazy` is enabled, you can specify how many adjacent screens should be preloaded in advance with this prop.
250
252
  * This value defaults to `0` which means lazy pages are loaded as they come into the viewport.
251
253
  */
252
- lazyPreloadDistance?: number;
254
+ lazyPreloadDistance?: number | undefined;
253
255
 
254
256
  /**
255
257
  * Function that returns a React element to render if this screen hasn't been rendered yet.
@@ -259,12 +261,25 @@ export type MaterialTopTabNavigationOptions = {
259
261
  *
260
262
  * By default, this renders `null`.
261
263
  */
262
- lazyPlaceholder?: () => React.ReactNode;
264
+ lazyPlaceholder?: (() => React.ReactNode) | undefined;
263
265
 
264
266
  /**
265
267
  * Style object for the component wrapping the screen content.
266
268
  */
267
- sceneStyle?: StyleProp<ViewStyle>;
269
+ sceneStyle?: StyleProp<ViewStyle> | undefined;
270
+
271
+ /**
272
+ * What should happen when screens become inactive.
273
+ * - `pause`: Effects are cleaned up.
274
+ * - `none`: Screen renders normally
275
+ *
276
+ * Defaults to `pause`.
277
+ *
278
+ * If you set `lazy: false` or preload a screen,
279
+ * It won't be paused until after the first time it becomes focused.
280
+ * This makes sure that effects are run to initialize the screen.
281
+ */
282
+ inactiveBehavior?: ('pause' | 'none') | undefined;
268
283
  };
269
284
 
270
285
  export type MaterialTopTabDescriptor = Descriptor<
@@ -297,11 +312,11 @@ export type MaterialTopTabNavigationConfig = Omit<
297
312
  /**
298
313
  * Function that returns a React element to display as the tab bar.
299
314
  */
300
- tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode;
315
+ tabBar?: ((props: MaterialTopTabBarProps) => React.ReactNode) | undefined;
301
316
  /**
302
317
  * Function that returns a React element to override the underlying adapter.
303
318
  */
304
- adapter?: TabViewProps<Route<string>>['renderAdapter'];
319
+ adapter?: TabViewProps<Route<string>>['renderAdapter'] | undefined;
305
320
  };
306
321
 
307
322
  export type MaterialTopTabBarProps = Pick<
package/src/views/MaterialTopTabView.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { ActivityView } from '@react-navigation/elements/internal';
1
2
  import {
2
3
  CommonActions,
3
4
  type ParamListBase,
@@ -6,6 +7,8 @@ import {
6
7
  useLocale,
7
8
  useTheme,
8
9
  } from '@react-navigation/native';
10
+ import { useMemo, useState } from 'react';
11
+ import { type Animated, StyleSheet } from 'react-native';
9
12
  import { TabView } from 'react-native-tab-view';
10
13
 
11
14
  import type {
@@ -13,6 +16,7 @@ import type {
13
16
  MaterialTopTabDescriptorMap,
14
17
  MaterialTopTabNavigationConfig,
15
18
  MaterialTopTabNavigationHelpers,
19
+ MaterialTopTabNavigationOptions,
16
20
  } from '../types';
17
21
  import { TabAnimationContext } from '../utils/TabAnimationContext';
18
22
  import { MaterialTopTabBar } from './MaterialTopTabBar';
@@ -68,9 +72,14 @@ export function MaterialTopTabView({
68
72
  });
69
73
  }}
70
74
  renderScene={({ route, position }) => (
71
- <TabAnimationContext.Provider value={{ position }}>
75
+ <SceneContent
76
+ focused={route.key === state.routes[state.index].key}
77
+ preloaded={state.preloadedRouteKeys.includes(route.key)}
78
+ position={position}
79
+ options={descriptors[route.key].options}
80
+ >
72
81
  {descriptors[route.key].render()}
73
- </TabAnimationContext.Provider>
82
+ </SceneContent>
74
83
  )}
75
84
  navigationState={state}
76
85
  renderTabBar={renderTabBar}
@@ -105,3 +114,57 @@ export function MaterialTopTabView({
105
114
  />
106
115
  );
107
116
  }
117
+
118
+ function SceneContent({
119
+ focused,
120
+ preloaded,
121
+ position,
122
+ options,
123
+ children,
124
+ }: {
125
+ focused: boolean;
126
+ preloaded: boolean;
127
+ position: Animated.AnimatedInterpolation<number>;
128
+ options: MaterialTopTabNavigationOptions;
129
+ children: React.ReactNode;
130
+ }) {
131
+ const { inactiveBehavior = 'pause', lazy } = options;
132
+
133
+ const [loaded, setLoaded] = useState(focused);
134
+
135
+ if (focused && !loaded) {
136
+ setLoaded(true);
137
+ }
138
+
139
+ const animationContext = useMemo(() => ({ position }), [position]);
140
+
141
+ // For preloaded screens and if lazy is false,
142
+ // Keep them active so that the effects can run
143
+ const isActive =
144
+ inactiveBehavior === 'none' ||
145
+ focused ||
146
+ preloaded ||
147
+ (lazy === false && !loaded);
148
+
149
+ return (
150
+ <TabAnimationContext.Provider value={animationContext}>
151
+ <ActivityView
152
+ mode={isActive ? 'normal' : 'paused'}
153
+ visible={
154
+ // Tabs can be swiped quickly
155
+ // So we keep all tabs visible to avoid flash of blank screen
156
+ true
157
+ }
158
+ style={styles.scene}
159
+ >
160
+ {children}
161
+ </ActivityView>
162
+ </TabAnimationContext.Provider>
163
+ );
164
+ }
165
+
166
+ const styles = StyleSheet.create({
167
+ scene: {
168
+ flex: 1,
169
+ },
170
+ });