Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🛠 Reanimated 2 Support #289

Closed
wants to merge 6 commits into from
Closed

🛠 Reanimated 2 Support #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6995929
:wrench:
wcandillon Jun 11, 2020
12f638a
:wrench:
wcandillon Jun 11, 2020
840e9cf
:wrench:
wcandillon Jun 11, 2020
0e5c529
:wrench:
wcandillon Jul 2, 2020
5ee57a4
:wrench:
wcandillon Jul 2, 2020
e397abc
:wrench:
wcandillon Jul 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"tsc": "tsc --noEmit",
"test": "jest",
"prepare": "bob build",
"semantic-release": "semantic-release"
"semantic-release": "semantic-release",
"postinstall": "patch-package"
},
"repository": {
"type": "git",
Expand All @@ -25,7 +26,7 @@
"react": "*",
"react-native": "*",
"react-native-gesture-handler": "*",
"react-native-reanimated": "*"
"react-native-reanimated": ">=2"
},
"devDependencies": {
"@react-native-community/bob": "^0.4.1",
Expand All @@ -36,12 +37,13 @@
"babel-jest": "^24.9.0",
"babel-preset-expo": "^8.0.0",
"eslint": "^6.7.2",
"eslint-config-react-native-wcandillon": "3.0.1",
"eslint-config-react-native-wcandillon": "3.3.0",
"jest": "^24.9.0",
"patch-package": "^6.2.2",
"react": "^16.8.6",
"react-native": "^0.61.0",
"react-native-gesture-handler": "~1.5.0",
"react-native-reanimated": "^1.7.0",
"react-native-reanimated": "2.0.0-alpha.3",
"semantic-release": "^15.13.3",
"semantic-release-cli": "^4.1.2",
"typescript": "^3.6.2"
Expand Down
167 changes: 167 additions & 0 deletions packages/core/patches/react-native-reanimated+2.0.0-alpha.3.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
diff --git a/node_modules/react-native-reanimated/react-native-reanimated.d.ts b/node_modules/react-native-reanimated/react-native-reanimated.d.ts
index 38772d8..3e1d11c 100644
--- a/node_modules/react-native-reanimated/react-native-reanimated.d.ts
+++ b/node_modules/react-native-reanimated/react-native-reanimated.d.ts
@@ -16,8 +16,15 @@ declare module 'react-native-reanimated' {
View as ReactNativeView,
Text as ReactNativeText,
Image as ReactNativeImage,
- ScrollView as ReactNativeScrollView
+ ScrollView as ReactNativeScrollView,
+ NativeScrollEvent,
+ NativeSyntheticEvent,
} from 'react-native';
+ import {
+ GestureHandlerGestureEventNativeEvent,
+ PanGestureHandlerGestureEvent,
+ PanGestureHandlerEventExtra,
+ } from 'react-native-gesture-handler';
namespace Animated {
type Nullable<T> = T | null | undefined;

@@ -61,6 +68,12 @@ declare module 'react-native-reanimated' {
interpolate(config: InterpolationConfig): AnimatedNode<number>;
}

+ type RawSharedValue = number | string | boolean | object;
+ type SharedValueType = RawSharedValue | RawSharedValue[];
+ export type SharedValue<T extends SharedValueType> = {
+ value: T;
+ };
+
export type Mapping = { [key: string]: Mapping } | Adaptable<any>;
export type Adaptable<T> =
| T
@@ -341,6 +354,14 @@ declare module 'react-native-reanimated' {
export const max: BinaryOperator;
export const min: BinaryOperator;

+ // reanimated2 derived operations
+ export function interpolate(
+ x: number,
+ input: Array<number>,
+ output: Array<number>,
+ type: Extrapolate
+ ): number;
+
// animations
export function decay(
clock: AnimatedClock,
@@ -371,6 +392,29 @@ declare module 'react-native-reanimated' {
config: DecayConfig,
): BackwardCompatibleWrapper;

+ // reanimated2 animations
+ export function withTiming(
+ toValue: number,
+ userConfig?: Omit<TimingConfig, 'toValue'>,
+ callback?: (isCancelled: boolean) => void,
+ ): number;
+ export function withSpring(
+ toValue: number,
+ userConfig?: Omit<SpringConfig, 'toValue'>,
+ callback?: (isCancelled: boolean) => void,
+ ): number;
+ export function cancelAnimation<T extends SharedValue<SharedValueType>>(
+ sharedValue: T
+ ): void;
+ export function delay(
+ delayMS: number,
+ delayedAnimation: number,
+ ): number;
+ export function loop(
+ loopedAnimation: number,
+ numberOfLoops?: number,
+ ): number;
+
// hooks
export function useCode(
exec: () => Nullable< AnimatedNode<number>[] | AnimatedNode<number> > | boolean,
@@ -380,6 +424,66 @@ declare module 'react-native-reanimated' {
initialValue: T
): AnimatedValue<T>;

+ // reanimated2 functions
+ export function runOnUI<A extends any[], R>(fn: (...args: A) => R): (...args: Parameters<typeof fn>) => void;
+ export function processColor(color: number | string): number;
+
+ // reanimated2 hooks
+ export function useSharedValue<T>(
+ initialValue: T
+ ): T extends SharedValueType ? SharedValue<T> : never;
+
+ export function useDerivedValue<T extends SharedValueType>(
+ processor: () => T
+ ): SharedValue<T>;
+
+ export function useAnimatedStyle<T extends AnimateProps<ViewStyle> | AnimateProps<TextStyle> | AnimateProps<ImageStyle>>(
+ updater: () => T
+ ): T;
+ export function useAnimatedProps<T extends {}>(
+ updater: () => T
+ ): T;
+ export function useAnimatedGestureHandler<TContext extends Context>(
+ handlers: GestureHandlers<TContext>
+ ): OnGestureEvent;
+ export function useAnimatedScrollHandler(
+ handler: ScrollHandler
+ ): OnScroll;
+ export function useAnimatedScrollHandler(
+ handlers: ScrollHandlers
+ ): OnScroll;
+
+ // gesture-handler
+ type OnGestureEvent = (event: PanGestureHandlerGestureEvent) => void;
+
+ // @TODO: refactor this once worklet parse Typescript syntax
+ type Context = { [key: string]: any };
+
+ type NativeEvent = GestureHandlerGestureEventNativeEvent & PanGestureHandlerEventExtra;
+ type Handler<TContext extends Context> = (event: NativeEvent, context: TContext) => void;
+
+ export interface GestureHandlers<TContext extends Context> {
+ onStart?: Handler<TContext>;
+ onActive?: Handler<TContext>;
+ onEnd?: Handler<TContext>;
+ onFail?: Handler<TContext>;
+ onCancel?: Handler<TContext>;
+ onFinish?: (event: NativeEvent, context: TContext, isCanceledOrFailed: boolean) => void;
+ }
+
+ // scroll view
+ type OnScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+
+ type ScrollHandler = (event: NativeScrollEvent) => void;
+
+ export interface ScrollHandlers {
+ onScroll?:ScrollHandler;
+ onBeginDrag?:ScrollHandler;
+ onEndDrag?: ScrollHandler;
+ onMomentumBegin?: ScrollHandler;
+ onMomentumEnd?: ScrollHandler;
+ }
+
// configuration
export function addWhitelistedNativeProps(props: { [key: string]: true }): void;
export function addWhitelistedUIProps(props: { [key: string]: true }): void;
@@ -500,5 +604,19 @@ declare module 'react-native-reanimated' {
export const timing: typeof Animated.timing
export const spring: typeof Animated.spring
export const SpringUtils: typeof Animated.SpringUtils
+ export const runOnUI: typeof Animated.runOnUI
+ export const processColor: typeof Animated.processColor
export const useValue: typeof Animated.useValue
+ export const useSharedValue: typeof Animated.useSharedValue
+ export const useAnimatedStyle: typeof Animated.useAnimatedStyle
+ export const useAnimatedProps: typeof Animated.useAnimatedProps
+ export const useDerivedValue: typeof Animated.useDerivedValue
+ export const useAnimatedGestureHandler: typeof Animated.useAnimatedGestureHandler
+ export const useAnimatedScrollHandler: typeof Animated.useAnimatedScrollHandler
+ export const withTiming: typeof Animated.withTiming
+ export const withSpring: typeof Animated.withSpring
+ export const cancelAnimation: typeof Animated.cancelAnimation
+ export const delay: typeof Animated.delay
+ export const loop: typeof Animated.loop
+ export const interpolate: typeof Animated.interpolate
}
\ No newline at end of file
Loading