feat: allow users to pass android_ripple config in TabView (#11203)

**Motivation** This PR solves an issue with setting transparent background color of tab-view on Android. It allows users to overwrite `android_ripple` config. (#11198) ### Recording https://user-images.githubusercontent.com/52801365/217030596-4a4fe2ce-c974-4c37-b3ee-84733bf1eb79.mp4 **Test plan** Run the test app, passing `{ backgroundColor: transparent }` to tabBar.
react-navigation · Feb 17, 2023 · 15939d8 · 15939d8
1 parent f4324cd
commit 15939d8
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/packages/material-top-tabs/src/types.tsx b/packages/material-top-tabs/src/types.tsx
@@ -9,7 +9,12 @@ import type {
   TabNavigationState,
 } from '@react-navigation/native';
 import type React from 'react';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type {
+  PressableAndroidRippleConfig,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import type {
   SceneRendererProps,
   TabBar,
@@ -204,6 +209,13 @@ export type MaterialTopTabNavigationOptions = {
    */
   tabBarGap?: number;
 
+  /**
+   * Allows to customize the android ripple effect (Android >= 5.0 only).
+   *
+   * Default: `{ borderless: true }`
+   */
+  tabBarAndroidRipple?: PressableAndroidRippleConfig;
+
   /**
    * Whether to enable swipe gestures when this screen is focused.
    * Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,

diff --git a/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx b/packages/material-top-tabs/src/views/MaterialTopTabBar.tsx
@@ -42,6 +42,7 @@ export default function TabBarTop({
         focusedOptions.tabBarIndicatorStyle,
       ]}
       gap={focusedOptions.tabBarGap}
+      android_ripple={focusedOptions.tabBarAndroidRipple}
       indicatorContainerStyle={focusedOptions.tabBarIndicatorContainerStyle}
       contentContainerStyle={focusedOptions.tabBarContentContainerStyle}
       style={[{ backgroundColor: colors.card }, focusedOptions.tabBarStyle]}

diff --git a/packages/react-native-tab-view/src/TabBar.tsx b/packages/react-native-tab-view/src/TabBar.tsx
@@ -6,6 +6,7 @@ import {
   LayoutChangeEvent,
   ListRenderItemInfo,
   Platform,
+  PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -66,6 +67,7 @@ export type Props<T extends Route> = SceneRendererProps & {
   style?: StyleProp<ViewStyle>;
   gap?: number;
   testID?: string;
+  android_ripple?: PressableAndroidRippleConfig;
 };
 
 type FlattenedTabWidth = string | number | undefined;
@@ -283,6 +285,7 @@ export default function TabBar<T extends Route>({
   style,
   tabStyle,
   testID,
+  android_ripple,
 }: Props<T>) {
   const [layout, setLayout] = React.useState<Layout>({ width: 0, height: 0 });
   const [tabWidths, setTabWidths] = React.useState<Record<string, number>>({});
@@ -436,6 +439,7 @@ export default function TabBar<T extends Route>({
               getFlattenedTabWidth(tabStyle)
             )
           : undefined,
+        android_ripple,
       };
 
       return (
@@ -451,6 +455,7 @@ export default function TabBar<T extends Route>({
     },
     [
       activeColor,
+      android_ripple,
       gap,
       getAccessibilityLabel,
       getAccessible,

diff --git a/packages/react-native-tab-view/src/TabBarItem.tsx b/packages/react-native-tab-view/src/TabBarItem.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   Animated,
   LayoutChangeEvent,
+  PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -42,6 +43,7 @@ export type Props<T extends Route> = {
   defaultTabWidth?: number;
   labelStyle?: StyleProp<TextStyle>;
   style: StyleProp<ViewStyle>;
+  android_ripple?: PressableAndroidRippleConfig;
 };
 
 const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
@@ -113,6 +115,7 @@ const TabBarItemInternal = <T extends Route>({
   defaultTabWidth,
   routesLength,
   renderLabel: renderLabelCustom,
+  android_ripple = { borderless: true },
 }: TabBarItemInternalProps<T>) => {
   const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
 
@@ -233,7 +236,7 @@ const TabBarItemInternal = <T extends Route>({
 
   return (
     <PlatformPressable
-      android_ripple={{ borderless: true }}
+      android_ripple={android_ripple}
       testID={getTestID(scene)}
       accessible={getAccessible(scene)}
       accessibilityLabel={accessibilityLabel}