[khushal87]

🎯 Goal

This PR introduces a message action customization feature which allows adding MessageActionList and MessageActionListItem. This allows full Message Action overlay modal customization or one of the message actions only.

🛠 Implementation details

This is done to provide customization to the users. I have introduced two new components props MessageActionList and MessageActionListItem. The first one allows a whole new implementation of the message action list and performs an action according to what the user defines. This provides full customizability. The second one allows customizing an individual Message Action list item let us say Edit message. Users can customize the UI of the item as well as define its own action of what the item would perform on click.

This PR also simplifies the Message.tsx and made it simpler by introducing two new hooks:

• useMessageActions.tsx - Takes in essential arguments and returns the MessageAction object.
• useMessageActionHandlers.ts - Takes the essential arguments and returns the MessageAction handlers for implementing the logic of the action.
  They provide the default objects and function of the message action and we can use it in the component and import the objects as well as functions. This will also be helpful to the users as they can use the default implementation of actions and use it for their own purpose if needed.

PS - Documentation will be added through a different PR as discussed with @vishalnarkhede

🎨 UI Changes

_ Add relevant screenshots_

iOS

Before	After
img	img

Android

Before	After
img	img

🧪 Testing

Explain how this change can be tested (or why it can't be tested)

[madsroskar]

Overall looks good, I think. Added a bunch of comments, though not all are a direct result of your new changes necessarily, so could be turned into issues/tickets or something if it doesn't make sense for the PR (though I personally don't think it's a bad thing to consider making the changes in the context of this PR)

Could you also add some documentation for this, and a guide to customize the MessageActionList/MessageActionListItem components? (I'm guessing you have this on your list already, but mentioning just in case :))

If you'd like, we could also pair code a bit regarding a bunch of my comments, and see what we figure out to make sense or not together, or something too. Just ping me if you do : )

This is gonna be a good change to the customizability of the MessageActionList and MessageActionListItems I think :D

[madsroskar]

Could the name of this one be made a bit more specific? The Component suffix doesn't tell me much about why we need this wrapper

[madsroskar]

Is it just to add the animation to the two specific action types?

[khushal87]

It is just a Component that we pass as a value to the MessageActionListItem prop in the SampleApp. I can't think of anything other than this thing. Suggestions are welcome 🙂

[madsroskar]

Suggested change

	const MessageActionListItemComponent = ({ actionType, ...rest }: MessageActionListItem) => {
	const { onTap } = useMessageActionAnimation({ action: rest.action });
	if (actionType === 'pinMessage') {
	return (
	<TapGestureHandler onHandlerStateChange={onTap}>
	<Animated.View>
	<Text>{actionType}</Text>
	</Animated.View>
	</TapGestureHandler>
	);
	} else if (actionType === 'muteUser') {
	return (
	<TapGestureHandler onHandlerStateChange={onTap}>
	<Animated.View>
	<Text>{actionType}</Text>
	</Animated.View>
	</TapGestureHandler>
	);
	} else {
	return <MessageActionListItem {...rest} />;
	}
	};
	const MessageActionListItemComponent = (props: MessageActionListItem) => {
	const { actionType } = props;
	const animatedActions = ['pinMessage', 'muteUser'];
	return animatedActions.includes(actionType) ?
	<AnimatedMessageActionListItem {...props}> : <MessageActionListItem {...props} />;
	};
	const AnimatedMessageActionListItem = (props: MessageActionListItem) => {
	const { action, actionType } = props;
	const { onTap } = useMessageActionAnimation({ action });
	return (
	<TapGestureHandler onHandlerStateChange={onTap}>
	<Animated.View>
	<Text>{actionType}</Text>
	</Animated.View>
	</TapGestureHandler>
	);
	}

Changed it around a bit to think it out, haven't tested this suggestion, but seems a bit more skimmable to me personally

[vishalnarkhede]

null can be removed from here as well I guess?

[vishalnarkhede]

LGTM. Just one small cleanup comment.