diff --git a/native/components/swipeable.js b/native/components/swipeable.js index e2ebaa441..49c36ac7b 100644 --- a/native/components/swipeable.js +++ b/native/components/swipeable.js @@ -1,109 +1,110 @@ // @flow import * as React from 'react'; import { Animated, View } from 'react-native'; // eslint-disable-next-line import/extensions import SwipeableComponent from 'react-native-gesture-handler/Swipeable'; import Button from './button.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useStyles } from '../themes/colors.js'; +import type { AnimatedInterpolation } from '../types/react-native.js'; type Props = { +buttonWidth: number, +rightActions: $ReadOnlyArray<{ +key: string, +onPress: () => mixed, +color: ?string, +content: React.Node, }>, +onSwipeableRightWillOpen?: () => void, +innerRef: { current: ?SwipeableComponent, }, +children?: React.Node, }; function Swipeable(props: Props): React.Node { const styles = useStyles(unboundStyles); const windowWidth = useSelector(state => state.dimensions.width); const { buttonWidth, rightActions = [], onSwipeableRightWillOpen, innerRef, children, } = props; const renderRightActions = React.useCallback( - progress => { + (progress: AnimatedInterpolation) => { const actions = rightActions.map( ({ key, content, color, onPress }, i) => { const translation = progress.interpolate({ inputRange: [0, 1], outputRange: [(rightActions.length - i) * buttonWidth, 0], }); return ( ); }, ); return {actions}; }, [ buttonWidth, rightActions, styles.action, styles.actionsContainer, windowWidth, ], ); const swipeable = React.useMemo( () => ( {children} ), [children, innerRef, onSwipeableRightWillOpen, renderRightActions], ); return swipeable; } const unboundStyles = { action: { height: '100%', alignItems: 'center', justifyContent: 'center', }, actionsContainer: { flexDirection: 'row', }, }; export default Swipeable; diff --git a/native/types/react-native.js b/native/types/react-native.js index a2612fe69..e05b29b95 100644 --- a/native/types/react-native.js +++ b/native/types/react-native.js @@ -1,42 +1,45 @@ // @flow +import AnimatedInterpolation from 'react-native/Libraries/Animated/nodes/AnimatedInterpolation.js'; import type ReactNativeAnimatedValue from 'react-native/Libraries/Animated/nodes/AnimatedValue.js'; import type { ViewToken } from 'react-native/Libraries/Lists/ViewabilityHelper.js'; export type { Layout, LayoutEvent, ScrollEvent, } from 'react-native/Libraries/Types/CoreEventTypes.js'; export type { ContentSizeChangeEvent, KeyPressEvent, FocusEvent, BlurEvent, SelectionChangeEvent, } from 'react-native/Libraries/Components/TextInput/TextInput.js'; export type { NativeMethods } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes.js'; export type { KeyboardEvent } from 'react-native/Libraries/Components/Keyboard/Keyboard.js'; export type { EventSubscription } from 'react-native/Libraries/vendor/emitter/EventEmitter.js'; export type AnimatedValue = ReactNativeAnimatedValue; export type ViewableItemsChange = { +viewableItems: ViewToken[], +changed: ViewToken[], ... }; export type EmitterSubscription = { +remove: () => void, ... }; export type ImagePasteEvent = { +fileName: string, +filePath: string, +height: number, +width: number, +threadID: string, }; + +export type { AnimatedInterpolation };