@freakycoder/animated-tabbar/lib/module/components/rawButton/RawButton.js

A 60FPS animated tab bar with a variety of cool animation presets.

import React, { useRef } from 'react';
import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
import { TapGestureHandler, LongPressGestureHandler, GestureHandlerRootView } from 'react-native-gesture-handler';
import { useStableCallback } from '../../hooks';
const RawButton = ({
  index,
  selectedIndex,
  accessibilityLabel,
  children,
  style,
  animatedOnChange,
  onLongPress,
  onLayout
}) => {
  const rootViewRef = useRef(null);
  const longPressGestureHandlerRef = useRef(null);

  // Gesture handlers using Reanimated v3
  const tapGestureHandler = useAnimatedGestureHandler({
    onEnd: () => {
      animatedOnChange(index);
    }
  });
  const longPressGestureHandler = useAnimatedGestureHandler({
    onActive: () => {
      runOnJS(onLongPress)(index);
    }
  });

  // Animated reaction for accessibility changes
  useAnimatedReaction(() => selectedIndex.value === index, (isSelected, wasSelected) => {
    if (isSelected !== wasSelected) {
      var _rootViewRef$current;
      runOnJS((_rootViewRef$current = rootViewRef.current) === null || _rootViewRef$current === void 0 ? void 0 : _rootViewRef$current.setNativeProps)({
        accessibilityState: {
          selected: isSelected
        }
      });
    }
  });

  // Layout handling callback
  const handleContainerLayout = useStableCallback(({
    nativeEvent: {
      layout
    }
  }) => onLayout && onLayout(index, layout));

  // Animated styles if needed
  const animatedStyles = useAnimatedStyle(() => {
    return {
      // Conditional styles or transitions can be added here
    };
  });
  return /*#__PURE__*/React.createElement(GestureHandlerRootView, null, /*#__PURE__*/React.createElement(TapGestureHandler, {
    ref: longPressGestureHandlerRef,
    onHandlerStateChange: tapGestureHandler
  }, /*#__PURE__*/React.createElement(Animated.View, {
    ref: rootViewRef,
    accessible: true,
    accessibilityLabel: accessibilityLabel,
    accessibilityRole: "button",
    accessibilityComponentType: "button",
    onLayout: handleContainerLayout,
    style: [style, animatedStyles]
  }, /*#__PURE__*/React.createElement(LongPressGestureHandler, {
    onHandlerStateChange: longPressGestureHandler
  }, /*#__PURE__*/React.createElement(Animated.View, null, children)))));
};
export default RawButton;
//# sourceMappingURL=RawButton.js.map