feat: add disablePageAnimations prop (#50)

Author: okwasniewski

README.md

@@ -109,6 +109,10 @@ Default options to use for the screens in the navigator.
 
 Whether to show labels in tabs. Defaults to true.
 
+#### `disablePageAnimations`
+
+Whether to disable page animations between tabs. (iOS only)
+
 #### `sidebarAdaptable`
 
 A tab bar style that adapts to each platform. (Apple platforms only)

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

@@ -137,4 +137,7 @@ class RCTTabViewViewManager :
 
   @ReactProp(name = "ignoresTopSafeArea")
   fun setIgnoresTopSafeArea(view: ReactBottomNavigationView, flag: Boolean) {}
+
+  @ReactProp(name = "disablePageAnimations")
+  fun setDisablePageAnimations(view: ReactBottomNavigationView, flag: Boolean) {}
 }

example/ios/Podfile.lock

@@ -1209,7 +1209,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-bottom-tabs (0.0.9):
+  - react-native-bottom-tabs (0.0.10):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1793,7 +1793,7 @@ SPEC CHECKSUMS:
   React-logger: 4072f39df335ca443932e0ccece41fbeb5ca8404
   React-Mapbuffer: 714f2fae68edcabfc332b754e9fbaa8cfc68fdd4
   React-microtasksnativemodule: 618b64238e43ef3154079f193aa6649e5320ae19
-  react-native-bottom-tabs: 6b4dff8469797a3bf8758594832955a2214e2e0d
+  react-native-bottom-tabs: f2d0c291b0158846fb8c6964b9535a3ab206fdf2
   react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
   React-nativeconfig: 4a9543185905fe41014c06776bf126083795aed9
   React-NativeModulesApple: 651670a799672bd54469f2981d91493dda361ddf

example/src/App.tsx

@@ -27,6 +27,10 @@ const FourTabsIgnoreSafeArea = () => {
   return <FourTabs ignoresTopSafeArea />;
 };
 
+const FourTabsNoAnimations = () => {
+  return <FourTabs disablePageAnimations />;
+};
+
 const examples = [
   { component: ThreeTabs, name: 'Three Tabs' },
   { component: FourTabs, name: 'Four Tabs' },
@@ -37,6 +41,7 @@ const examples = [
     name: 'Four Tabs - No header',
     screenOptions: { headerShown: false },
   },
+  { component: FourTabsNoAnimations, name: 'Four Tabs - no animations' },
   { component: NativeBottomTabs, name: 'Native Bottom Tabs' },
   { component: JSBottomTabs, name: 'JS Bottom Tabs' },
   {

example/src/Examples/FourTabs.tsx

@@ -7,9 +7,13 @@ import { Chat } from '../Screens/Chat';
 
 interface Props {
   ignoresTopSafeArea?: boolean;
+  disablePageAnimations?: boolean;
 }
 
-export default function FourTabs({ ignoresTopSafeArea = false }: Props) {
+export default function FourTabs({
+  ignoresTopSafeArea = false,
+  disablePageAnimations = false,
+}: Props) {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
     {
@@ -48,6 +52,7 @@ export default function FourTabs({ ignoresTopSafeArea = false }: Props) {
     <TabView
       ignoresTopSafeArea={ignoresTopSafeArea}
       sidebarAdaptable
+      disablePageAnimations={disablePageAnimations}
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}

ios/RCTTabViewViewManager.mm

@@ -30,5 +30,6 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(sidebarAdaptable, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(labeled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(ignoresTopSafeArea, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(disablePageAnimations, BOOL)
 
 @end

ios/TabViewImpl.swift

@@ -13,6 +13,7 @@ class TabViewProps: ObservableObject {
   @Published var sidebarAdaptable: Bool?
   @Published var labeled: Bool?
   @Published var ignoresTopSafeArea: Bool?
+  @Published var disablePageAnimations: Bool = false
 }
 
 /**
@@ -61,6 +62,12 @@ struct TabViewImpl: View {
     }
     .getSidebarAdaptable(enabled: props.sidebarAdaptable ?? false)
     .onChange(of: props.selectedPage ?? "") { newValue in
+      if (props.disablePageAnimations) {
+        UIView.setAnimationsEnabled(false)
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+          UIView.setAnimationsEnabled(true)
+        }
+      }
       onSelect(newValue)
     }
     .onAppear {

ios/TabViewProvider.swift

@@ -35,6 +35,12 @@ struct TabData: Codable {
     }
   }
 
+  @objc var disablePageAnimations: Bool = false {
+    didSet {
+      props.disablePageAnimations = disablePageAnimations
+    }
+  }
+
   @objc var labeled: Bool = true {
     didSet {
       props.labeled = labeled

src/TabView.tsx

@@ -31,6 +31,11 @@ interface Props<Route extends BaseRoute> {
    * Whether to ignore the top safe area. (iOS only)
    */
   ignoresTopSafeArea?: boolean;
+
+  /**
+   * Whether to disable page animations between tabs. (iOS only)
+   */
+  disablePageAnimations?: boolean;
   /**
    * State for the tab view.
    *