Added support for rippleColor in android (#56)

* feat: ripple color support added for android

* chore: readme updated

* chore: comments resolved

* chore: unnecessary code removed

* fix: formatting changes

Author: sarthak-d11

android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -1,6 +1,8 @@
 package com.rcttabview
 
 import android.content.Context
+import android.content.res.ColorStateList
+import android.graphics.Color
 import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.Drawable
 import android.net.Uri
@@ -73,7 +75,7 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
 
   fun updateItems(items: MutableList<TabInfo>) {
     this.items = items
-    items.forEachIndexed {index, item ->
+    items.forEachIndexed { index, item ->
       val menuItem = getOrCreateItem(index, item.title)
       if (icons.containsKey(index)) {
         menuItem.icon = getDrawable(icons[index]!!)
@@ -123,6 +125,10 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     }
   }
 
+  fun setRippleColor(color: ColorStateList) {
+    itemRippleColor = color
+  }
+
   private fun getDrawable(imageSource: ImageSource): Drawable {
     // TODO: Check if this can be done using some built-in React Native class
     val imageRequest = ImageRequestBuilder.newBuilderWithSource(imageSource.uri).build()

android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt

@@ -1,5 +1,7 @@
 package com.rcttabview
 
+import android.content.res.ColorStateList
+import android.graphics.Color
 import android.view.View.MeasureSpec
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.common.MapBuilder
@@ -36,13 +38,13 @@ class RCTTabViewViewManager :
     val itemsArray = mutableListOf<TabInfo>()
     for (i in 0 until items.size()) {
       items.getMap(i).let { item ->
-          itemsArray.add(
-            TabInfo(
-              key = item.getString("key") ?: "",
-              title = item.getString("title") ?: "",
-              badge = item.getString("badge") ?: ""
-            )
+        itemsArray.add(
+          TabInfo(
+            key = item.getString("key") ?: "",
+            title = item.getString("title") ?: "",
+            badge = item.getString("badge") ?: ""
           )
+        )
       }
     }
     view.updateItems(itemsArray)
@@ -56,7 +58,6 @@ class RCTTabViewViewManager :
   }
 
 
-
   @ReactProp(name = "labeled")
   fun setLabeled(view: ReactBottomNavigationView, flag: Boolean?) {
     view.setLabeled(flag)
@@ -67,12 +68,20 @@ class RCTTabViewViewManager :
     view.setIcons(icons)
   }
 
+  @ReactProp(name = "rippleColor")
+  fun setRippleColor(view: ReactBottomNavigationView, rippleColor: Int?) {
+    if (rippleColor != null) {
+      val color = ColorStateList.valueOf(rippleColor)
+      view.setRippleColor(color)
+    }
+  }
+
   public override fun createViewInstance(context: ThemedReactContext): ReactBottomNavigationView {
     eventDispatcher = context.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
     val view = ReactBottomNavigationView(context)
     view.onTabSelectedListener = { data ->
       data.getString("key")?.let {
-        eventDispatcher.dispatchEvent(PageSelectedEvent(viewTag = view.id, key = it ))
+        eventDispatcher.dispatchEvent(PageSelectedEvent(viewTag = view.id, key = it))
       }
     }
     return view
@@ -133,11 +142,14 @@ class RCTTabViewViewManager :
   // iOS Props
 
   @ReactProp(name = "sidebarAdaptable")
-  fun setSidebarAdaptable(view: ReactBottomNavigationView, flag: Boolean) {}
+  fun setSidebarAdaptable(view: ReactBottomNavigationView, flag: Boolean) {
+  }
 
   @ReactProp(name = "ignoresTopSafeArea")
-  fun setIgnoresTopSafeArea(view: ReactBottomNavigationView, flag: Boolean) {}
+  fun setIgnoresTopSafeArea(view: ReactBottomNavigationView, flag: Boolean) {
+  }
 
   @ReactProp(name = "disablePageAnimations")
-  fun setDisablePageAnimations(view: ReactBottomNavigationView, flag: Boolean) {}
+  fun setDisablePageAnimations(view: ReactBottomNavigationView, flag: Boolean) {
+  }
 }

docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -7,7 +7,7 @@ To use this navigator, ensure that you have [`@react-navigation/native` and its
 :::
 
 ```tsx
-import {createNativeBottomTabNavigator} from 'react-native-bottom-tabs/react-navigation';
+import { createNativeBottomTabNavigator } from 'react-native-bottom-tabs/react-navigation';
 
 const Tabs = createNativeBottomTabNavigator();
 
@@ -17,15 +17,15 @@ function NativeBottomTabs() {
       <Tabs.Screen
         name="index"
         options={{
-          title: "Home",
-          tabBarIcon: () => ({ sfSymbol: "house" }),
+          title: 'Home',
+          tabBarIcon: () => ({ sfSymbol: 'house' }),
         }}
       />
       <Tabs.Screen
         name="explore"
         options={{
-          title: "Explore",
-          tabBarIcon: () => ({ sfSymbol: "person" }),
+          title: 'Explore',
+          tabBarIcon: () => ({ sfSymbol: 'person' }),
         }}
       />
     </Tabs.Navigator>
@@ -53,6 +53,10 @@ Default options to use for the screens in the navigator.
 
 Whether to show labels in tabs. Defaults to true.
 
+#### `rippleColor`
+
+Changes ripple color on tab press. (Android Only)
+
 #### `disablePageAnimations` <Badge text="iOS" type="info" />
 
 Whether to disable page animations between tabs.
@@ -62,6 +66,7 @@ Whether to disable page animations between tabs.
 Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom.
 
 Available options:
+
 - `default` - uses default background and shadow values.
 - `transparent` - uses transparent background and no shadow.
 - `opaque` - uses set of opaque colors that are appropriate for the current theme
@@ -70,18 +75,17 @@ Available options:
 It's recommended to use `transparent` or `opaque` without lazy loading as the tab bar background flashes when a view is rendered lazily.
 :::
 
-
 #### `sidebarAdaptable` <Badge text="iOS" type="info" />
 
 A tab bar style that adapts to each platform.
 
 Tab views using the sidebar adaptable style have an appearance
+
 - iPadOS displays a top tab bar that can adapt into a sidebar.
 - iOS displays a bottom tab bar.
 - macOS and tvOS always show a sidebar.
 - visionOS shows an ornament and also shows a sidebar for secondary tabs within a `TabSection`.
 
-
 ### Options
 
 The following options can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`.
@@ -98,8 +102,6 @@ Label text of the tab displayed in the navigation bar. When undefined, scene tit
 
 Function that given `{ focused: boolean }` returns `ImageSource` or `AppleIcon` to display in the navigation bar.
 
-
-
 ```tsx
 <Tab.Screen
   name="Albums"

example/src/App.tsx

@@ -27,6 +27,10 @@ const FourTabsIgnoreSafeArea = () => {
   return <FourTabs ignoresTopSafeArea />;
 };
 
+const FourTabsRippleColor = () => {
+  return <FourTabs rippleColor={'#00ff00'} />;
+};
+
 const FourTabsNoAnimations = () => {
   return <FourTabs disablePageAnimations />;
 };
@@ -45,6 +49,10 @@ const examples = [
     name: 'Four Tabs - No header',
     screenOptions: { headerShown: false },
   },
+  {
+    component: FourTabsRippleColor,
+    name: 'Four Tabs with ripple Color',
+  },
   { component: FourTabsNoAnimations, name: 'Four Tabs - no animations' },
   {
     component: FourTabsTransparentScrollEdgeAppearance,

example/src/Examples/FourTabs.tsx

@@ -4,17 +4,20 @@ import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
+import { ColorValue } from 'react-native';
 
 interface Props {
   ignoresTopSafeArea?: boolean;
   disablePageAnimations?: boolean;
   scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
+  rippleColor?: ColorValue;
 }
 
 export default function FourTabs({
   ignoresTopSafeArea = false,
   disablePageAnimations = false,
   scrollEdgeAppearance = 'default',
+  rippleColor,
 }: Props) {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
@@ -59,6 +62,7 @@ export default function FourTabs({
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}
+      rippleColor={rippleColor}
     />
   );
 }

src/TabView.tsx

@@ -1,5 +1,12 @@
 import type { TabViewItems } from './TabViewNativeComponent';
-import { Image, Platform, StyleSheet, View } from 'react-native';
+import {
+  ColorValue,
+  Image,
+  Platform,
+  StyleSheet,
+  View,
+  processColor,
+} from 'react-native';
 
 //@ts-ignore
 import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
@@ -77,6 +84,8 @@ interface Props<Route extends BaseRoute> {
     route: Route;
     focused: boolean;
   }) => ImageSource | undefined;
+
+  rippleColor?: ColorValue;
 }
 
 const ANDROID_MAX_TABS = 6;
@@ -180,6 +189,7 @@ const TabView = <Route extends BaseRoute>({
         jumpTo(key);
       }}
       {...props}
+      rippleColor={processColor(props.rippleColor)}
     >
       {trimmedRoutes.map((route) => {
         if (getLazy({ route }) !== false && !loaded.includes(route.key)) {

src/TabViewNativeComponent.ts

@@ -1,5 +1,5 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { ViewProps } from 'react-native';
+import type { ViewProps, ProcessedColorValue } from 'react-native';
 import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
 //@ts-ignore
 import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
@@ -23,6 +23,7 @@ export interface TabViewProps extends ViewProps {
   labeled?: boolean;
   sidebarAdaptable?: boolean;
   scrollEdgeAppearance?: string;
+  rippleColor?: ProcessedColorValue | null;
 }
 
 export default codegenNativeComponent<TabViewProps>('RCTTabView');