forked from software-mansion/react-native-reanimated
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Typescript for interpolation (software-mansion#2356)
As the next step of the react-native-reanimated smooth transition to TypeScript, this PR updates types for the reanimated interpolation module.
- Loading branch information
Showing
23 changed files
with
856 additions
and
595 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,30 +1,41 @@ | ||
import React from 'react'; | ||
import { StyleProp, StyleSheet, TextInput, TextInputProps, TextStyle } from 'react-native'; | ||
import { | ||
StyleProp, | ||
StyleSheet, | ||
TextInput, | ||
TextInputProps, | ||
TextStyle, | ||
} from 'react-native'; | ||
import Animated, { useAnimatedProps } from 'react-native-reanimated'; | ||
|
||
Animated.addWhitelistedNativeProps({ text: true }); | ||
|
||
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); | ||
|
||
export function AnimatedText({ style, text }: { | ||
style?: StyleProp<Animated.AnimateStyle<StyleProp<TextStyle>>>, | ||
text: Animated.SharedValue<string>, | ||
export function AnimatedText({ | ||
style, | ||
text, | ||
}: { | ||
style?: StyleProp<Animated.AnimateStyle<StyleProp<TextStyle>>>; | ||
text: Animated.SharedValue<string>; | ||
}): React.ReactElement { | ||
const animatedProps = useAnimatedProps(() => { | ||
return { text: text.value } as unknown as TextInputProps; | ||
return ({ text: text.value } as unknown) as TextInputProps; | ||
}); | ||
|
||
return <AnimatedTextInput | ||
underlineColorAndroid="transparent" | ||
editable={false} | ||
value={text.value} | ||
style={[styles.text, style]} | ||
animatedProps={animatedProps} | ||
/> | ||
return ( | ||
<AnimatedTextInput | ||
underlineColorAndroid="transparent" | ||
editable={false} | ||
value={text.value} | ||
style={[styles.text, style]} | ||
animatedProps={animatedProps} | ||
/> | ||
); | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
text: { | ||
color: 'black', | ||
}, | ||
}) | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,63 +1,127 @@ | ||
import { NativeSyntheticEvent } from 'react-native'; | ||
import { PagerViewOnPageScrollEventData, PagerViewOnPageSelectedEventData, PageScrollStateChangedEvent } from 'react-native-pager-view'; | ||
import { | ||
PagerViewOnPageScrollEventData, | ||
PagerViewOnPageSelectedEventData, | ||
PageScrollStateChangedEvent, | ||
} from 'react-native-pager-view'; | ||
import { useEvent, useHandler } from 'react-native-reanimated'; | ||
|
||
export function useAnimatedPagerScrollHandler<TContext extends Record<string, unknown>>( | ||
handlers: { onPageScroll: (e: PagerViewOnPageScrollEventData, context: TContext) => void }, | ||
interface CustomPagerViewOnPageScrollEventData | ||
extends PagerViewOnPageScrollEventData { | ||
eventName: string; | ||
} | ||
|
||
interface CustomPageScrollStateChangedEvent | ||
extends PageScrollStateChangedEvent { | ||
eventName: string; | ||
} | ||
|
||
interface CustomPagerViewOnPageSelectedEventData | ||
extends PagerViewOnPageSelectedEventData { | ||
eventName: string; | ||
} | ||
|
||
export function useAnimatedPagerScrollHandler< | ||
TContext extends Record<string, unknown> | ||
>( | ||
handlers: { | ||
onPageScroll: ( | ||
e: PagerViewOnPageScrollEventData, | ||
context: TContext | ||
) => void; | ||
}, | ||
dependencies?: ReadonlyArray<unknown> | ||
): (e: NativeSyntheticEvent<PagerViewOnPageScrollEventData>) => void { | ||
const { context, doDependenciesDiffer } = useHandler<PagerViewOnPageScrollEventData, TContext>(handlers, dependencies); | ||
const { context, doDependenciesDiffer } = useHandler< | ||
PagerViewOnPageScrollEventData, | ||
TContext | ||
>(handlers, dependencies); | ||
|
||
return useEvent<PagerViewOnPageScrollEventData>( | ||
(event) => { | ||
'worklet'; | ||
const { onPageScroll } = handlers; | ||
|
||
if (onPageScroll && event.eventName.endsWith('onPageScroll')) { | ||
if ( | ||
onPageScroll && | ||
(event as CustomPagerViewOnPageScrollEventData).eventName.endsWith( | ||
'onPageScroll' | ||
) | ||
) { | ||
onPageScroll(event, context); | ||
} | ||
}, | ||
['onPageScroll'], | ||
doDependenciesDiffer, | ||
doDependenciesDiffer | ||
); | ||
} | ||
|
||
export function useAnimatedPagerScrollStateHandler<TContext extends Record<string, unknown>>( | ||
handlers: { onPageScrollStateChanged: (e: PageScrollStateChangedEvent, context: TContext) => void }, | ||
dependencies?: ReadonlyArray<unknown>, | ||
export function useAnimatedPagerScrollStateHandler< | ||
TContext extends Record<string, unknown> | ||
>( | ||
handlers: { | ||
onPageScrollStateChanged: ( | ||
e: PageScrollStateChangedEvent, | ||
context: TContext | ||
) => void; | ||
}, | ||
dependencies?: ReadonlyArray<unknown> | ||
): (e: NativeSyntheticEvent<PageScrollStateChangedEvent>) => void { | ||
const { context, doDependenciesDiffer } = useHandler<PageScrollStateChangedEvent, TContext>(handlers, dependencies); | ||
const { context, doDependenciesDiffer } = useHandler< | ||
PageScrollStateChangedEvent, | ||
TContext | ||
>(handlers, dependencies); | ||
|
||
return useEvent( | ||
return useEvent<PageScrollStateChangedEvent>( | ||
(event) => { | ||
'worklet'; | ||
const { onPageScrollStateChanged } = handlers; | ||
|
||
if (onPageScrollStateChanged && event.eventName.endsWith('onPageScrollStateChanged')) { | ||
if ( | ||
onPageScrollStateChanged && | ||
(event as CustomPageScrollStateChangedEvent).eventName.endsWith( | ||
'onPageScrollStateChanged' | ||
) | ||
) { | ||
onPageScrollStateChanged(event, context); | ||
} | ||
}, | ||
['onPageScrollStateChanged'], | ||
doDependenciesDiffer, | ||
doDependenciesDiffer | ||
); | ||
} | ||
|
||
export function useAnimatedPagerSelectedPageHandler<TContext extends Record<string, unknown>>( | ||
handlers: { onPageSelected: (e: PagerViewOnPageSelectedEventData, context: TContext) => void }, | ||
export function useAnimatedPagerSelectedPageHandler< | ||
TContext extends Record<string, unknown> | ||
>( | ||
handlers: { | ||
onPageSelected: ( | ||
e: PagerViewOnPageSelectedEventData, | ||
context: TContext | ||
) => void; | ||
}, | ||
dependencies?: ReadonlyArray<unknown> | ||
): (e: NativeSyntheticEvent<PagerViewOnPageSelectedEventData>) => void { | ||
const { context, doDependenciesDiffer } = useHandler<PagerViewOnPageSelectedEventData, TContext>(handlers, dependencies); | ||
const { context, doDependenciesDiffer } = useHandler< | ||
PagerViewOnPageSelectedEventData, | ||
TContext | ||
>(handlers, dependencies); | ||
|
||
return useEvent<PagerViewOnPageSelectedEventData>( | ||
(event) => { | ||
'worklet'; | ||
const { onPageSelected } = handlers; | ||
|
||
if (onPageSelected && event.eventName.endsWith('onPageSelected')) { | ||
if ( | ||
onPageSelected && | ||
(event as CustomPagerViewOnPageSelectedEventData).eventName.endsWith( | ||
'onPageSelected' | ||
) | ||
) { | ||
onPageSelected(event, context); | ||
} | ||
}, | ||
['onPageSelected'], | ||
doDependenciesDiffer, | ||
doDependenciesDiffer | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.