react-native-reanimated 2.9.1 → 3.0.0-rc.2

package/src/reanimated2/animation/decay.ts

@@ -20,6 +20,8 @@ interface DefaultDecayConfig {
   velocityFactor: number;
   clamp?: number[];
   velocity: number;
+  rubberBandEffect?: boolean;
+  rubberBandFactor: number;
 }
 
 export interface DecayAnimation extends Animation<DecayAnimation> {
@@ -48,6 +50,7 @@ export function withDecay(
       deceleration: 0.998,
       velocityFactor: Platform.OS !== 'web' ? 1 : 1000,
       velocity: 0,
+      rubberBandFactor: 0.6,
     };
     if (userConfig) {
       Object.keys(userConfig).forEach(
@@ -59,40 +62,81 @@ export function withDecay(
     const VELOCITY_EPS = Platform.OS !== 'web' ? 1 : 1 / 20;
     const SLOPE_FACTOR = 0.1;
 
-    function decay(animation: InnerDecayAnimation, now: number): boolean {
-      const {
-        lastTimestamp,
-        startTimestamp,
-        initialVelocity,
-        current,
-        velocity,
-      } = animation;
-
-      const deltaTime = Math.min(now - lastTimestamp, 64);
-      const v =
-        velocity *
-        Math.exp(
-          -(1 - config.deceleration) * (now - startTimestamp) * SLOPE_FACTOR
-        );
-      animation.current =
-        current + (v * config.velocityFactor * deltaTime) / 1000; // /1000 because time is in ms not in s
-      animation.velocity = v;
-      animation.lastTimestamp = now;
+    let decay: (animation: InnerDecayAnimation, now: number) => boolean;
 
-      if (config.clamp) {
-        if (initialVelocity < 0 && animation.current <= config.clamp[0]) {
-          animation.current = config.clamp[0];
-          return true;
-        } else if (
-          initialVelocity > 0 &&
-          animation.current >= config.clamp[1]
-        ) {
-          animation.current = config.clamp[1];
+    if (config.rubberBandEffect) {
+      decay = (animation: InnerDecayAnimation, now: number): boolean => {
+        const {
+          lastTimestamp,
+          startTimestamp,
+          current,
+          initialVelocity,
+          velocity,
+        } = animation;
+
+        const deltaTime = Math.min(now - lastTimestamp, 64);
+        const clampIndex = initialVelocity > 0 ? 1 : 0;
+        let derivative = 0;
+        if (current < config.clamp![0] || current > config.clamp![1]) {
+          derivative = current - config.clamp![clampIndex];
+        }
+
+        if (derivative !== 0) {
+          animation.springActive = true;
+        } else if (derivative === 0 && animation.springActive) {
+          animation.current = config.clamp![clampIndex];
           return true;
         }
-      }
 
-      return Math.abs(v) < VELOCITY_EPS;
+        const v =
+          velocity *
+            Math.exp(
+              -(1 - config.deceleration) * (now - startTimestamp) * SLOPE_FACTOR
+            ) -
+          derivative * config.rubberBandFactor;
+
+        animation.current =
+          current + (v * config.velocityFactor * deltaTime) / 1000;
+        animation.velocity = v;
+        animation.lastTimestamp = now;
+        return false;
+      };
+    } else {
+      decay = (animation: InnerDecayAnimation, now: number): boolean => {
+        const {
+          lastTimestamp,
+          startTimestamp,
+          initialVelocity,
+          current,
+          velocity,
+        } = animation;
+
+        const deltaTime = Math.min(now - lastTimestamp, 64);
+        const v =
+          velocity *
+          Math.exp(
+            -(1 - config.deceleration) * (now - startTimestamp) * SLOPE_FACTOR
+          );
+        animation.current =
+          current + (v * config.velocityFactor * deltaTime) / 1000;
+        animation.velocity = v;
+        animation.lastTimestamp = now;
+
+        if (config.clamp) {
+          if (initialVelocity < 0 && animation.current <= config.clamp[0]) {
+            animation.current = config.clamp[0];
+            return true;
+          } else if (
+            initialVelocity > 0 &&
+            animation.current >= config.clamp[1]
+          ) {
+            animation.current = config.clamp[1];
+            return true;
+          }
+        }
+
+        return Math.abs(v) < VELOCITY_EPS;
+      };
     }
 
     function validateConfig(): void {
@@ -113,6 +157,11 @@ export function withDecay(
           `config.velocityFactor must be greather then 0 but is ${config.velocityFactor}`
         );
       }
+      if (config.rubberBandEffect && !config.clamp) {
+        throw Error(
+          'You need to set `clamp` property when using `rubberBandEffect`.'
+        );
+      }
     }
 
     function onStart(

package/src/reanimated2/animation/index.ts

@@ -1,4 +1,4 @@
-export {
+export type {
   HigherOrderAnimation,
   NextAnimation,
   DelayAnimation,
@@ -7,9 +7,12 @@ export {
   StyleLayoutAnimation,
 } from './commonTypes';
 export { cancelAnimation, defineAnimation, initialUpdaterRun } from './util';
-export { withTiming, TimingAnimation } from './timing';
-export { withSpring, SpringAnimation } from './spring';
-export { withDecay, DecayAnimation } from './decay';
+export { withTiming } from './timing';
+export type { TimingAnimation } from './timing';
+export { withSpring } from './spring';
+export type { SpringAnimation } from './spring';
+export { withDecay } from './decay';
+export type { DecayAnimation } from './decay';
 export { withDelay } from './delay';
 export { withRepeat } from './repeat';
 export { withSequence } from './sequence';

package/src/reanimated2/animation/util.ts

@@ -87,7 +87,14 @@ function decorateAnimation<T extends AnimationObject | StyleLayoutAnimation>(
     animation.startValue = strippedValue;
     animation.toValue = strippedToValue;
     if (previousAnimation && previousAnimation !== animation) {
-      previousAnimation.current = previousAnimation.strippedCurrent;
+      const {
+        prefix: paPrefix,
+        suffix: paSuffix,
+        strippedValue: paStrippedValue,
+      } = recognizePrefixSuffix(previousAnimation.current as string | number);
+      previousAnimation.current = paStrippedValue;
+      previousAnimation.__prefix = paPrefix;
+      previousAnimation.__suffix = paSuffix;
     }
 
     baseOnStart(animation, strippedValue, timestamp, previousAnimation);

package/src/reanimated2/commonTypes.ts

@@ -15,7 +15,6 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { Context } from './hook/commonTypes';
 
 export type TransformProperty =
   | PerpectiveTransform
@@ -47,6 +46,8 @@ export interface SharedValue<T> {
   value: T;
 }
 
+export type Context = Record<string, unknown>;
+
 export interface WorkletFunction {
   _closure?: Context;
   __workletHash?: number;
@@ -145,3 +146,18 @@ export type ValueRotation = {
 };
 
 export type SensorValueRotation = SharedValue<ValueRotation>;
+
+export type ShadowNodeWrapper = object;
+
+export enum KeyboardState {
+  UNKNOWN = 0,
+  OPENING = 1,
+  OPEN = 2,
+  CLOSING = 3,
+  CLOSED = 4,
+}
+
+export type AnimatedKeyboardInfo = {
+  height: SharedValue<number>;
+  state: SharedValue<KeyboardState>;
+};

package/src/reanimated2/component/FlatList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ForwardedRef, forwardRef } from 'react';
 import { FlatList, FlatListProps, LayoutChangeEvent } from 'react-native';
 import ReanimatedView from './View';
 import createAnimatedComponent from '../../createAnimatedComponent';
@@ -6,10 +6,14 @@ import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/c
 
 const AnimatedFlatList = createAnimatedComponent(FlatList as any) as any;
 
+interface AnimatedFlatListProps {
+  onLayout: (event: LayoutChangeEvent) => void;
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children: React.ReactNode;
+}
+
 const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
-  const cellRenderer: React.FC<{
-    onLayout: (event: LayoutChangeEvent) => void;
-  }> = (props) => {
+  const cellRenderer = (props: AnimatedFlatListProps) => {
     return (
       <ReanimatedView layout={itemLayoutAnimation} onLayout={props.onLayout}>
         {props.children}
@@ -20,23 +24,29 @@ const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
   return cellRenderer;
 };
 
-export interface ReanimatedFlatlistProps<ItemT> extends FlatListProps<ItemT> {
+export interface ReanimatedFlatListProps<ItemT> extends FlatListProps<ItemT> {
   itemLayoutAnimation?: ILayoutAnimationBuilder;
 }
 
-type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatlistProps<T>>;
-
-const ReanimatedFlatlist: ReanimatedFlatListFC = ({
-  itemLayoutAnimation,
-  ...restProps
-}) => {
-  const cellRenderer = React.useMemo(
-    () => createCellRenderer(itemLayoutAnimation),
-    []
-  );
-  return (
-    <AnimatedFlatList {...restProps} CellRendererComponent={cellRenderer} />
-  );
-};
+type ReanimatedFlatListFC<T = any> = React.FC<ReanimatedFlatListProps<T>>;
+
+const ReanimatedFlatlist: ReanimatedFlatListFC = forwardRef(
+  (props: ReanimatedFlatListProps<any>, ref: ForwardedRef<FlatList>) => {
+    const { itemLayoutAnimation, ...restProps } = props;
+
+    const cellRenderer = React.useMemo(
+      () => createCellRenderer(itemLayoutAnimation),
+      []
+    );
+
+    return (
+      <AnimatedFlatList
+        ref={ref}
+        {...restProps}
+        CellRendererComponent={cellRenderer}
+      />
+    );
+  }
+);
 
 export default ReanimatedFlatlist;

package/src/reanimated2/core.ts

@@ -1,4 +1,4 @@
-/* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp, _setGlobalConsole */
+/* global _WORKLET _getCurrentTime _frameTimestamp _eventTimestamp _setGlobalConsole */
 import NativeReanimatedModule from './NativeReanimated';
 import { Platform } from 'react-native';
 import { nativeShouldBeMock, shouldBeUseWeb, isWeb } from './PlatformChecker';
@@ -41,14 +41,18 @@ const testWorklet: BasicWorkletFunction<void> = () => {
   'worklet';
 };
 
+const throwUninitializedReanimatedException = () => {
+  throw new Error(
+    "Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ \n1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) \n2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache"
+  );
+};
+
 export const checkPluginState: (throwError: boolean) => boolean = (
   throwError = true
 ) => {
   if (!testWorklet.__workletHash && !shouldBeUseWeb()) {
     if (throwError) {
-      throw new Error(
-        "Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?"
-      );
+      throwUninitializedReanimatedException();
     }
     return false;
   }
@@ -62,11 +66,7 @@ export const isConfigured: (throwError?: boolean) => boolean = (
 };
 
 export const isConfiguredCheck: () => void = () => {
-  if (!isConfigured(true)) {
-    throw new Error(
-      'If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation'
-    );
-  }
+  checkPluginState(true);
 };
 
 function pushFrame(frame: (timestamp: Timestamp) => void): void {
@@ -99,6 +99,12 @@ export function makeShareable<T>(value: T): T {
 }
 
 export function getViewProp<T>(viewTag: string, propName: string): Promise<T> {
+  if (global._IS_FABRIC) {
+    throw new Error(
+      '[react-native-reanimated] `getViewProp` is not supported on Fabric yet'
+    );
+  }
+
   return new Promise((resolve, reject) => {
     return NativeReanimatedModule.getViewProp(
       viewTag,

package/src/reanimated2/fabricUtils.ts

@@ -0,0 +1,27 @@
+/* eslint-disable camelcase */
+
+import { ShadowNodeWrapper } from './commonTypes';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let findHostInstance_DEPRECATED = (_ref: React.Component) => null;
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  findHostInstance_DEPRECATED =
+    require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
+} catch (e) {
+  // do nothing
+}
+
+export function getShadowNodeWrapperFromHostInstance(
+  hostInstance: unknown
+): ShadowNodeWrapper {
+  // @ts-ignore Fabric
+  return hostInstance._internalInstanceHandle.stateNode.node;
+}
+
+export function getShadowNodeWrapperFromRef(
+  ref: React.Component
+): ShadowNodeWrapper {
+  return getShadowNodeWrapperFromHostInstance(findHostInstance_DEPRECATED(ref));
+}

package/src/reanimated2/fabricUtils.web.ts

@@ -0,0 +1,19 @@
+/* eslint-disable camelcase */
+
+import { ShadowNodeWrapper } from './commonTypes';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const findHostInstance_DEPRECATED = (_ref: React.Component) => null;
+
+export function getShadowNodeWrapperFromHostInstance(
+  hostInstance: unknown
+): ShadowNodeWrapper {
+  // @ts-ignore Fabric
+  return hostInstance._internalInstanceHandle.stateNode.node;
+}
+
+export function getShadowNodeWrapperFromRef(
+  ref: React.Component
+): ShadowNodeWrapper {
+  return getShadowNodeWrapperFromHostInstance(findHostInstance_DEPRECATED(ref));
+}

package/src/reanimated2/frameCallback/FrameCallbackRegistryJS.ts

@@ -0,0 +1,43 @@
+import { runOnUI } from '../core';
+import { prepareUIRegistry } from './FrameCallbackRegistryUI';
+
+export default class FrameCallbackRegistryJS {
+  private nextCallbackId = 0;
+
+  constructor() {
+    prepareUIRegistry();
+  }
+
+  registerFrameCallback(callback: () => void): number {
+    if (!callback) {
+      return -1;
+    }
+
+    const callbackId = this.nextCallbackId;
+    this.nextCallbackId++;
+
+    runOnUI(() => {
+      'worklet';
+      global._frameCallbackRegistry.registerFrameCallback(callback, callbackId);
+    })();
+
+    return callbackId;
+  }
+
+  unregisterFrameCallback(frameCallbackId: number): void {
+    runOnUI(() => {
+      'worklet';
+      global._frameCallbackRegistry.unregisterFrameCallback(frameCallbackId);
+    })();
+  }
+
+  manageStateFrameCallback(frameCallbackId: number, state: boolean): void {
+    runOnUI(() => {
+      'worklet';
+      global._frameCallbackRegistry.manageStateFrameCallback(
+        frameCallbackId,
+        state
+      );
+    })();
+  }
+}

package/src/reanimated2/frameCallback/FrameCallbackRegistryUI.ts

@@ -0,0 +1,64 @@
+import { runOnUI } from '../core';
+
+export default interface FrameCallbackRegistryUI {
+  frameCallbackRegistry: Map<number, () => void>;
+  frameCallbackActive: Set<number>;
+  isFrameCallbackRunning: boolean;
+  runCallbacks: () => void;
+  registerFrameCallback: (callback: () => void, callbackId: number) => void;
+  unregisterFrameCallback: (frameCallbackId: number) => void;
+  manageStateFrameCallback: (frameCallbackId: number, state: boolean) => void;
+}
+
+export const prepareUIRegistry = runOnUI(() => {
+  'worklet';
+
+  const frameCallbackRegistry: FrameCallbackRegistryUI = {
+    frameCallbackRegistry: new Map<number, () => void>(),
+    frameCallbackActive: new Set<number>(),
+    isFrameCallbackRunning: false,
+
+    runCallbacks() {
+      const loop = () => {
+        this.frameCallbackActive.forEach((key: number) => {
+          const callback = this.frameCallbackRegistry.get(key);
+          callback!();
+        });
+
+        if (this.frameCallbackActive.size > 0) {
+          requestAnimationFrame(loop);
+        } else {
+          this.isFrameCallbackRunning = false;
+        }
+      };
+
+      if (!this.isFrameCallbackRunning) {
+        requestAnimationFrame(loop);
+        this.isFrameCallbackRunning = true;
+      }
+    },
+
+    registerFrameCallback(callback: () => void, callbackId: number) {
+      this.frameCallbackRegistry.set(callbackId, callback);
+    },
+
+    unregisterFrameCallback(frameCallbackId: number) {
+      this.manageStateFrameCallback(frameCallbackId, false);
+      this.frameCallbackRegistry.delete(frameCallbackId);
+    },
+
+    manageStateFrameCallback(frameCallbackId: number, state: boolean) {
+      if (frameCallbackId === -1) {
+        return;
+      }
+      if (state) {
+        this.frameCallbackActive.add(frameCallbackId);
+        this.runCallbacks();
+      } else {
+        this.frameCallbackActive.delete(frameCallbackId);
+      }
+    },
+  };
+
+  global._frameCallbackRegistry = frameCallbackRegistry;
+});

package/src/reanimated2/globals.d.ts

@@ -1,9 +1,12 @@
 import { AnimatedStyle, StyleProps } from './commonTypes';
 import { ReanimatedConsole } from './core';
+import { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegistryUI';
+import { ShadowNodeWrapper } from './hook/commonTypes';
 import { MeasuredDimensions } from './NativeMethods';
 import { NativeReanimated } from './NativeReanimated/NativeReanimated';
 declare global {
   const _WORKLET: boolean;
+  const _IS_FABRIC: boolean;
   const _frameTimestamp: number;
   const _eventTimestamp: number;
   const _setGlobalConsole: (console?: ReanimatedConsole) => void;
@@ -14,11 +17,18 @@ declare global {
     flag: { value: boolean; _value: boolean }
   ) => void;
   const _setGestureState: (handlerTag: number, newState: number) => void;
-  const _updateProps: (
+  const _updatePropsPaper: (
     tag: number,
     name: string,
     updates: StyleProps | AnimatedStyle
   ) => void;
+  const _updatePropsFabric: (
+    shadowNodeWrapper: ShadowNodeWrapper,
+    props: StyleProps | AnimatedStyle
+  ) => void;
+  const _removeShadowNodeFromRegistry: (
+    shadowNodeWrapper: ShadowNodeWrapper
+  ) => void;
   const _measure: (viewTag: number) => MeasuredDimensions;
   const _scrollTo: (
     viewTag: number,
@@ -26,20 +36,28 @@ declare global {
     y: number,
     animated: boolean
   ) => void;
+  const _dispatchCommand: (
+    shadowNodeWrapper: ShadowNodeWrapper,
+    commandName: string,
+    args: Array<unknown>
+  ) => void;
   const _chronoNow: () => number;
   const ReanimatedDataMock: {
     now: () => number;
   };
+  const _frameCallbackRegistry: FrameCallbackRegistryUI;
   namespace NodeJS {
     interface Global {
       _setGlobalConsole: (console?: ReanimatedConsole) => void;
       _log: (s: string) => void;
       _setGestureState: () => void;
       _WORKLET: boolean;
+      _IS_FABRIC: boolean;
       __reanimatedModuleProxy: NativeReanimated;
       _frameTimestamp: number | null;
       _measure: () => MeasuredDimensions;
       _scrollTo: () => void;
+      _dispatchCommand: () => void;
       _chronoNow: () => number;
       performance: { now: () => number };
       LayoutAnimationRepository: {
@@ -55,6 +73,7 @@ declare global {
       ReanimatedDataMock: {
         now: () => number;
       };
+      _frameCallbackRegistry: FrameCallbackRegistryUI;
     }
   }
 }

package/src/reanimated2/hook/commonTypes.ts

@@ -1,14 +1,16 @@
-export type DependencyList = Array<unknown> | undefined;
+import { Context, ShadowNodeWrapper } from '../commonTypes';
 
-export type Context = Record<string, unknown>;
+export type DependencyList = Array<unknown> | undefined;
 
 export interface ContextWithDependencies<TContext extends Context> {
   context: TContext;
   savedDependencies: DependencyList;
 }
+
 export interface Descriptor {
   tag: number;
   name: string;
+  shadowNodeWrapper: ShadowNodeWrapper;
 }
 
 export interface RefObjectFunction<T> {

package/src/reanimated2/hook/index.ts

@@ -1,4 +1,4 @@
-export { DependencyList, Context } from './commonTypes';
+export type { DependencyList } from './commonTypes';
 export {
   useAnimatedProps,
   useEvent,
@@ -6,21 +6,21 @@ export {
   useWorkletCallback,
 } from './Hooks';
 export { useSharedValue } from './useSharedValue';
-export { useAnimatedStyle, AnimatedStyleResult } from './useAnimatedStyle';
-export {
-  useAnimatedGestureHandler,
+export { useAnimatedStyle } from './useAnimatedStyle';
+export type { AnimatedStyleResult } from './useAnimatedStyle';
+export { useAnimatedGestureHandler } from './useAnimatedGestureHandler';
+export type {
   GestureHandlerEvent,
   GestureHandlers,
 } from './useAnimatedGestureHandler';
-export {
-  useAnimatedReaction,
-  AnimatedReactionWorkletFunction,
-} from './useAnimatedReaction';
+export { useAnimatedReaction } from './useAnimatedReaction';
+export type { AnimatedReactionWorkletFunction } from './useAnimatedReaction';
 export { useAnimatedRef } from './useAnimatedRef';
-export {
-  useAnimatedScrollHandler,
-  ScrollHandler,
-  ScrollHandlers,
-} from './useAnimatedScrollHandler';
-export { useDerivedValue, DerivedValue } from './useDerivedValue';
+export { useAnimatedScrollHandler } from './useAnimatedScrollHandler';
+export type { ScrollHandler, ScrollHandlers } from './useAnimatedScrollHandler';
+export { useDerivedValue } from './useDerivedValue';
+export type { DerivedValue } from './useDerivedValue';
 export { useAnimatedSensor, SensorType } from './useAnimatedSensor';
+export { useFrameCallback } from './useFrameCallback';
+export type { FrameCallback } from './useFrameCallback';
+export { useAnimatedKeyboard } from './useAnimatedKeyboard';

package/src/reanimated2/hook/useAnimatedGestureHandler.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject } from 'react';
-import { WorkletFunction } from '../commonTypes';
+import { Context, WorkletFunction } from '../commonTypes';
 import WorkletEventHandler from '../WorkletEventHandler';
-import { Context, DependencyList } from './commonTypes';
+import { DependencyList } from './commonTypes';
 import { useEvent, useHandler } from './Hooks';
 
 interface Handler<T, TContext extends Context> extends WorkletFunction {

package/src/reanimated2/hook/useAnimatedKeyboard.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+import NativeReanimated from '../NativeReanimated';
+import { makeMutable } from '../core';
+import { AnimatedKeyboardInfo, KeyboardState } from '../commonTypes';
+
+export function useAnimatedKeyboard(): AnimatedKeyboardInfo {
+  const ref = useRef<AnimatedKeyboardInfo | null>(null);
+  const listenerId = useRef<number>(-1);
+  const isSubscribed = useRef<boolean>(false);
+
+  if (ref.current === null) {
+    const keyboardEventData: AnimatedKeyboardInfo = {
+      state: makeMutable(KeyboardState.UNKNOWN),
+      height: makeMutable(0),
+    };
+    listenerId.current =
+      NativeReanimated.subscribeForKeyboardEvents(keyboardEventData);
+    ref.current = keyboardEventData;
+    isSubscribed.current = true;
+  }
+  useEffect(() => {
+    if (isSubscribed.current === false && ref.current !== null) {
+      // subscribe again after Fast Refresh
+      listenerId.current = NativeReanimated.subscribeForKeyboardEvents(
+        ref.current
+      );
+      isSubscribed.current = true;
+    }
+    return () => {
+      NativeReanimated.unsubscribeFromKeyboardEvents(listenerId.current);
+      isSubscribed.current = false;
+    };
+  }, []);
+  return ref.current;
+}