From e55b172bc196a7ac2d73222673b4b394fed25d16 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Mon, 19 Feb 2024 11:08:17 -0300
Subject: [PATCH] tests: message composer unit tests (#5556)

* jest.fn issue

* Working on tests

* Add quotes test

* Audio

* Mock search

* Fix some act errors from jest

---------

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>
---
 .../MessageComposer/MessageComposer.test.tsx  |   514 +-
 .../MessageComposer/MessageComposer.tsx       |     1 -
 .../MessageComposer.test.tsx.snap             | 10802 ++++++++++++++++
 jest.setup.js                                 |    53 +-
 package.json                                  |     5 +-
 yarn.lock                                     |    48 +-
 6 files changed, 11108 insertions(+), 315 deletions(-)
 create mode 100644 app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap

diff --git a/app/containers/MessageComposer/MessageComposer.test.tsx b/app/containers/MessageComposer/MessageComposer.test.tsx
index 7257fe012..f1326120c 100644
--- a/app/containers/MessageComposer/MessageComposer.test.tsx
+++ b/app/containers/MessageComposer/MessageComposer.test.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import { act, fireEvent, render, screen, userEvent } from '@testing-library/react-native';
 import { Provider } from 'react-redux';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
 
 import { MessageComposerContainer } from './MessageComposerContainer';
 import { setPermissions } from '../../actions/permissions';
@@ -27,7 +25,7 @@ const initialStoreState = () => {
 initialStoreState();
 
 const initialContext = {
-	rid: '',
+	rid: 'rid',
 	tmid: undefined,
 	sharing: false,
 	action: null,
@@ -38,33 +36,15 @@ const initialContext = {
 	onRemoveQuoteMessage: jest.fn()
 };
 
-const Stack = createStackNavigator();
-
-// const Navigation = ({ children }: { children: any }) => (
-// 	<NavigationContainer>
-// 		<Stack.Navigator>
-// 			<Stack.Screen name='A' component={children} />
-// 		</Stack.Navigator>
-// 	</NavigationContainer>
-// );
-
-// const Content = () => (
-// 		<MessageComposerContainer />
-// )
-
 const Render = ({ context }: { context?: Partial<IRoomContext> }) => (
 	<Provider store={mockedStore}>
 		<RoomContext.Provider value={{ ...initialContext, ...context }}>
-			<NavigationContainer>
-				<Stack.Navigator>
-					<Stack.Screen name='MessageComposer' component={MessageComposerContainer} />
-				</Stack.Navigator>
-			</NavigationContainer>
+			<MessageComposerContainer />
 		</RoomContext.Provider>
 	</Provider>
 );
 
-describe.skip('MessageComposer', () => {
+describe('MessageComposer', () => {
 	test('renders correctly', () => {
 		render(<Render />);
 		expect(screen.getByTestId('message-composer-input')).toBeOnTheScreen();
@@ -76,14 +56,14 @@ describe.skip('MessageComposer', () => {
 	test('renders correctly with audio recorder disabled', () => {
 		mockedStore.dispatch(addSettings({ Message_AudioRecorderEnabled: false }));
 		render(<Render />);
-		expect(screen.queryByTestId('message-composer-send-audio')).toBeNull();
+		expect(screen.queryByTestId('message-composer-send-audio')).not.toBeOnTheScreen();
 		expect(screen.toJSON()).toMatchSnapshot();
 	});
 
 	test('renders correctly without audio upload permissions', () => {
 		mockedStore.dispatch(setPermissions({}));
 		render(<Render />);
-		expect(screen.queryByTestId('message-composer-send-audio')).toBeNull();
+		expect(screen.queryByTestId('message-composer-send-audio')).not.toBeOnTheScreen();
 		expect(screen.toJSON()).toMatchSnapshot();
 	});
 
@@ -91,7 +71,7 @@ describe.skip('MessageComposer', () => {
 		mockedStore.dispatch(addSettings({ Message_AudioRecorderEnabled: false }));
 		mockedStore.dispatch(setPermissions({}));
 		render(<Render />);
-		expect(screen.queryByTestId('message-composer-send-audio')).toBeNull();
+		expect(screen.queryByTestId('message-composer-send-audio')).not.toBeOnTheScreen();
 		expect(screen.toJSON()).toMatchSnapshot();
 	});
 
@@ -100,9 +80,9 @@ describe.skip('MessageComposer', () => {
 		render(<Render />);
 		expect(screen.getByTestId('message-composer-actions')).toBeOnTheScreen();
 		expect(screen.getByTestId('message-composer-send-audio')).toBeOnTheScreen();
-		expect(screen.queryByTestId('message-composer-open-emoji')).toBeNull();
-		expect(screen.queryByTestId('message-composer-open-markdown')).toBeNull();
-		expect(screen.queryByTestId('message-composer-mention')).toBeNull();
+		expect(screen.queryByTestId('message-composer-open-emoji')).not.toBeOnTheScreen();
+		expect(screen.queryByTestId('message-composer-open-markdown')).not.toBeOnTheScreen();
+		expect(screen.queryByTestId('message-composer-mention')).not.toBeOnTheScreen();
 
 		await act(async () => {
 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
@@ -116,238 +96,247 @@ describe.skip('MessageComposer', () => {
 	});
 
 	test('send message', async () => {
+		const user = userEvent.setup();
 		const onSendMessage = jest.fn();
 		render(<Render context={{ onSendMessage }} />);
 		expect(screen.getByTestId('message-composer-send-audio')).toBeOnTheScreen();
+
+		await user.type(screen.getByTestId('message-composer-input'), 'test');
+		expect(screen.queryByTestId('message-composer-send-audio')).not.toBeOnTheScreen();
+		expect(screen.getByTestId('message-composer-send')).toBeOnTheScreen();
+
 		await act(async () => {
-			await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
-			expect(screen.queryByTestId('message-composer-send-audio')).toBeNull();
-			expect(screen.getByTestId('message-composer-send')).toBeOnTheScreen();
 			await fireEvent.press(screen.getByTestId('message-composer-send'));
 		});
+
 		expect(onSendMessage).toHaveBeenCalledTimes(1);
 		expect(onSendMessage).toHaveBeenCalledWith('test', undefined);
 		expect(screen.toJSON()).toMatchSnapshot();
 	});
 
-	test('tap actions from toolbar', async () => {
-		render(<Render />);
+	describe('Toolbar', () => {
+		test('tap actions', async () => {
+			render(<Render />);
 
-		await act(async () => {
-			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-			await fireEvent.press(screen.getByTestId('message-composer-actions'));
+			await act(async () => {
+				await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+				await fireEvent.press(screen.getByTestId('message-composer-actions'));
+			});
+			expect(screen.toJSON()).toMatchSnapshot();
 		});
-		expect(screen.toJSON()).toMatchSnapshot();
-	});
 
-	test('tap emoji', async () => {
-		render(<Render />);
+		test('tap emoji', async () => {
+			render(<Render />);
 
-		await act(async () => {
-			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-			await fireEvent.press(screen.getByTestId('message-composer-open-emoji'));
+			await act(async () => {
+				await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+				await fireEvent.press(screen.getByTestId('message-composer-open-emoji'));
+			});
+			expect(screen.getByTestId('message-composer-close-emoji')).toBeOnTheScreen();
+			expect(screen.toJSON()).toMatchSnapshot();
 		});
-		expect(screen.getByTestId('message-composer-close-emoji')).toBeOnTheScreen();
-		expect(screen.toJSON()).toMatchSnapshot();
-	});
 
-	// describe('Markdown', () => {
-	// 	test('tap markdown', async () => {
-	// 		render(<Render />);
+		describe('Markdown', () => {
+			test('tap markdown', async () => {
+				render(<Render />);
 
-	// 		await act(async () => {
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 		});
-	// 		expect(screen.getByTestId('message-composer-close-markdown')).toBeOnTheScreen();
-	// 		expect(screen.getByTestId('message-composer-bold')).toBeOnTheScreen();
-	// 		expect(screen.getByTestId('message-composer-italic')).toBeOnTheScreen();
-	// 		expect(screen.getByTestId('message-composer-strike')).toBeOnTheScreen();
-	// 		expect(screen.getByTestId('message-composer-code')).toBeOnTheScreen();
-	// 		expect(screen.getByTestId('message-composer-code-block')).toBeOnTheScreen();
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
+				await act(async () => {
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+				});
+				expect(screen.getByTestId('message-composer-close-markdown')).toBeOnTheScreen();
+				expect(screen.getByTestId('message-composer-bold')).toBeOnTheScreen();
+				expect(screen.getByTestId('message-composer-italic')).toBeOnTheScreen();
+				expect(screen.getByTestId('message-composer-strike')).toBeOnTheScreen();
+				expect(screen.getByTestId('message-composer-code')).toBeOnTheScreen();
+				expect(screen.getByTestId('message-composer-code-block')).toBeOnTheScreen();
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 
-	// 	test('tap bold', async () => {
-	// 		const onSendMessage = jest.fn();
-	// 		render(<Render context={{ onSendMessage }} />);
+			test('tap bold', async () => {
+				const onSendMessage = jest.fn();
+				render(<Render context={{ onSendMessage }} />);
 
-	// 		await act(async () => {
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			// await waitFor(() => fireEvent.press(screen.getByTestId('message-composer-open-markdown')), { timeout: 1000 });
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-bold'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-send'));
-	// 		});
-	// 		expect(onSendMessage).toHaveBeenCalledTimes(1);
-	// 		expect(onSendMessage).toHaveBeenCalledWith('**', undefined);
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
+				await act(async () => {
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+					await fireEvent.press(screen.getByTestId('message-composer-bold'));
+					await fireEvent.press(screen.getByTestId('message-composer-send'));
+				});
+				expect(onSendMessage).toHaveBeenCalledTimes(1);
+				expect(onSendMessage).toHaveBeenCalledWith('**', undefined);
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 
-	// 	test('type test and tap bold', async () => {
-	// 		const onSendMessage = jest.fn();
-	// 		render(<Render context={{ onSendMessage }} />);
+			test('type test and tap bold', async () => {
+				const onSendMessage = jest.fn();
+				render(<Render context={{ onSendMessage }} />);
 
-	// 		await act(async () => {
-	// 			await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'selectionChange', {
-	// 				nativeEvent: { selection: { start: 0, end: 4 } }
-	// 			});
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-bold'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-send'));
-	// 		});
-	// 		expect(onSendMessage).toHaveBeenCalledTimes(1);
-	// 		expect(onSendMessage).toHaveBeenCalledWith('*test*', undefined);
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
+				await act(async () => {
+					await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent(screen.getByTestId('message-composer-input'), 'selectionChange', {
+						nativeEvent: { selection: { start: 0, end: 4 } }
+					});
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+					await fireEvent.press(screen.getByTestId('message-composer-bold'));
+					await fireEvent.press(screen.getByTestId('message-composer-send'));
+				});
+				expect(onSendMessage).toHaveBeenCalledTimes(1);
+				expect(onSendMessage).toHaveBeenCalledWith('*test*', undefined);
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 
-	// 	test('tap italic', async () => {
-	// 		const onSendMessage = jest.fn();
-	// 		render(<Render context={{ onSendMessage }} />);
+			test('tap italic', async () => {
+				const onSendMessage = jest.fn();
+				render(<Render context={{ onSendMessage }} />);
 
-	// 		await act(async () => {
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-italic'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-send'));
-	// 		});
-	// 		expect(onSendMessage).toHaveBeenCalledTimes(1);
-	// 		expect(onSendMessage).toHaveBeenCalledWith('__', undefined);
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
+				await act(async () => {
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+					await fireEvent.press(screen.getByTestId('message-composer-italic'));
+					await fireEvent.press(screen.getByTestId('message-composer-send'));
+				});
+				expect(onSendMessage).toHaveBeenCalledTimes(1);
+				expect(onSendMessage).toHaveBeenCalledWith('__', undefined);
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 
-	// 	test('type test and tap italic', async () => {
-	// 		const onSendMessage = jest.fn();
-	// 		render(<Render context={{ onSendMessage }} />);
+			test('type test and tap italic', async () => {
+				const onSendMessage = jest.fn();
+				render(<Render context={{ onSendMessage }} />);
 
-	// 		await act(async () => {
-	// 			await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'selectionChange', {
-	// 				nativeEvent: { selection: { start: 0, end: 4 } }
-	// 			});
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-italic'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-send'));
-	// 		});
-	// 		expect(onSendMessage).toHaveBeenCalledTimes(1);
-	// 		expect(onSendMessage).toHaveBeenCalledWith('_test_', undefined);
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
+				await act(async () => {
+					await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent(screen.getByTestId('message-composer-input'), 'selectionChange', {
+						nativeEvent: { selection: { start: 0, end: 4 } }
+					});
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+					await fireEvent.press(screen.getByTestId('message-composer-italic'));
+					await fireEvent.press(screen.getByTestId('message-composer-send'));
+				});
+				expect(onSendMessage).toHaveBeenCalledTimes(1);
+				expect(onSendMessage).toHaveBeenCalledWith('_test_', undefined);
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 
-	// 	test('tap strike', async () => {
-	// 		const onSendMessage = jest.fn();
-	// 		render(<Render context={{ onSendMessage }} />);
+			test('tap strike', async () => {
+				const onSendMessage = jest.fn();
+				render(<Render context={{ onSendMessage }} />);
 
-	// 		await act(async () => {
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-strike'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-send'));
-	// 		});
-	// 		expect(onSendMessage).toHaveBeenCalledTimes(1);
-	// 		expect(onSendMessage).toHaveBeenCalledWith('~~', undefined);
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
+				await act(async () => {
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+					await fireEvent.press(screen.getByTestId('message-composer-strike'));
+					await fireEvent.press(screen.getByTestId('message-composer-send'));
+				});
+				expect(onSendMessage).toHaveBeenCalledTimes(1);
+				expect(onSendMessage).toHaveBeenCalledWith('~~', undefined);
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 
-	// 	test('type test and tap strike', async () => {
-	// 		const onSendMessage = jest.fn();
-	// 		render(<Render context={{ onSendMessage }} />);
+			test('type test and tap strike', async () => {
+				const onSendMessage = jest.fn();
+				render(<Render context={{ onSendMessage }} />);
 
-	// 		await act(async () => {
-	// 			await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'selectionChange', {
-	// 				nativeEvent: { selection: { start: 0, end: 4 } }
-	// 			});
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-strike'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-send'));
-	// 		});
-	// 		expect(onSendMessage).toHaveBeenCalledTimes(1);
-	// 		expect(onSendMessage).toHaveBeenCalledWith('~test~', undefined);
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
+				await act(async () => {
+					await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent(screen.getByTestId('message-composer-input'), 'selectionChange', {
+						nativeEvent: { selection: { start: 0, end: 4 } }
+					});
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+					await fireEvent.press(screen.getByTestId('message-composer-strike'));
+					await fireEvent.press(screen.getByTestId('message-composer-send'));
+				});
+				expect(onSendMessage).toHaveBeenCalledTimes(1);
+				expect(onSendMessage).toHaveBeenCalledWith('~test~', undefined);
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 
-	// 	test('tap code', async () => {
-	// 		const onSendMessage = jest.fn();
-	// 		render(<Render context={{ onSendMessage }} />);
+			test('tap code', async () => {
+				const onSendMessage = jest.fn();
+				render(<Render context={{ onSendMessage }} />);
 
-	// 		await act(async () => {
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-code'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-send'));
-	// 		});
-	// 		expect(onSendMessage).toHaveBeenCalledTimes(1);
-	// 		expect(onSendMessage).toHaveBeenCalledWith('``', undefined);
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
+				await act(async () => {
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+					await fireEvent.press(screen.getByTestId('message-composer-code'));
+					await fireEvent.press(screen.getByTestId('message-composer-send'));
+				});
+				expect(onSendMessage).toHaveBeenCalledTimes(1);
+				expect(onSendMessage).toHaveBeenCalledWith('``', undefined);
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 
-	// 	test('type test and tap code', async () => {
-	// 		const onSendMessage = jest.fn();
-	// 		render(<Render context={{ onSendMessage }} />);
+			test('type test and tap code', async () => {
+				const onSendMessage = jest.fn();
+				render(<Render context={{ onSendMessage }} />);
 
-	// 		await act(async () => {
-	// 			await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'selectionChange', {
-	// 				nativeEvent: { selection: { start: 0, end: 4 } }
-	// 			});
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-code'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-send'));
-	// 		});
-	// 		expect(onSendMessage).toHaveBeenCalledTimes(1);
-	// 		expect(onSendMessage).toHaveBeenCalledWith('`test`', undefined);
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
+				await act(async () => {
+					await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent(screen.getByTestId('message-composer-input'), 'selectionChange', {
+						nativeEvent: { selection: { start: 0, end: 4 } }
+					});
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+					await fireEvent.press(screen.getByTestId('message-composer-code'));
+					await fireEvent.press(screen.getByTestId('message-composer-send'));
+				});
+				expect(onSendMessage).toHaveBeenCalledTimes(1);
+				expect(onSendMessage).toHaveBeenCalledWith('`test`', undefined);
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 
-	// 	test('tap code-block', async () => {
-	// 		const onSendMessage = jest.fn();
-	// 		render(<Render context={{ onSendMessage }} />);
+			test('tap code-block', async () => {
+				const onSendMessage = jest.fn();
+				render(<Render context={{ onSendMessage }} />);
 
-	// 		await act(async () => {
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-code-block'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-send'));
-	// 		});
-	// 		expect(onSendMessage).toHaveBeenCalledTimes(1);
-	// 		expect(onSendMessage).toHaveBeenCalledWith('``````', undefined);
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
+				await act(async () => {
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+					await fireEvent.press(screen.getByTestId('message-composer-code-block'));
+					await fireEvent.press(screen.getByTestId('message-composer-send'));
+				});
+				expect(onSendMessage).toHaveBeenCalledTimes(1);
+				expect(onSendMessage).toHaveBeenCalledWith('``````', undefined);
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 
-	// 	test('type test and tap code-block', async () => {
-	// 		const onSendMessage = jest.fn();
-	// 		render(<Render context={{ onSendMessage }} />);
+			test('type test and tap code-block', async () => {
+				const onSendMessage = jest.fn();
+				render(<Render context={{ onSendMessage }} />);
 
-	// 		await act(async () => {
-	// 			await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-	// 			await fireEvent(screen.getByTestId('message-composer-input'), 'selectionChange', {
-	// 				nativeEvent: { selection: { start: 0, end: 4 } }
-	// 			});
-	// 			await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-code-block'));
-	// 			await fireEvent.press(screen.getByTestId('message-composer-send'));
-	// 		});
-	// 		expect(onSendMessage).toHaveBeenCalledTimes(1);
-	// 		expect(onSendMessage).toHaveBeenCalledWith('```test```', undefined);
-	// 		expect(screen.toJSON()).toMatchSnapshot();
-	// 	});
-	// });
-
-	test('tap mention', async () => {
-		render(<Render />);
-
-		await act(async () => {
-			await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
-			// await fireEvent.press(screen.getByTestId('message-composer-mention'));
+				await act(async () => {
+					await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'test');
+					await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+					await fireEvent(screen.getByTestId('message-composer-input'), 'selectionChange', {
+						nativeEvent: { selection: { start: 0, end: 4 } }
+					});
+					await fireEvent.press(screen.getByTestId('message-composer-open-markdown'));
+					await fireEvent.press(screen.getByTestId('message-composer-code-block'));
+					await fireEvent.press(screen.getByTestId('message-composer-send'));
+				});
+				expect(onSendMessage).toHaveBeenCalledTimes(1);
+				expect(onSendMessage).toHaveBeenCalledWith('```test```', undefined);
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
+		});
+
+		test('tap mention', async () => {
+			const onSendMessage = jest.fn();
+			render(<Render context={{ onSendMessage }} />);
+
+			await act(async () => {
+				await fireEvent(screen.getByTestId('message-composer-input'), 'focus');
+				await fireEvent.press(screen.getByTestId('message-composer-mention'));
+				await fireEvent.press(screen.getByTestId('message-composer-send'));
+			});
+			expect(onSendMessage).toHaveBeenCalledTimes(1);
+			expect(onSendMessage).toHaveBeenCalledWith('@', undefined);
+			expect(screen.toJSON()).toMatchSnapshot();
 		});
-		expect(screen.toJSON()).toMatchSnapshot();
 	});
 
 	describe('edit message', () => {
@@ -362,19 +351,26 @@ describe.skip('MessageComposer', () => {
 			await screen.findByTestId('message-composer');
 			expect(screen.getByTestId('message-composer')).toHaveStyle({ backgroundColor: colors.light.statusBackgroundWarning2 });
 			expect(screen.getByTestId('message-composer-actions')).toBeOnTheScreen();
-			expect(screen.queryByTestId('message-composer-send-audio')).toBeNull();
+			expect(screen.queryByTestId('message-composer-send-audio')).not.toBeOnTheScreen();
 			expect(screen.getByTestId('message-composer-cancel-edit')).toBeOnTheScreen();
 		});
 		test('cancel', async () => {
 			await screen.findByTestId('message-composer');
 			expect(screen.getByTestId('message-composer')).toHaveStyle({ backgroundColor: colors.light.statusBackgroundWarning2 });
-			fireEvent.press(screen.getByTestId('message-composer-cancel-edit'));
+			await act(async () => {
+				await fireEvent.press(screen.getByTestId('message-composer-cancel-edit'));
+			});
 			expect(editCancel).toHaveBeenCalledTimes(1);
+			expect(screen.getByTestId('message-composer-actions')).toBeOnTheScreen();
+			expect(screen.queryByTestId('message-composer-send-audio')).not.toBeOnTheScreen();
+			expect(screen.getByTestId('message-composer-cancel-edit')).toBeOnTheScreen();
 		});
 		test('send', async () => {
 			await screen.findByTestId('message-composer');
 			expect(screen.getByTestId('message-composer')).toHaveStyle({ backgroundColor: colors.light.statusBackgroundWarning2 });
-			fireEvent.press(screen.getByTestId('message-composer-send'));
+			await act(async () => {
+				await fireEvent.press(screen.getByTestId('message-composer-send'));
+			});
 			expect(editRequest).toHaveBeenCalledTimes(1);
 			expect(editRequest).toHaveBeenCalledWith({ id, msg: `Message ${id}`, rid: 'rid' });
 		});
@@ -404,34 +400,46 @@ describe.skip('MessageComposer', () => {
 	}));
 
 	describe('Quote', () => {
-		test('Adding/removing quotes', () => {
-			const onRemoveQuoteMessage = jest.fn();
-
-			// Render without quotes
-			const { rerender } = render(<Render context={{ selectedMessages: [], onRemoveQuoteMessage }} />);
-			expect(screen.queryByTestId('composer-quote-abc')).toBeNull();
-			expect(screen.queryByTestId('composer-quote-def')).toBeNull();
-			expect(screen.toJSON()).toMatchSnapshot();
-
-			// Add a quote
-			rerender(<Render context={{ action: 'quote', selectedMessages: ['abc'], onRemoveQuoteMessage }} />);
-			expect(screen.getByTestId('composer-quote-abc')).toBeOnTheScreen();
-			expect(screen.queryByTestId('composer-quote-def')).toBeNull();
-			expect(screen.toJSON()).toMatchSnapshot();
-
-			// Add another quote
-			rerender(<Render context={{ action: 'quote', selectedMessages: ['abc', 'def'], onRemoveQuoteMessage }} />);
-			expect(screen.getByTestId('composer-quote-abc')).toBeOnTheScreen();
-			expect(screen.getByTestId('composer-quote-def')).toBeOnTheScreen();
-			expect(screen.toJSON()).toMatchSnapshot();
-
-			// Remove a quote
-			fireEvent.press(screen.getByTestId('composer-quote-remove-def'));
-			expect(onRemoveQuoteMessage).toHaveBeenCalledTimes(1);
-			expect(onRemoveQuoteMessage).toHaveBeenCalledWith('def');
+		test('Add quote `abc`', async () => {
+			render(<Render context={{ action: 'quote', selectedMessages: ['abc'] }} />);
+			await act(async () => {
+				await screen.findByTestId('composer-quote-abc');
+				expect(screen.queryByTestId('composer-quote-abc')).toBeOnTheScreen();
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
 		});
 
-		// TODO: need to create proper mocks for getMessageById and getPermalinkMessage
-		// test('Send message with a quote', async () => {});
+		test('Add quote `def`', async () => {
+			render(<Render context={{ action: 'quote', selectedMessages: ['abc', 'def'] }} />);
+			await act(async () => {
+				await screen.findByTestId('composer-quote-abc');
+				expect(screen.queryByTestId('composer-quote-abc')).toBeOnTheScreen();
+				expect(screen.queryByTestId('composer-quote-def')).toBeOnTheScreen();
+				expect(screen.toJSON()).toMatchSnapshot();
+			});
+		});
+
+		test('Remove a quote', async () => {
+			const onRemoveQuoteMessage = jest.fn();
+			render(<Render context={{ action: 'quote', selectedMessages: ['abc', 'def'], onRemoveQuoteMessage }} />);
+			await act(async () => {
+				await screen.findByTestId('composer-quote-def');
+				await fireEvent.press(screen.getByTestId('composer-quote-remove-def'));
+			});
+			expect(onRemoveQuoteMessage).toHaveBeenCalledTimes(1);
+			expect(onRemoveQuoteMessage).toHaveBeenCalledWith('def');
+			expect(screen.toJSON()).toMatchSnapshot();
+		});
+	});
+
+	describe('Audio', () => {
+		test('tap record', async () => {
+			render(<Render />);
+			expect(screen.getByTestId('message-composer-send-audio')).toBeOnTheScreen();
+			await act(async () => {
+				await fireEvent.press(screen.getByTestId('message-composer-send-audio'));
+			});
+			expect(screen.toJSON()).toMatchSnapshot();
+		});
 	});
 });
diff --git a/app/containers/MessageComposer/MessageComposer.tsx b/app/containers/MessageComposer/MessageComposer.tsx
index 00337588b..5e8c9429e 100644
--- a/app/containers/MessageComposer/MessageComposer.tsx
+++ b/app/containers/MessageComposer/MessageComposer.tsx
@@ -200,7 +200,6 @@ export const MessageComposer = ({
 	const backgroundColor = action === 'edit' ? colors.statusBackgroundWarning2 : colors.surfaceLight;
 
 	const renderContent = () => {
-		console.count('[MessageComposer] renderContent');
 		if (recordingAudio) {
 			return <RecordAudio />;
 		}
diff --git a/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap b/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap
new file mode 100644
index 000000000..6633a23c7
--- /dev/null
+++ b/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap
@@ -0,0 +1,10802 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageComposer Audio tap record 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#FFFFFF",
+        "borderTopColor": "#CBCED1",
+        "borderTopWidth": 1,
+        "paddingBottom": 8,
+        "paddingHorizontal": 16,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "paddingVertical": 24,
+        }
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          Array [
+            Object {
+              "color": "#D40C26",
+              "fontSize": 24,
+            },
+            Array [
+              Object {
+                "lineHeight": 24,
+              },
+              undefined,
+            ],
+            Object {
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
+          ]
+        }
+      >
+        
+      </Text>
+      <Text
+        style={
+          Object {
+            "backgroundColor": "transparent",
+            "color": "#2F343D",
+            "fontFamily": "Inter",
+            "fontSize": 16,
+            "fontVariant": Array [
+              "tabular-nums",
+            ],
+            "fontWeight": "400",
+            "marginLeft": 12,
+            "textAlign": "left",
+          }
+        }
+      >
+        00:00
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "center",
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={213}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-delete-audio"
+      >
+        <View
+          accessibilityLabel="Cancel"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flex": 1,
+            "justifyContent": "center",
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "backgroundColor": "transparent",
+              "color": "#6C727A",
+              "fontFamily": "Inter",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "textAlign": "left",
+            }
+          }
+        >
+          Recording audio message
+        </Text>
+      </View>
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={214}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#156FF5",
+            "borderRadius": 16,
+            "height": 32,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 32,
+          }
+        }
+      >
+        <View
+          accessibilityLabel="Cancel_recording"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#FFFFFF",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 48,
+            "justifyContent": "center",
+            "paddingRight": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={200}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-actions"
+        >
+          <View
+            accessibilityLabel="Message actions"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "height": 48,
+            "paddingLeft": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={201}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-send-audio"
+        >
+          <View
+            accessibilityLabel="Send audio message"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+    </View>
+    <RCTScrollView
+      data={
+        Array [
+          "abc",
+        ]
+      }
+      getItem={[Function]}
+      getItemCount={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={50}
+      stickyHeaderIndices={Array []}
+      viewabilityConfigCallbackPairs={Array []}
+    >
+      <View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "backgroundColor": "#F7F8FA",
+                "borderBottomRightRadius": 4,
+                "borderColor": "#EBECEF",
+                "borderLeftColor": "#9EA2A8",
+                "borderTopRightRadius": 4,
+                "borderWidth": 1,
+                "height": 64,
+                "marginRight": 8,
+                "padding": 8,
+                "paddingLeft": 16,
+                "width": 320,
+              }
+            }
+            testID="composer-quote-abc"
+          >
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "backgroundColor": "transparent",
+                      "color": "#1F2329",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "700",
+                      "lineHeight": 20,
+                      "paddingRight": 4,
+                      "textAlign": "left",
+                    }
+                  }
+                >
+                  
+                </Text>
+                <Text
+                  style={
+                    Object {
+                      "backgroundColor": "transparent",
+                      "color": "#9EA2A8",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "400",
+                      "lineHeight": 16,
+                      "textAlign": "left",
+                    }
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <RNGestureHandlerButton
+                activeOpacity={0.3}
+                borderless={true}
+                collapsable={false}
+                handlerTag={202}
+                handlerType="NativeViewGestureHandler"
+                hitSlop={
+                  Object {
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
+                  }
+                }
+                onActiveStateChange={[Function]}
+                onGestureEvent={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onHandlerStateChange={[Function]}
+                onPress={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "height": 24,
+                    "justifyContent": "center",
+                    "opacity": 1,
+                    "width": 24,
+                  }
+                }
+                testID="composer-quote-remove-abc"
+              >
+                <View
+                  accessibilityLabel="Remove quote message"
+                  accessibilityRole="button"
+                  accessible={true}
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        Object {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+              </RNGestureHandlerButton>
+            </View>
+            <Text
+              accessibilityLabel="Message abc"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "fontFamily": "Inter",
+                    "fontSize": 16,
+                    "fontWeight": "400",
+                    "textAlign": "left",
+                  },
+                  Object {
+                    "color": "#2f343d",
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                    "color": "#2F343D",
+                    "fontFamily": "Inter",
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "lineHeight": 20,
+                    "textAlign": "left",
+                  },
+                ]
+              }
+              testID="markdown-preview-Message abc"
+            >
+              Message abc
+            </Text>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Quote Add quote \`def\` 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 48,
+            "justifyContent": "center",
+            "paddingRight": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={203}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-actions"
+        >
+          <View
+            accessibilityLabel="Message actions"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "height": 48,
+            "paddingLeft": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={204}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-send-audio"
+        >
+          <View
+            accessibilityLabel="Send audio message"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+    </View>
+    <RCTScrollView
+      data={
+        Array [
+          "abc",
+          "def",
+        ]
+      }
+      getItem={[Function]}
+      getItemCount={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={50}
+      stickyHeaderIndices={Array []}
+      viewabilityConfigCallbackPairs={Array []}
+    >
+      <View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "backgroundColor": "#F7F8FA",
+                "borderBottomRightRadius": 4,
+                "borderColor": "#EBECEF",
+                "borderLeftColor": "#9EA2A8",
+                "borderTopRightRadius": 4,
+                "borderWidth": 1,
+                "height": 64,
+                "marginRight": 8,
+                "padding": 8,
+                "paddingLeft": 16,
+                "width": 320,
+              }
+            }
+            testID="composer-quote-abc"
+          >
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "backgroundColor": "transparent",
+                      "color": "#1F2329",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "700",
+                      "lineHeight": 20,
+                      "paddingRight": 4,
+                      "textAlign": "left",
+                    }
+                  }
+                >
+                  
+                </Text>
+                <Text
+                  style={
+                    Object {
+                      "backgroundColor": "transparent",
+                      "color": "#9EA2A8",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "400",
+                      "lineHeight": 16,
+                      "textAlign": "left",
+                    }
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <RNGestureHandlerButton
+                activeOpacity={0.3}
+                borderless={true}
+                collapsable={false}
+                handlerTag={205}
+                handlerType="NativeViewGestureHandler"
+                hitSlop={
+                  Object {
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
+                  }
+                }
+                onActiveStateChange={[Function]}
+                onGestureEvent={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onHandlerStateChange={[Function]}
+                onPress={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "height": 24,
+                    "justifyContent": "center",
+                    "opacity": 1,
+                    "width": 24,
+                  }
+                }
+                testID="composer-quote-remove-abc"
+              >
+                <View
+                  accessibilityLabel="Remove quote message"
+                  accessibilityRole="button"
+                  accessible={true}
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        Object {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+              </RNGestureHandlerButton>
+            </View>
+            <Text
+              accessibilityLabel="Message abc"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "fontFamily": "Inter",
+                    "fontSize": 16,
+                    "fontWeight": "400",
+                    "textAlign": "left",
+                  },
+                  Object {
+                    "color": "#2f343d",
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                    "color": "#2F343D",
+                    "fontFamily": "Inter",
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "lineHeight": 20,
+                    "textAlign": "left",
+                  },
+                ]
+              }
+              testID="markdown-preview-Message abc"
+            >
+              Message abc
+            </Text>
+          </View>
+        </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "backgroundColor": "#F7F8FA",
+                "borderBottomRightRadius": 4,
+                "borderColor": "#EBECEF",
+                "borderLeftColor": "#9EA2A8",
+                "borderTopRightRadius": 4,
+                "borderWidth": 1,
+                "height": 64,
+                "marginRight": 8,
+                "padding": 8,
+                "paddingLeft": 16,
+                "width": 320,
+              }
+            }
+            testID="composer-quote-def"
+          >
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "backgroundColor": "transparent",
+                      "color": "#1F2329",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "700",
+                      "lineHeight": 20,
+                      "paddingRight": 4,
+                      "textAlign": "left",
+                    }
+                  }
+                >
+                  
+                </Text>
+                <Text
+                  style={
+                    Object {
+                      "backgroundColor": "transparent",
+                      "color": "#9EA2A8",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "400",
+                      "lineHeight": 16,
+                      "textAlign": "left",
+                    }
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <RNGestureHandlerButton
+                activeOpacity={0.3}
+                borderless={true}
+                collapsable={false}
+                handlerTag={206}
+                handlerType="NativeViewGestureHandler"
+                hitSlop={
+                  Object {
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
+                  }
+                }
+                onActiveStateChange={[Function]}
+                onGestureEvent={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onHandlerStateChange={[Function]}
+                onPress={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "height": 24,
+                    "justifyContent": "center",
+                    "opacity": 1,
+                    "width": 24,
+                  }
+                }
+                testID="composer-quote-remove-def"
+              >
+                <View
+                  accessibilityLabel="Remove quote message"
+                  accessibilityRole="button"
+                  accessible={true}
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        Object {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+              </RNGestureHandlerButton>
+            </View>
+            <Text
+              accessibilityLabel="Message def"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "fontFamily": "Inter",
+                    "fontSize": 16,
+                    "fontWeight": "400",
+                    "textAlign": "left",
+                  },
+                  Object {
+                    "color": "#2f343d",
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                    "color": "#2F343D",
+                    "fontFamily": "Inter",
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "lineHeight": 20,
+                    "textAlign": "left",
+                  },
+                ]
+              }
+              testID="markdown-preview-Message def"
+            >
+              Message def
+            </Text>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Quote Remove a quote 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 48,
+            "justifyContent": "center",
+            "paddingRight": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={207}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-actions"
+        >
+          <View
+            accessibilityLabel="Message actions"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "height": 48,
+            "paddingLeft": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={208}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-send-audio"
+        >
+          <View
+            accessibilityLabel="Send audio message"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+    </View>
+    <RCTScrollView
+      data={
+        Array [
+          "abc",
+          "def",
+        ]
+      }
+      getItem={[Function]}
+      getItemCount={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={50}
+      stickyHeaderIndices={Array []}
+      viewabilityConfigCallbackPairs={Array []}
+    >
+      <View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "backgroundColor": "#F7F8FA",
+                "borderBottomRightRadius": 4,
+                "borderColor": "#EBECEF",
+                "borderLeftColor": "#9EA2A8",
+                "borderTopRightRadius": 4,
+                "borderWidth": 1,
+                "height": 64,
+                "marginRight": 8,
+                "padding": 8,
+                "paddingLeft": 16,
+                "width": 320,
+              }
+            }
+            testID="composer-quote-abc"
+          >
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "backgroundColor": "transparent",
+                      "color": "#1F2329",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "700",
+                      "lineHeight": 20,
+                      "paddingRight": 4,
+                      "textAlign": "left",
+                    }
+                  }
+                >
+                  
+                </Text>
+                <Text
+                  style={
+                    Object {
+                      "backgroundColor": "transparent",
+                      "color": "#9EA2A8",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "400",
+                      "lineHeight": 16,
+                      "textAlign": "left",
+                    }
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <RNGestureHandlerButton
+                activeOpacity={0.3}
+                borderless={true}
+                collapsable={false}
+                handlerTag={209}
+                handlerType="NativeViewGestureHandler"
+                hitSlop={
+                  Object {
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
+                  }
+                }
+                onActiveStateChange={[Function]}
+                onGestureEvent={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onHandlerStateChange={[Function]}
+                onPress={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "height": 24,
+                    "justifyContent": "center",
+                    "opacity": 1,
+                    "width": 24,
+                  }
+                }
+                testID="composer-quote-remove-abc"
+              >
+                <View
+                  accessibilityLabel="Remove quote message"
+                  accessibilityRole="button"
+                  accessible={true}
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        Object {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+              </RNGestureHandlerButton>
+            </View>
+            <Text
+              accessibilityLabel="Message abc"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "fontFamily": "Inter",
+                    "fontSize": 16,
+                    "fontWeight": "400",
+                    "textAlign": "left",
+                  },
+                  Object {
+                    "color": "#2f343d",
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                    "color": "#2F343D",
+                    "fontFamily": "Inter",
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "lineHeight": 20,
+                    "textAlign": "left",
+                  },
+                ]
+              }
+              testID="markdown-preview-Message abc"
+            >
+              Message abc
+            </Text>
+          </View>
+        </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "backgroundColor": "#F7F8FA",
+                "borderBottomRightRadius": 4,
+                "borderColor": "#EBECEF",
+                "borderLeftColor": "#9EA2A8",
+                "borderTopRightRadius": 4,
+                "borderWidth": 1,
+                "height": 64,
+                "marginRight": 8,
+                "padding": 8,
+                "paddingLeft": 16,
+                "width": 320,
+              }
+            }
+            testID="composer-quote-def"
+          >
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  numberOfLines={1}
+                  style={
+                    Object {
+                      "backgroundColor": "transparent",
+                      "color": "#1F2329",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 14,
+                      "fontWeight": "700",
+                      "lineHeight": 20,
+                      "paddingRight": 4,
+                      "textAlign": "left",
+                    }
+                  }
+                >
+                  
+                </Text>
+                <Text
+                  style={
+                    Object {
+                      "backgroundColor": "transparent",
+                      "color": "#9EA2A8",
+                      "fontFamily": "Inter",
+                      "fontSize": 12,
+                      "fontWeight": "400",
+                      "lineHeight": 16,
+                      "textAlign": "left",
+                    }
+                  }
+                >
+                  
+                </Text>
+              </View>
+              <RNGestureHandlerButton
+                activeOpacity={0.3}
+                borderless={true}
+                collapsable={false}
+                handlerTag={210}
+                handlerType="NativeViewGestureHandler"
+                hitSlop={
+                  Object {
+                    "bottom": 16,
+                    "left": 16,
+                    "right": 16,
+                    "top": 16,
+                  }
+                }
+                onActiveStateChange={[Function]}
+                onGestureEvent={[Function]}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                onHandlerStateChange={[Function]}
+                onPress={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "height": 24,
+                    "justifyContent": "center",
+                    "opacity": 1,
+                    "width": 24,
+                  }
+                }
+                testID="composer-quote-remove-def"
+              >
+                <View
+                  accessibilityLabel="Remove quote message"
+                  accessibilityRole="button"
+                  accessible={true}
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#2F343D",
+                          "fontSize": 24,
+                        },
+                        Array [
+                          Object {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        Object {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        Object {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
+              </RNGestureHandlerButton>
+            </View>
+            <Text
+              accessibilityLabel="Message def"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "fontFamily": "Inter",
+                    "fontSize": 16,
+                    "fontWeight": "400",
+                    "textAlign": "left",
+                  },
+                  Object {
+                    "color": "#2f343d",
+                  },
+                  Object {
+                    "backgroundColor": "transparent",
+                    "color": "#2F343D",
+                    "fontFamily": "Inter",
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "lineHeight": 20,
+                    "textAlign": "left",
+                  },
+                ]
+              }
+              testID="markdown-preview-Message def"
+            >
+              Message def
+            </Text>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={59}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={60}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={61}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={62}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={63}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={64}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={58}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown tap code 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={137}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={138}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={139}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={140}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={141}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={142}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={136}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={163}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={164}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={165}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={166}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={167}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={168}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={162}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={85}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={86}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={87}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={88}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={89}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={90}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={84}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={46}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={47}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={48}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={49}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={50}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={51}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={45}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={111}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={112}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={113}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={114}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={115}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={116}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={110}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={72}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={73}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={74}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={75}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={76}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={77}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={71}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={150}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={151}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={152}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={153}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={154}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={155}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={149}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={176}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={177}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={178}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={179}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={180}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={181}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={175}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={98}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={99}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={100}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={101}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={102}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={103}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={97}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={124}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-markdown"
+      >
+        <View
+          accessibilityLabel="Close"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={125}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-bold"
+      >
+        <View
+          accessibilityLabel="Bold"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={126}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-italic"
+      >
+        <View
+          accessibilityLabel="Italic"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={127}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-strike"
+      >
+        <View
+          accessibilityLabel="Strikethrough"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={128}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code"
+      >
+        <View
+          accessibilityLabel="Inline code"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={129}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-code-block"
+      >
+        <View
+          accessibilityLabel="Code block"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={123}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar tap actions 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={24}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-actions"
+      >
+        <View
+          accessibilityLabel="Message actions"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={25}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-open-emoji"
+      >
+        <View
+          accessibilityLabel="Open emoji selector"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={26}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-open-markdown"
+      >
+        <View
+          accessibilityLabel="Open markdown tools"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={27}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-mention"
+      >
+        <View
+          accessibilityLabel="Open mention autocomplete"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={28}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar tap emoji 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={36}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-actions"
+      >
+        <View
+          accessibilityLabel="Message actions"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={37}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-close-emoji"
+      >
+        <View
+          accessibilityLabel="Close emoji selector"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={38}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer Toolbar tap mention 1`] = `
+Array [
+  <keyboard-accessory-view-mock>
+    <View
+      style={
+        Array [
+          Object {
+            "borderTopWidth": 1,
+            "minHeight": 48,
+            "paddingHorizontal": 16,
+          },
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "borderTopColor": "#CBCED1",
+          },
+        ]
+      }
+      testID="message-composer"
+    >
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+          }
+        }
+      >
+        <TextInput
+          blurOnSubmit={false}
+          defaultValue=""
+          keyboardAppearance="light"
+          multiline={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          onFocus={[Function]}
+          onSelectionChange={[Function]}
+          placeholder=""
+          placeholderTextColor="#9EA2A8"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+                "flex": 1,
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "maxHeight": 200,
+                "minHeight": 48,
+                "paddingBottom": 12,
+                "paddingTop": 12,
+                "textAlign": "left",
+                "textAlignVertical": "center",
+              },
+              Object {
+                "color": "#2F343D",
+              },
+            ]
+          }
+          testID="message-composer-input"
+          underlineColorAndroid="transparent"
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+            "paddingVertical": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={184}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-actions"
+        >
+          <View
+            accessibilityLabel="Message actions"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+        <View
+          style={
+            Object {
+              "width": 12,
+            }
+          }
+        />
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={185}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-open-emoji"
+        >
+          <View
+            accessibilityLabel="Open emoji selector"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+        <View
+          style={
+            Object {
+              "width": 12,
+            }
+          }
+        />
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={186}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-open-markdown"
+        >
+          <View
+            accessibilityLabel="Open markdown tools"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+        <View
+          style={
+            Object {
+              "width": 12,
+            }
+          }
+        />
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={187}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-mention"
+        >
+          <View
+            accessibilityLabel="Open mention autocomplete"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+        <View
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        />
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={188}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-send-audio"
+        >
+          <View
+            accessibilityLabel="Send audio message"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+    </View>
+  </keyboard-accessory-view-mock>,
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#E4E7EA",
+          "borderRadius": 4,
+          "elevation": 4,
+          "left": 8,
+          "maxHeight": 216,
+          "position": "absolute",
+          "right": 8,
+          "shadowColor": "#000",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.5,
+          "shadowRadius": 2,
+        },
+        Object {
+          "bottom": -4,
+        },
+      ]
+    }
+  >
+    <RCTScrollView
+      contentContainerStyle={
+        Object {
+          "borderRadius": 4,
+          "overflow": "hidden",
+        }
+      }
+      data={
+        Array [
+          Object {
+            "id": "all",
+            "subtitle": "Notify all in this room",
+            "t": "d",
+            "title": "all",
+            "type": "@",
+          },
+          Object {
+            "id": "here",
+            "subtitle": "Notify active users in this room",
+            "t": "d",
+            "title": "here",
+            "type": "@",
+          },
+        ]
+      }
+      getItem={[Function]}
+      getItemCount={[Function]}
+      keyExtractor={[Function]}
+      keyboardShouldPersistTaps="always"
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={50}
+      stickyHeaderIndices={Array []}
+      testID="autocomplete"
+      viewabilityConfigCallbackPairs={Array []}
+    >
+      <View>
+        <View
+          onLayout={[Function]}
+          style={null}
+        >
+          <RNGestureHandlerButton
+            activeOpacity={0.105}
+            collapsable={false}
+            handlerTag={189}
+            handlerType="NativeViewGestureHandler"
+            onActiveStateChange={[Function]}
+            onGestureEvent={[Function]}
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            onHandlerStateChange={[Function]}
+            onPress={[Function]}
+            rippleColor={4279259806}
+            style={
+              Object {
+                "backgroundColor": "#FFFFFF",
+              }
+            }
+            testID="autocomplete-item-all"
+            underlayColor="#10529E"
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#10529E",
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "bottom": 0,
+                  "left": 0,
+                  "opacity": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            />
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "minHeight": 48,
+                  "paddingHorizontal": 16,
+                  "paddingVertical": 6,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "paddingLeft": 0,
+                    },
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "paddingLeft": 0,
+                      }
+                    }
+                  >
+                    <Text
+                      numberOfLines={1}
+                      style={
+                        Object {
+                          "backgroundColor": "transparent",
+                          "color": "#2F343D",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      @all
+                    </Text>
+                  </View>
+                </View>
+                <View
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "paddingTop": 2,
+                    }
+                  }
+                >
+                  <Text
+                    style={
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#6C727A",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 14,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    Notify all in this room
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </RNGestureHandlerButton>
+        </View>
+        <View
+          onLayout={[Function]}
+          style={null}
+        >
+          <RNGestureHandlerButton
+            activeOpacity={0.105}
+            collapsable={false}
+            handlerTag={190}
+            handlerType="NativeViewGestureHandler"
+            onActiveStateChange={[Function]}
+            onGestureEvent={[Function]}
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            onHandlerStateChange={[Function]}
+            onPress={[Function]}
+            rippleColor={4279259806}
+            style={
+              Object {
+                "backgroundColor": "#FFFFFF",
+              }
+            }
+            testID="autocomplete-item-here"
+            underlayColor="#10529E"
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#10529E",
+                  "borderBottomLeftRadius": undefined,
+                  "borderBottomRightRadius": undefined,
+                  "borderRadius": undefined,
+                  "borderTopLeftRadius": undefined,
+                  "borderTopRightRadius": undefined,
+                  "bottom": 0,
+                  "left": 0,
+                  "opacity": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            />
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "minHeight": 48,
+                  "paddingHorizontal": 16,
+                  "paddingVertical": 6,
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "justifyContent": "center",
+                    },
+                    Object {
+                      "paddingLeft": 0,
+                    },
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "paddingLeft": 0,
+                      }
+                    }
+                  >
+                    <Text
+                      numberOfLines={1}
+                      style={
+                        Object {
+                          "backgroundColor": "transparent",
+                          "color": "#2F343D",
+                          "fontFamily": "Inter",
+                          "fontSize": 14,
+                          "fontWeight": "700",
+                          "textAlign": "left",
+                        }
+                      }
+                    >
+                      @here
+                    </Text>
+                  </View>
+                </View>
+                <View
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "paddingTop": 2,
+                    }
+                  }
+                >
+                  <Text
+                    style={
+                      Object {
+                        "backgroundColor": "transparent",
+                        "color": "#6C727A",
+                        "flex": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 14,
+                        "fontWeight": "400",
+                        "textAlign": "left",
+                      }
+                    }
+                  >
+                    Notify active users in this room
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </RNGestureHandlerButton>
+        </View>
+      </View>
+    </RCTScrollView>
+  </View>,
+]
+`;
+
+exports[`MessageComposer renders correctly 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 48,
+            "justifyContent": "center",
+            "paddingRight": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={1}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-actions"
+        >
+          <View
+            accessibilityLabel="Message actions"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "height": 48,
+            "paddingLeft": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={2}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-send-audio"
+        >
+          <View
+            accessibilityLabel="Send audio message"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer renders correctly with audio recorder disabled 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 48,
+            "justifyContent": "center",
+            "paddingRight": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={3}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-actions"
+        >
+          <View
+            accessibilityLabel="Message actions"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "height": 48,
+            "paddingLeft": 12,
+          }
+        }
+      />
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer renders correctly with audio recorder disabled and without audio upload permissions 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 48,
+            "justifyContent": "center",
+            "paddingRight": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={5}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-actions"
+        >
+          <View
+            accessibilityLabel="Message actions"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "height": 48,
+            "paddingLeft": 12,
+          }
+        }
+      />
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer renders correctly without audio upload permissions 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 48,
+            "justifyContent": "center",
+            "paddingRight": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={4}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-actions"
+        >
+          <View
+            accessibilityLabel="Message actions"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "height": 48,
+            "paddingLeft": 12,
+          }
+        }
+      />
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer renders toolbar when focused 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        }
+      }
+    >
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={8}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-actions"
+      >
+        <View
+          accessibilityLabel="Message actions"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={9}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-open-emoji"
+      >
+        <View
+          accessibilityLabel="Open emoji selector"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={10}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-open-markdown"
+      >
+        <View
+          accessibilityLabel="Open markdown tools"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "width": 12,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={11}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-mention"
+      >
+        <View
+          accessibilityLabel="Open mention autocomplete"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <RNGestureHandlerButton
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        handlerTag={12}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={
+          Object {
+            "bottom": 16,
+            "left": 16,
+            "right": 16,
+            "top": 16,
+          }
+        }
+        onActiveStateChange={[Function]}
+        onGestureEvent={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onHandlerStateChange={[Function]}
+        onPress={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "height": 24,
+            "justifyContent": "center",
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="message-composer-send-audio"
+      >
+        <View
+          accessibilityLabel="Send audio message"
+          accessibilityRole="button"
+          accessible={true}
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              Array [
+                Object {
+                  "color": "#6C727A",
+                  "fontSize": 24,
+                },
+                Array [
+                  Object {
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+                Object {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                Object {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
+
+exports[`MessageComposer send message 1`] = `
+<keyboard-accessory-view-mock>
+  <View
+    style={
+      Array [
+        Object {
+          "borderTopWidth": 1,
+          "minHeight": 48,
+          "paddingHorizontal": 16,
+        },
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderTopColor": "#CBCED1",
+        },
+      ]
+    }
+    testID="message-composer"
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 48,
+            "justifyContent": "center",
+            "paddingRight": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={20}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-actions"
+        >
+          <View
+            accessibilityLabel="Message actions"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+      <TextInput
+        blurOnSubmit={false}
+        defaultValue=""
+        keyboardAppearance="light"
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        onSelectionChange={[Function]}
+        placeholder=""
+        placeholderTextColor="#9EA2A8"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "flex": 1,
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 22,
+              "maxHeight": 200,
+              "minHeight": 48,
+              "paddingBottom": 12,
+              "paddingTop": 12,
+              "textAlign": "left",
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#2F343D",
+            },
+          ]
+        }
+        testID="message-composer-input"
+        underlineColorAndroid="transparent"
+      />
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "height": 48,
+            "paddingLeft": 12,
+          }
+        }
+      >
+        <RNGestureHandlerButton
+          activeOpacity={0.3}
+          borderless={true}
+          collapsable={false}
+          handlerTag={21}
+          handlerType="NativeViewGestureHandler"
+          hitSlop={
+            Object {
+              "bottom": 16,
+              "left": 16,
+              "right": 16,
+              "top": 16,
+            }
+          }
+          onActiveStateChange={[Function]}
+          onGestureEvent={[Function]}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onHandlerStateChange={[Function]}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "height": 24,
+              "justifyContent": "center",
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="message-composer-send-audio"
+        >
+          <View
+            accessibilityLabel="Send audio message"
+            accessibilityRole="button"
+            accessible={true}
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#6C727A",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </RNGestureHandlerButton>
+      </View>
+    </View>
+  </View>
+</keyboard-accessory-view-mock>
+`;
diff --git a/jest.setup.js b/jest.setup.js
index ebf0b89ac..2ea537aa7 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import '@testing-library/react-native/extend-expect';
-import '@testing-library/jest-native/legacy-extend-expect';
 import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock.js';
 import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
 
@@ -17,6 +16,10 @@ jest.mock('react-native-safe-area-context', () => {
 	};
 });
 
+jest.mock('./node_modules/react-native/Libraries/Interaction/InteractionManager', () => ({
+	runAfterInteractions: callback => callback()
+}));
+
 // @ts-ignore
 global.__reanimatedWorkletInit = () => {};
 jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
@@ -41,6 +44,24 @@ jest.mock('react-native-file-viewer', () => ({
 
 jest.mock('expo-haptics', () => jest.fn(() => null));
 
+jest.mock('expo-av', () => ({
+	...jest.requireActual('expo-av'),
+	Audio: {
+		...jest.requireActual('expo-av').Audio,
+		getPermissionsAsync: jest.fn(() => ({ status: 'granted', granted: true, canAskAgain: true })),
+		Recording: jest.fn(() => ({
+			prepareToRecordAsync: jest.fn(),
+			startAsync: jest.fn(),
+			stopAndUnloadAsync: jest.fn(),
+			setOnRecordingStatusUpdate: jest.fn()
+		}))
+	}
+}));
+
+jest.mock('./app/lib/methods/search', () => ({
+	search: () => []
+}));
+
 jest.mock('./app/lib/database', () => jest.fn(() => null));
 
 jest.mock('./app/containers/MessageComposer/components/EmojiKeyboard', () => jest.fn(() => null));
@@ -60,20 +81,24 @@ jest.mock('./app/lib/database/services/Message', () => ({
 	})
 }));
 
-const mockedNavigate = jest.fn();
-
-jest.mock('@react-navigation/native', () => ({
-	...jest.requireActual('@react-navigation/native'),
-	useNavigation: () => ({
+jest.mock('@react-navigation/native', () => {
+	const actualNav = jest.requireActual('@react-navigation/native');
+	const { useEffect } = require('react');
+	return {
+		...actualNav,
+		useFocusEffect: useEffect,
+		isFocused: () => true,
+		useIsFocused: () => true,
+		useRoute: () => jest.fn(),
+		useNavigation: () => ({
+			navigate: jest.fn(),
+			addListener: () => jest.fn()
+		}),
+		createNavigationContainerRef: jest.fn(),
 		navigate: jest.fn(),
-		addListener: jest.fn().mockImplementation((event, callback) => {
-			callback();
-			return {
-				remove: jest.fn()
-			};
-		})
-	})
-}));
+		addListener: jest.fn(() => jest.fn())
+	};
+});
 
 jest.mock('react-native-notifications', () => ({
 	Notifications: {
diff --git a/package.json b/package.json
index d730f34e4..cb8fe04f0 100644
--- a/package.json
+++ b/package.json
@@ -165,9 +165,8 @@
 		"@storybook/addon-storyshots": "6.3",
 		"@storybook/react": "6.3",
 		"@storybook/react-native": "^6.0.1-beta.7",
-		"@testing-library/jest-native": "^5.4.2",
 		"@testing-library/react-hooks": "^8.0.1",
-		"@testing-library/react-native": "^12.4.1",
+		"@testing-library/react-native": "^12.4.3",
 		"@types/bytebuffer": "^5.0.44",
 		"@types/ejson": "^2.1.3",
 		"@types/i18n-js": "^3.8.3",
@@ -224,7 +223,7 @@
 			"node_modules"
 		],
 		"transformIgnorePatterns": [
-			"node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation|expo)"
+			"node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
 		],
 		"preset": "./jest.preset.js",
 		"coverageDirectory": "./coverage/",
diff --git a/yarn.lock b/yarn.lock
index 9b8c094c2..d1eb84226 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6297,17 +6297,6 @@
     resolve-from "^5.0.0"
     store2 "^2.12.0"
 
-"@testing-library/jest-native@^5.4.2":
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-5.4.3.tgz#9334c68eaf45db9eb20d0876728cc5d7fc2c3ea2"
-  integrity sha512-/sSDGaOuE+PJ1Z9Kp4u7PQScSVVXGud59I/qsBFFJvIbcn4P6yYw6cBnBmbPF+X9aRIsTJRDl6gzw5ZkJNm66w==
-  dependencies:
-    chalk "^4.1.2"
-    jest-diff "^29.0.1"
-    jest-matcher-utils "^29.0.1"
-    pretty-format "^29.0.3"
-    redent "^3.0.0"
-
 "@testing-library/react-hooks@^8.0.1":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
@@ -6316,10 +6305,10 @@
     "@babel/runtime" "^7.12.5"
     react-error-boundary "^3.1.0"
 
-"@testing-library/react-native@^12.4.1":
-  version "12.4.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.4.1.tgz#f15d0b6727e5e1af8bc35049aa95ce24b4420fe7"
-  integrity sha512-HDHwGTJwBB9//Flv0HhApghFsUYZvaKTemXOs9PCMk6P8mUl4IJby8zAud8rq7bT/ZMnehgIak8QK+mJCH6+5Q==
+"@testing-library/react-native@^12.4.3":
+  version "12.4.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.4.3.tgz#57cd6a88b289f19144558b5e97336b57101af3ec"
+  integrity sha512-WLE7VbbR5jZJQl3vfNK7Wt+IHnzhOxyu95Mr56EHmzH3XhC8DkrPVAnUq9asq/QWj4aGnymbinFx6zZys/WZmA==
   dependencies:
     jest-matcher-utils "^29.7.0"
     pretty-format "^29.7.0"
@@ -13765,16 +13754,6 @@ jest-diff@^28.1.3:
     jest-get-type "^28.0.2"
     pretty-format "^28.1.3"
 
-jest-diff@^29.0.1, jest-diff@^29.6.4:
-  version "29.6.4"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.6.4.tgz#85aaa6c92a79ae8cd9a54ebae8d5b6d9a513314a"
-  integrity sha512-9F48UxR9e4XOEZvoUXEHSWY4qC4zERJaOfrbBg9JpbJOO43R1vN76REt/aMGZoY6GD5g84nnJiBIVlscegefpw==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^29.6.3"
-    jest-get-type "^29.6.3"
-    pretty-format "^29.6.3"
-
 jest-diff@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a"
@@ -13962,16 +13941,6 @@ jest-matcher-utils@^28.1.3:
     jest-get-type "^28.0.2"
     pretty-format "^28.1.3"
 
-jest-matcher-utils@^29.0.1:
-  version "29.6.4"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.6.4.tgz#327db7ababea49455df3b23e5d6109fe0c709d24"
-  integrity sha512-KSzwyzGvK4HcfnserYqJHYi7sZVqdREJ9DMPAKVbS98JsIAvumihaNUbjrWw0St7p9IY7A9UskCW5MYlGmBQFQ==
-  dependencies:
-    chalk "^4.0.0"
-    jest-diff "^29.6.4"
-    jest-get-type "^29.6.3"
-    pretty-format "^29.6.3"
-
 jest-matcher-utils@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz#ae8fec79ff249fd592ce80e3ee474e83a6c44f12"
@@ -17188,15 +17157,6 @@ pretty-format@^28.1.3:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-pretty-format@^29.0.3, pretty-format@^29.6.3:
-  version "29.6.3"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.6.3.tgz#d432bb4f1ca6f9463410c3fb25a0ba88e594ace7"
-  integrity sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==
-  dependencies:
-    "@jest/schemas" "^29.6.3"
-    ansi-styles "^5.0.0"
-    react-is "^18.0.0"
-
 pretty-format@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"