Paths

Table of Contentst

-
native/flow-typed/npm/
-
flow-typed/
-
npm/
2/5
react-native-reanimated_v2.x.x.js

[native] introduced flow type for reanimated layout animations
ClosedPublic
Actions

Authored by ginsu on Nov 8 2022, 8:22 AM.

Details

Reviewers

atul
ashoat

Commits

rCOMM032ab74877db: [native] introduced flow type for reanimated layout animations

Summary

To use Reanimated's new layout animations we need to add libdefs for the different animations. This diff just handles the SlideInDown and SlideOutDown layout animations along with all the necessary classes/types needed to support these layout animations. I will annotate inline with where the changes/types came from.

Linear Task: ENG-2165

Test Plan

All the testing for this diff came from its use in D5557. In that diff I was able to implement the layout actions using the appropriate type defs that I created in this diff, and I received no flow errors which I believe to be a good indicator that everything is correct.

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.Nov 8 2022, 8:22 AM

Herald added subscribers: • abosh, atul, tomek, ashoat. · View Herald TranscriptNov 8 2022, 8:22 AM

ginsu edited the summary of this revision. (Show Details)Nov 8 2022, 8:29 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, ashoat.

Harbormaster completed remote builds in B13269: Diff 18211.Nov 8 2022, 8:32 AM

ginsu requested review of this revision.Nov 8 2022, 8:32 AM

ginsu planned changes to this revision.Nov 8 2022, 8:34 AM

ginsu added inline comments.

native/flow-typed/npm/react-native-reanimated_v2.x.x.js
18–36 ↗	(On Diff #18211)	bottom-tabs_v6
146 ↗	(On Diff #18211)	reanimated easing

made LayoutAnimation type exact

Looks good to me, would love if @atul could take a look as well

need to fix prettier format change

resoved prettier problem

Harbormaster completed remote builds in B13273: Diff 18215.Nov 8 2022, 8:50 AM

Harbormaster completed remote builds in B13274: Diff 18216.Nov 8 2022, 8:54 AM

ginsu added inline comments.Nov 8 2022, 9:35 AM

native/flow-typed/npm/react-native-reanimated_v2.x.x.js
18–36	bottom-tabs_v6
146	reanimated easing
237–312	reanimated common types
314–336	reanimated BaseAnimationBuilder
342–382	reanimated ComplexAnimationBuilder
384–388	reanimated slideindown
390–394	reanimated slideoutdown

ginsu added a child revision: D5557: [native] changed tooltip animation to slide up/down on enter and exit.Nov 8 2022, 9:47 AM

Looks good to me

This revision is now accepted and ready to land.Nov 8 2022, 11:19 AM

Closed by commit rCOMM032ab74877db: [native] introduced flow type for reanimated layout animations (authored by ginsu). · Explain WhyNov 8 2022, 11:46 AM

This revision was automatically updated to reflect the committed changes.

ginsu added a commit: rCOMM032ab74877db: [native] introduced flow type for reanimated layout animations.

ashoat mentioned this in D13124: [native] Fix broken StyleProps type for react-native-reanimated libdef.Aug 20 2024, 9:58 AM

ashoat mentioned this in rCOMMfc35683c9ffa: [native] Fix broken StyleProps type for react-native-reanimated libdef.Aug 20 2024, 11:49 PM

Revision Contents
Changeset List

Path

Size

native/

flow-typed/

npm/

react-native-reanimated_v2.x.x.js

180 lines

Diff 18216

View Options

native/flow-typed/npm/react-native-reanimated_v2.x.x.js

This file was added.

				// @flow

				import invariant from 'invariant';
				import Alert from 'react-native/Libraries/Alert/Alert';

				import {
				sendReactionMessage,
				sendReactionMessageActionTypes,
				} from 'lib/actions/message-actions';
				import type { BindServerCall, DispatchFunctions } from 'lib/utils/action-utils';

				import type { TooltipRoute } from '../navigation/tooltip.react';

				function onPressReact(
				route:
				\| TooltipRoute<'TextMessageTooltipModal'>
				\| TooltipRoute<'MultimediaMessageTooltipModal'>,
				dispatchFunctions: DispatchFunctions,
				bindServerCall: BindServerCall,
				) {
				const messageID = route.params.item.messageInfo.id;
				const threadID = route.params.item.threadInfo.id;
				tomekUnsubmitted Not Done Inline Actions This approach seems to be overly complicated. Can't we just write a function that receives `messageID`, `threadID` and `reaction`? This function can be named after an action that is performed, so `react` or `sendReaction`. tomek: This approach seems to be overly complicated. Can't we just write a function that receives…

				invariant(messageID, 'messageID should be set');
				invariant(threadID, 'threadID should be set');

				const callSendReactionMessage = bindServerCall(sendReactionMessage);

				const reactionMessagePromise = (async () => {
				try {
				const result = await callSendReactionMessage(threadID, messageID, '👍');
				return {
				targetMessageID: messageID,
				serverID: result.id,
				threadID,
				time: result.newMessageInfo.time,
				interface: result.interface,
				newMessageInfos: [result.newMessageInfo],
				};
				} catch (e) {
				Alert.alert(
				tomekUnsubmitted Not Done Inline Actions It sounds risky to show one alert after every failed message. A user might react to a lot of messages in short period and a network issue could result in a lot of alerts being shown. Other apps sometimes choose to silently fail when a reaction fails. tomek: It sounds risky to show one alert after every failed message. A user might react to a lot of…
				ginsuAuthorUnsubmitted Done Inline Actions Totally see your concern here! I spoke to @atul about this today, and we both agreed that we want this to be a temporary solution, but since reaction messages don't have retry behavior we think it is best to show some sort of feedback to the user in case something failed. ginsu: Totally see your concern here! I spoke to @atul about this today, and we both agreed that we…
				'Couldn’t send the reaction',
				'Please try again later',
				[{ text: 'OK' }],
				{
				cancelable: false,
				tomekUnsubmitted Not Done Inline Actions Is there a reason to set cancelable to false? tomek: Is there a reason to set cancelable to false?
				ginsuAuthorUnsubmitted Done Inline Actions Alerts on Android can be dismissed by tapping outside of the alert box. It is disabled by default and can be enabled by providing an optional Options parameter with the cancelable property set to true. Here is more context I also found the alert on report-utils to follow the same patern ginsu: Alerts on Android can be dismissed by tapping outside of the alert box. It is disabled by…
				},
				);
				throw e;
				}
				})();

				dispatchFunctions.dispatchActionPromise(
				sendReactionMessageActionTypes,
				reactionMessagePromise,
				);
				}

				export { onPressReact };

[native] introduced flow type for reanimated layout animationsClosedPublicActions