Page MenuHomePhabricator
Differential D14035

[native] Extract showing version unsupported alert to separate hook
ClosedPublic
Actions

Authored by bartek on Nov 25 2024, 3:49 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Apr 4, 1:40 AM
Unknown Object (File)
Sun, Mar 30, 3:37 AM
Unknown Object (File)
Thu, Mar 27, 2:41 PM
Unknown Object (File)
Thu, Mar 27, 12:35 PM
Unknown Object (File)
Thu, Mar 27, 9:11 AM
Unknown Object (File)
Wed, Mar 26, 1:10 PM
Unknown Object (File)
Wed, Mar 26, 12:50 AM
Unknown Object (File)
Mar 6 2025, 4:33 AM
View All 51 Files
Subscribers
ashoat
tomek

Details

Reviewers
kamil
varun
Commits
rCOMMf848902ef915: [native] Extract showing version unsupported alert to separate hook
Summary

This alert is going to be also shown when use_new_flow is returned. Made logout-upon-confirm configurable

Depends on D14034

Test Plan

Mocked versionSupported() always return false. The modal was displayed and I was logged out afterwards.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
native/
components/
30 lines
utils/
36 lines

Diff 46153

View Options

native/components/version-supported.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native'; import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';
import Animated, { withTiming } from 'react-native-reanimated'; import Animated, {
FadeOut,
withTiming,
// eslint-disable-next-line no-unused-vars
type EntryAnimationsValues,
// eslint-disable-next-line no-unused-vars
type ExitAnimationsValues,
inkaAuthorUnsubmitted
Done
Inline Actions

Those types are used in worklets. We have to import them for flow, but eslint doesn't understand that

inka: Those types are used in worklets. We have to import them for flow, but eslint doesn't…
tomekUnsubmitted
Not Done
Inline Actions

It seems like it can't be fixed on eslint level https://github.com/jsx-eslint/eslint-plugin-react/issues/1714. It needs to be fixed on babel level - I found an issue https://github.com/babel/babel/issues/15061 where someone is using flowComments plugin. Maybe we should give it a try. https://linear.app/comm/issue/ENG-9040/check-if-flowcomments-babel-plugin-allows-flow-comment-syntax

tomek: It seems like it can't be fixed on eslint level https://github.com/jsx-eslint/eslint-plugin…
} from 'react-native-reanimated';
import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { OverlayContext } from '../navigation/overlay-context.js'; import { OverlayContext } from '../navigation/overlay-context.js';
import type { NavigationRoute } from '../navigation/route-names.js'; import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js'; import { useStyles } from '../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
} from '../types/layout-types.js'; } from '../types/layout-types.js';
import type { LayoutEvent } from '../types/react-native.js'; import type { LayoutEvent } from '../types/react-native.js';
import { import { AnimatedView } from '../types/styles.js';
AnimatedView,
type WritableAnimatedStyleObj,
type ReanimatedTransform,
} from '../types/styles.js';
const { Value, Extrapolate, add, multiply, interpolateNode } = Animated; const { Value } = Animated;
const animationDuration = 150; const animationDuration = 150;
const unboundStyles = { const unboundStyles = {
backdrop: { backdrop: {
backgroundColor: 'black', backgroundColor: 'black',
bottom: 0, bottom: 0,
left: 0, left: 0,
Show All 39 Linesexport type NUXTipsOverlayParams = {
+verticalBounds: VerticalBounds, +verticalBounds: VerticalBounds,
}; };
export type NUXTipsOverlayProps = { export type NUXTipsOverlayProps = {
+navigation: AppNavigationProp<'NUXTipsOverlay'>, +navigation: AppNavigationProp<'NUXTipsOverlay'>,
+route: NavigationRoute<'NUXTipsOverlay'>, +route: NavigationRoute<'NUXTipsOverlay'>,
}; };
const tipHeight: number = 30;
const margin: number = 20; const margin: number = 20;
const tipContainerTranslateY = -80;
inkaAuthorUnsubmitted
Done
Inline Actions

I don't think this value can ba calculated in any way? I think I just have to use something that looks rigth?

inka: I don't think this value can ba calculated in any way? I think I just have to use something…
tomekUnsubmitted
Not Done
Inline Actions

Isn't it related to the height of the tooltip?

tomek: Isn't it related to the height of the tooltip?
inkaAuthorUnsubmitted
Done
Inline Actions

You are right, going to fix this in D13072 where I move this to the component

inka: You are right, going to fix this in D13072 where I move this to the component
function opacityEnteringAnimation() { function opacityEnteringAnimation() {
'worklet'; 'worklet';
return { return {
animations: { animations: {
opacity: withTiming(0.7, { duration: animationDuration }), opacity: withTiming(0.7, { duration: animationDuration }),
transform: [{}], transform: [{}],
Show All 9 Linesfunction createNUXTipsOverlay(
getTipText: () => string, getTipText: () => string,
): React.ComponentType<NUXTipsOverlayProps> { ): React.ComponentType<NUXTipsOverlayProps> {
function NUXTipsOverlay(props: NUXTipsOverlayProps) { function NUXTipsOverlay(props: NUXTipsOverlayProps) {
const dimensions = useSelector(state => state.dimensions); const dimensions = useSelector(state => state.dimensions);
const overlayContext = React.useContext(OverlayContext); const overlayContext = React.useContext(OverlayContext);
invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext'); invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
const { animationCallback } = overlayContext; const { animationCallback } = overlayContext;
const position = React.useMemo(() => new Animated.Value(1), []);
const { navigation, route } = props; const { navigation, route } = props;
const { goBackOnce } = navigation; const { goBackOnce } = navigation;
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const contentContainerStyle = React.useMemo(() => { const contentContainerStyle = React.useMemo(() => {
const { verticalBounds } = route.params; const { verticalBounds } = route.params;
Show All 37 Lines const onTipContainerLayout = React.useCallback(
} else { } else {
const minWidth = width + 2 * extraRightSpace; const minWidth = width + 2 * extraRightSpace;
tipHorizontalOffset.setValue((actualWidth - minWidth) / 2); tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);
} }
}, },
[dimensions.width, initialCoordinates, tipHorizontalOffset], [dimensions.width, initialCoordinates, tipHorizontalOffset],
); );
const tipContainerOpacity = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.1],
outputRange: [0, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);
const tipVerticalBelow = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 1],
outputRange: [-margin - tipHeight / 2, 0],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);
const tipHorizontal = React.useMemo(() => {
const invertedPosition = add(1, multiply(-1, position));
return multiply(invertedPosition, tipHorizontalOffset);
}, [position, tipHorizontalOffset]);
const tipScale = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.2, 0.8, 1],
outputRange: [0, 0, 1, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);
const baseTipContainerStyle = React.useMemo(() => { const baseTipContainerStyle = React.useMemo(() => {
const { y, x, height, width } = initialCoordinates; const { y, x, height, width } = initialCoordinates;
const top = const top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin; Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;
const extraLeftSpace = x; const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x; const extraRightSpace = dimensions.width - width - x;
Show All 16 Lines const baseTipContainerStyle = React.useMemo(() => {
} }
}, [ }, [
dimensions.width, dimensions.width,
initialCoordinates, initialCoordinates,
verticalBounds.height, verticalBounds.height,
verticalBounds.y, verticalBounds.y,
]); ]);
const tipContainerStyle = React.useMemo(() => {
const style: WritableAnimatedStyleObj = {};
style.opacity = tipContainerOpacity;
const transform: Array<ReanimatedTransform> = [];
transform.push({ translateX: tipHorizontal });
transform.push({ translateY: tipVerticalBelow });
transform.push({ scale: tipScale });
style.transform = transform;
return { ...baseTipContainerStyle, ...style };
}, [
baseTipContainerStyle,
tipContainerOpacity,
tipHorizontal,
tipScale,
tipVerticalBelow,
]);
const triangleStyle = React.useMemo(() => { const triangleStyle = React.useMemo(() => {
const { x, width } = initialCoordinates; const { x, width } = initialCoordinates;
const extraLeftSpace = x; const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x; const extraRightSpace = dimensions.width - width - x;
if (extraLeftSpace < extraRightSpace) { if (extraLeftSpace < extraRightSpace) {
return { return {
alignSelf: 'flex-start', alignSelf: 'flex-start',
left: extraLeftSpace + (width - 20) / 2, left: extraLeftSpace + (width - (20 / 100) * width) / 2,
}; };
} else { } else {
return { return {
alignSelf: 'flex-end', alignSelf: 'flex-end',
right: extraRightSpace + (width - 20) / 2, right: extraRightSpace + (width - (20 / 100) * width) / 2,
inkaAuthorUnsubmitted
Done
Inline Actions

For community drawer button which is rather small, the hardcoded 20 made it look awkward. I used 20% instead, but this may be changed later

inka: For community drawer button which is rather small, the hardcoded `20` made it look awkward. I…
tomekUnsubmitted
Not Done
Inline Actions

Please simplify these expressions

tomek: Please simplify these expressions
}; };
} }
}, [dimensions.width, initialCoordinates]); }, [dimensions.width, initialCoordinates]);
const tipText = getTipText(); const tipText = getTipText();
const opacityExitingAnimation = React.useCallback(() => { const opacityExitingAnimation = React.useCallback(() => {
'worklet'; 'worklet';
return { return {
animations: { animations: {
opacity: withTiming(0, { duration: animationDuration }), opacity: withTiming(0, { duration: animationDuration }),
}, },
initialValues: { initialValues: {
opacity: 0.7, opacity: 0.7,
}, },
callback: animationCallback, callback: animationCallback,
}; };
}, [animationCallback]); }, [animationCallback]);
// prettier-ignore
const tipContainerEnteringAnimation = React.useCallback(
(values/*: EntryAnimationsValues*/) => {
inkaAuthorUnsubmitted
Done
Inline Actions

In worklets we cannot use flow types

inka: In worklets we cannot use flow types
'worklet';
const initialX =
(-values.targetWidth +
initialCoordinates.width +
initialCoordinates.x) /
2;
const initialY = tipContainerTranslateY;
return {
animations: {
opacity: withTiming(1, { duration: animationDuration }),
transform: [
{ translateX: withTiming(0, { duration: animationDuration }) },
{ translateY: withTiming(0, { duration: animationDuration }) },
{ scale: withTiming(1, { duration: animationDuration }) },
],
},
initialValues: {
opacity: 0,
transform: [
{ translateX: initialX },
{ translateY: initialY },
{ scale: 0 },
],
},
};
},
[initialCoordinates.width, initialCoordinates.x],
);
// prettier-ignore
const tipContainerExitingAnimation = React.useCallback(
(values/*: ExitAnimationsValues*/) => {
'worklet';
const toValueX =
(-values.currentWidth +
initialCoordinates.width +
initialCoordinates.x) /
2;
const toValueY = tipContainerTranslateY;
return {
animations: {
opacity: withTiming(0, { duration: animationDuration }),
transform: [
{
translateX: withTiming(toValueX, {
duration: animationDuration,
}),
},
{
translateY: withTiming(toValueY, {
duration: animationDuration,
}),
},
{ scale: withTiming(0, { duration: animationDuration }) },
],
},
initialValues: {
opacity: 1,
transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
},
};
},
[initialCoordinates.width, initialCoordinates.x],
);
return ( return (
<TouchableWithoutFeedback onPress={goBackOnce}> <TouchableWithoutFeedback onPress={goBackOnce}>
<View style={styles.container}> <View style={styles.container}>
<AnimatedView <AnimatedView
style={styles.backdrop} style={styles.backdrop}
// $FlowFixMe // $FlowFixMe
entering={opacityEnteringAnimation} entering={opacityEnteringAnimation}
exiting={opacityExitingAnimation} exiting={opacityExitingAnimation}
/> />
<View style={contentContainerStyle}> <View style={contentContainerStyle}>
<View style={buttonStyle}> <Animated.View
style={buttonStyle}
exiting={FadeOut.duration(animationDuration)}
>
<ButtonComponent navigation={props.navigation} route={route} /> <ButtonComponent navigation={props.navigation} route={route} />
</View> </Animated.View>
</View> </View>
<AnimatedView <AnimatedView
style={tipContainerStyle} style={baseTipContainerStyle}
onLayout={onTipContainerLayout} onLayout={onTipContainerLayout}
entering={tipContainerEnteringAnimation}
exiting={tipContainerExitingAnimation}
> >
<View style={[styles.triangleUp, triangleStyle]} /> <View style={[styles.triangleUp, triangleStyle]} />
<View style={styles.items}> <View style={styles.items}>
<Text style={styles.tipText}>{tipText}</Text> <Text style={styles.tipText}>{tipText}</Text>
</View> </View>
</AnimatedView> </AnimatedView>
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
Show All 16 Lines
View Options

native/utils/hooks.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native'; import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';
import Animated, { withTiming } from 'react-native-reanimated'; import Animated, {
FadeOut,
withTiming,
// eslint-disable-next-line no-unused-vars
type EntryAnimationsValues,
// eslint-disable-next-line no-unused-vars
type ExitAnimationsValues,
inkaAuthorUnsubmitted
Done
Inline Actions

Those types are used in worklets. We have to import them for flow, but eslint doesn't understand that

inka: Those types are used in worklets. We have to import them for flow, but eslint doesn't…
tomekUnsubmitted
Not Done
Inline Actions

It seems like it can't be fixed on eslint level https://github.com/jsx-eslint/eslint-plugin-react/issues/1714. It needs to be fixed on babel level - I found an issue https://github.com/babel/babel/issues/15061 where someone is using flowComments plugin. Maybe we should give it a try. https://linear.app/comm/issue/ENG-9040/check-if-flowcomments-babel-plugin-allows-flow-comment-syntax

tomek: It seems like it can't be fixed on eslint level https://github.com/jsx-eslint/eslint-plugin…
} from 'react-native-reanimated';
import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { OverlayContext } from '../navigation/overlay-context.js'; import { OverlayContext } from '../navigation/overlay-context.js';
import type { NavigationRoute } from '../navigation/route-names.js'; import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js'; import { useStyles } from '../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
} from '../types/layout-types.js'; } from '../types/layout-types.js';
import type { LayoutEvent } from '../types/react-native.js'; import type { LayoutEvent } from '../types/react-native.js';
import { import { AnimatedView } from '../types/styles.js';
AnimatedView,
type WritableAnimatedStyleObj,
type ReanimatedTransform,
} from '../types/styles.js';
const { Value, Extrapolate, add, multiply, interpolateNode } = Animated; const { Value } = Animated;
const animationDuration = 150; const animationDuration = 150;
const unboundStyles = { const unboundStyles = {
backdrop: { backdrop: {
backgroundColor: 'black', backgroundColor: 'black',
bottom: 0, bottom: 0,
left: 0, left: 0,
Show All 39 Linesexport type NUXTipsOverlayParams = {
+verticalBounds: VerticalBounds, +verticalBounds: VerticalBounds,
}; };
export type NUXTipsOverlayProps = { export type NUXTipsOverlayProps = {
+navigation: AppNavigationProp<'NUXTipsOverlay'>, +navigation: AppNavigationProp<'NUXTipsOverlay'>,
+route: NavigationRoute<'NUXTipsOverlay'>, +route: NavigationRoute<'NUXTipsOverlay'>,
}; };
const tipHeight: number = 30;
const margin: number = 20; const margin: number = 20;
const tipContainerTranslateY = -80;
inkaAuthorUnsubmitted
Done
Inline Actions

I don't think this value can ba calculated in any way? I think I just have to use something that looks rigth?

inka: I don't think this value can ba calculated in any way? I think I just have to use something…
tomekUnsubmitted
Not Done
Inline Actions

Isn't it related to the height of the tooltip?

tomek: Isn't it related to the height of the tooltip?
inkaAuthorUnsubmitted
Done
Inline Actions

You are right, going to fix this in D13072 where I move this to the component

inka: You are right, going to fix this in D13072 where I move this to the component
function opacityEnteringAnimation() { function opacityEnteringAnimation() {
'worklet'; 'worklet';
return { return {
animations: { animations: {
opacity: withTiming(0.7, { duration: animationDuration }), opacity: withTiming(0.7, { duration: animationDuration }),
transform: [{}], transform: [{}],
Show All 9 Linesfunction createNUXTipsOverlay(
getTipText: () => string, getTipText: () => string,
): React.ComponentType<NUXTipsOverlayProps> { ): React.ComponentType<NUXTipsOverlayProps> {
function NUXTipsOverlay(props: NUXTipsOverlayProps) { function NUXTipsOverlay(props: NUXTipsOverlayProps) {
const dimensions = useSelector(state => state.dimensions); const dimensions = useSelector(state => state.dimensions);
const overlayContext = React.useContext(OverlayContext); const overlayContext = React.useContext(OverlayContext);
invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext'); invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
const { animationCallback } = overlayContext; const { animationCallback } = overlayContext;
const position = React.useMemo(() => new Animated.Value(1), []);
const { navigation, route } = props; const { navigation, route } = props;
const { goBackOnce } = navigation; const { goBackOnce } = navigation;
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const contentContainerStyle = React.useMemo(() => { const contentContainerStyle = React.useMemo(() => {
const { verticalBounds } = route.params; const { verticalBounds } = route.params;
Show All 37 Lines const onTipContainerLayout = React.useCallback(
} else { } else {
const minWidth = width + 2 * extraRightSpace; const minWidth = width + 2 * extraRightSpace;
tipHorizontalOffset.setValue((actualWidth - minWidth) / 2); tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);
} }
}, },
[dimensions.width, initialCoordinates, tipHorizontalOffset], [dimensions.width, initialCoordinates, tipHorizontalOffset],
); );
const tipContainerOpacity = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.1],
outputRange: [0, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);
const tipVerticalBelow = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 1],
outputRange: [-margin - tipHeight / 2, 0],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);
const tipHorizontal = React.useMemo(() => {
const invertedPosition = add(1, multiply(-1, position));
return multiply(invertedPosition, tipHorizontalOffset);
}, [position, tipHorizontalOffset]);
const tipScale = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.2, 0.8, 1],
outputRange: [0, 0, 1, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);
const baseTipContainerStyle = React.useMemo(() => { const baseTipContainerStyle = React.useMemo(() => {
const { y, x, height, width } = initialCoordinates; const { y, x, height, width } = initialCoordinates;
const top = const top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin; Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;
const extraLeftSpace = x; const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x; const extraRightSpace = dimensions.width - width - x;
Show All 16 Lines const baseTipContainerStyle = React.useMemo(() => {
} }
}, [ }, [
dimensions.width, dimensions.width,
initialCoordinates, initialCoordinates,
verticalBounds.height, verticalBounds.height,
verticalBounds.y, verticalBounds.y,
]); ]);
const tipContainerStyle = React.useMemo(() => {
const style: WritableAnimatedStyleObj = {};
style.opacity = tipContainerOpacity;
const transform: Array<ReanimatedTransform> = [];
transform.push({ translateX: tipHorizontal });
transform.push({ translateY: tipVerticalBelow });
transform.push({ scale: tipScale });
style.transform = transform;
return { ...baseTipContainerStyle, ...style };
}, [
baseTipContainerStyle,
tipContainerOpacity,
tipHorizontal,
tipScale,
tipVerticalBelow,
]);
const triangleStyle = React.useMemo(() => { const triangleStyle = React.useMemo(() => {
const { x, width } = initialCoordinates; const { x, width } = initialCoordinates;
const extraLeftSpace = x; const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x; const extraRightSpace = dimensions.width - width - x;
if (extraLeftSpace < extraRightSpace) { if (extraLeftSpace < extraRightSpace) {
return { return {
alignSelf: 'flex-start', alignSelf: 'flex-start',
left: extraLeftSpace + (width - 20) / 2, left: extraLeftSpace + (width - (20 / 100) * width) / 2,
}; };
} else { } else {
return { return {
alignSelf: 'flex-end', alignSelf: 'flex-end',
right: extraRightSpace + (width - 20) / 2, right: extraRightSpace + (width - (20 / 100) * width) / 2,
inkaAuthorUnsubmitted
Done
Inline Actions

For community drawer button which is rather small, the hardcoded 20 made it look awkward. I used 20% instead, but this may be changed later

inka: For community drawer button which is rather small, the hardcoded `20` made it look awkward. I…
tomekUnsubmitted
Not Done
Inline Actions

Please simplify these expressions

tomek: Please simplify these expressions
}; };
} }
}, [dimensions.width, initialCoordinates]); }, [dimensions.width, initialCoordinates]);
const tipText = getTipText(); const tipText = getTipText();
const opacityExitingAnimation = React.useCallback(() => { const opacityExitingAnimation = React.useCallback(() => {
'worklet'; 'worklet';
return { return {
animations: { animations: {
opacity: withTiming(0, { duration: animationDuration }), opacity: withTiming(0, { duration: animationDuration }),
}, },
initialValues: { initialValues: {
opacity: 0.7, opacity: 0.7,
}, },
callback: animationCallback, callback: animationCallback,
}; };
}, [animationCallback]); }, [animationCallback]);
// prettier-ignore
const tipContainerEnteringAnimation = React.useCallback(
(values/*: EntryAnimationsValues*/) => {
inkaAuthorUnsubmitted
Done
Inline Actions

In worklets we cannot use flow types

inka: In worklets we cannot use flow types
'worklet';
const initialX =
(-values.targetWidth +
initialCoordinates.width +
initialCoordinates.x) /
2;
const initialY = tipContainerTranslateY;
return {
animations: {
opacity: withTiming(1, { duration: animationDuration }),
transform: [
{ translateX: withTiming(0, { duration: animationDuration }) },
{ translateY: withTiming(0, { duration: animationDuration }) },
{ scale: withTiming(1, { duration: animationDuration }) },
],
},
initialValues: {
opacity: 0,
transform: [
{ translateX: initialX },
{ translateY: initialY },
{ scale: 0 },
],
},
};
},
[initialCoordinates.width, initialCoordinates.x],
);
// prettier-ignore
const tipContainerExitingAnimation = React.useCallback(
(values/*: ExitAnimationsValues*/) => {
'worklet';
const toValueX =
(-values.currentWidth +
initialCoordinates.width +
initialCoordinates.x) /
2;
const toValueY = tipContainerTranslateY;
return {
animations: {
opacity: withTiming(0, { duration: animationDuration }),
transform: [
{
translateX: withTiming(toValueX, {
duration: animationDuration,
}),
},
{
translateY: withTiming(toValueY, {
duration: animationDuration,
}),
},
{ scale: withTiming(0, { duration: animationDuration }) },
],
},
initialValues: {
opacity: 1,
transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
},
};
},
[initialCoordinates.width, initialCoordinates.x],
);
return ( return (
<TouchableWithoutFeedback onPress={goBackOnce}> <TouchableWithoutFeedback onPress={goBackOnce}>
<View style={styles.container}> <View style={styles.container}>
<AnimatedView <AnimatedView
style={styles.backdrop} style={styles.backdrop}
// $FlowFixMe // $FlowFixMe
entering={opacityEnteringAnimation} entering={opacityEnteringAnimation}
exiting={opacityExitingAnimation} exiting={opacityExitingAnimation}
/> />
<View style={contentContainerStyle}> <View style={contentContainerStyle}>
<View style={buttonStyle}> <Animated.View
style={buttonStyle}
exiting={FadeOut.duration(animationDuration)}
>
<ButtonComponent navigation={props.navigation} route={route} /> <ButtonComponent navigation={props.navigation} route={route} />
</View> </Animated.View>
</View> </View>
<AnimatedView <AnimatedView
style={tipContainerStyle} style={baseTipContainerStyle}
onLayout={onTipContainerLayout} onLayout={onTipContainerLayout}
entering={tipContainerEnteringAnimation}
exiting={tipContainerExitingAnimation}
> >
<View style={[styles.triangleUp, triangleStyle]} /> <View style={[styles.triangleUp, triangleStyle]} />
<View style={styles.items}> <View style={styles.items}>
<Text style={styles.tipText}>{tipText}</Text> <Text style={styles.tipText}>{tipText}</Text>
</View> </View>
</AnimatedView> </AnimatedView>
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
Show All 16 Lines