Fix: Each child in a list should have a unique "key" prop

app/containers/EmojiPicker/index.tsx

@@ -2,16 +2,16 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
 
-import TabBar from './TabBar';
-import EmojiCategory from './EmojiCategory';
-import Footer from './Footer';
-import styles from './styles';
+import { ICustomEmojis, IEmoji } from '../../definitions';
 import { categories, emojisByCategory } from '../../lib/constants';
-import { useTheme } from '../../theme';
-import { IEmoji, ICustomEmojis } from '../../definitions';
 import { useAppSelector, useFrequentlyUsedEmoji } from '../../lib/hooks';
 import { addFrequentlyUsed } from '../../lib/methods';
-import { IEmojiPickerProps, EventTypes } from './interfaces';
+import { useTheme } from '../../theme';
+import EmojiCategory from './EmojiCategory';
+import Footer from './Footer';
+import TabBar from './TabBar';
+import { EventTypes, IEmojiPickerProps } from './interfaces';
+import styles from './styles';
 
 const EmojiPicker = ({
 	onItemClicked,
@@ -54,6 +54,7 @@ const EmojiPicker = ({
 		}
 		return (
 			<EmojiCategory
+				key={category}
 				parentWidth={parentWidth}
 				emojis={emojis}
 				onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}

app/containers/Passcode/Base/Dots.tsx

@@ -1,10 +1,10 @@
+import range from 'lodash/range';
 import React from 'react';
 import { View } from 'react-native';
-import range from 'lodash/range';
 
-import styles from './styles';
 import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
+import styles from './styles';
 
 const SIZE_EMPTY = 12;
 const SIZE_FULL = 16;
@@ -33,7 +33,7 @@ const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
 				const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
 				const marginLeft = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
 				return (
-					<View style={styles.dotsView}>
+					<View key={val} style={styles.dotsView}>
 						<View
 							style={{
 								height,

app/containers/UIKit/Section.tsx

@@ -1,10 +1,10 @@
+import { BlockContext } from '@rocket.chat/ui-kit';
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { BlockContext } from '@rocket.chat/ui-kit';
 
 import { themes } from '../../lib/constants';
-import { IAccessoryComponent, IFields, ISection } from './interfaces';
 import { useTheme } from '../../theme';
+import { IAccessoryComponent, IFields, ISection } from './interfaces';
 
 const styles = StyleSheet.create({
 	content: {
@@ -30,8 +30,10 @@ const Accessory = ({ element, parser }: IAccessoryComponent) =>
 
 const Fields = ({ fields, parser, theme }: IFields) => (
 	<>
-		{fields.map(field => (
-			<Text style={[styles.text, styles.field, { color: themes[theme].bodyText }]}>{parser.text(field)}</Text>
+		{fields.map((field, index) => (
+			<Text key={index} style={[styles.text, styles.field, { color: themes[theme].bodyText }]}>
+				{parser.text(field)}
+			</Text>
 		))}
 	</>
 );

app/containers/markdown/new/BigEmoji.tsx

@@ -1,6 +1,6 @@
+import { BigEmoji as BigEmojiProps } from '@rocket.chat/message-parser';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { BigEmoji as BigEmojiProps } from '@rocket.chat/message-parser';
 
 import Emoji from './Emoji';
 
@@ -16,8 +16,8 @@ const styles = StyleSheet.create({
 
 const BigEmoji = ({ value }: IBigEmojiProps) => (
 	<View style={styles.container}>
-		{value.map(block => (
-			<Emoji block={block} isBigEmoji />
+		{value.map((block, i) => (
+			<Emoji key={block.value?.value ?? i} block={block} isBigEmoji />
 		))}
 	</View>
 );

app/containers/markdown/new/Bold.tsx

@@ -1,12 +1,12 @@
+import { Bold as BoldProps } from '@rocket.chat/message-parser';
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { Bold as BoldProps } from '@rocket.chat/message-parser';
 
 import sharedStyles from '../../../views/Styles';
-import Strike from './Strike';
 import Italic from './Italic';
-import Plain from './Plain';
 import Link from './Link';
+import Plain from './Plain';
+import Strike from './Strike';
 
 interface IBoldProps {
 	value: BoldProps['value'];
@@ -20,18 +20,19 @@ const styles = StyleSheet.create({
 
 const Bold = ({ value }: IBoldProps) => (
 	<Text style={styles.text}>
-		{value.map(block => {
+		{value.map((block, index) => {
+			const key = `${block.type}-${index}`;
 			switch (block.type) {
 				case 'LINK':
-					return <Link value={block.value} />;
+					return <Link key={key} value={block.value} />;
 				case 'PLAIN_TEXT':
-					return <Plain value={block.value} />;
+					return <Plain key={key} value={block.value} />;
 				case 'STRIKE':
-					return <Strike value={block.value} />;
+					return <Strike key={key} value={block.value} />;
 				case 'ITALIC':
-					return <Italic value={block.value} />;
+					return <Italic key={key} value={block.value} />;
 				case 'MENTION_CHANNEL':
-					return <Plain value={`#${block.value.value}`} />;
+					return <Plain key={key} value={`#${block.value.value}`} />;
 				default:
 					return null;
 			}

app/containers/markdown/new/Code.tsx

@@ -1,9 +1,9 @@
+import { Code as CodeProps } from '@rocket.chat/message-parser';
 import React from 'react';
 import { View } from 'react-native';
-import { Code as CodeProps } from '@rocket.chat/message-parser';
 
-import styles from '../styles';
 import { useTheme } from '../../../theme';
+import styles from '../styles';
 import CodeLine from './CodeLine';
 
 interface ICodeProps {
@@ -23,10 +23,11 @@ const Code = ({ value }: ICodeProps): React.ReactElement => {
 				}
 			]}
 		>
-			{value.map(block => {
+			{value.map((block, index) => {
+				const key = `${block.type}-${index}`;
 				switch (block.type) {
 					case 'CODE_LINE':
-						return <CodeLine value={block.value} />;
+						return <CodeLine key={key} value={block.value} />;
 					default:
 						return null;
 				}

app/containers/markdown/new/Inline.tsx

@@ -1,19 +1,19 @@
+import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
 import React, { useContext } from 'react';
 import { Text } from 'react-native';
-import { Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
 
-import Hashtag from '../Hashtag';
 import AtMention from '../AtMention';
+import Hashtag from '../Hashtag';
 import styles from '../styles';
-import Link from './Link';
-import Plain from './Plain';
 import Bold from './Bold';
-import Strike from './Strike';
-import Italic from './Italic';
 import Emoji from './Emoji';
-import InlineCode from './InlineCode';
 import Image from './Image';
+import InlineCode from './InlineCode';
+import Italic from './Italic';
+import Link from './Link';
 import MarkdownContext from './MarkdownContext';
+import Plain from './Plain';
+import Strike from './Strike';
 // import { InlineKaTeX, KaTeX } from './Katex';
 
 interface IParagraphProps {
@@ -42,22 +42,25 @@ const Inline = ({ value, forceTrim }: IParagraphProps): React.ReactElement | nul
 					}
 				}
 
+				const key = `${block.type}-${index}`;
+
 				switch (block.type) {
 					case 'IMAGE':
-						return <Image value={block.value} />;
+						return <Image key={key} value={block.value} />;
 					case 'PLAIN_TEXT':
-						return <Plain value={block.value} />;
+						return <Plain key={key} value={block.value} />;
 					case 'BOLD':
-						return <Bold value={block.value} />;
+						return <Bold key={key} value={block.value} />;
 					case 'STRIKE':
-						return <Strike value={block.value} />;
+						return <Strike key={key} value={block.value} />;
 					case 'ITALIC':
-						return <Italic value={block.value} />;
+						return <Italic key={key} value={block.value} />;
 					case 'LINK':
-						return <Link value={block.value} />;
+						return <Link key={key} value={block.value} />;
 					case 'MENTION_USER':
 						return (
 							<AtMention
+								key={key}
 								mention={block.value.value}
 								useRealName={useRealName}
 								username={username}
@@ -66,14 +69,14 @@ const Inline = ({ value, forceTrim }: IParagraphProps): React.ReactElement | nul
 							/>
 						);
 					case 'EMOJI':
-						return <Emoji block={block} />;
+						return <Emoji key={key} block={block} />;
 					case 'MENTION_CHANNEL':
-						return <Hashtag hashtag={block.value.value} navToRoomInfo={navToRoomInfo} channels={channels} />;
+						return <Hashtag key={key} hashtag={block.value.value} navToRoomInfo={navToRoomInfo} channels={channels} />;
 					case 'INLINE_CODE':
-						return <InlineCode value={block.value} />;
+						return <InlineCode key={key} value={block.value} />;
 					case 'INLINE_KATEX':
 						// return <InlineKaTeX value={block.value} />;
-						return <Text>{block.value}</Text>;
+						return <Text key={key}>{block.value}</Text>;
 					default:
 						return null;
 				}

app/containers/markdown/new/Italic.tsx

@@ -1,11 +1,11 @@
+import { Italic as ItalicProps } from '@rocket.chat/message-parser';
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { Italic as ItalicProps } from '@rocket.chat/message-parser';
 
-import Strike from './Strike';
 import Bold from './Bold';
-import Plain from './Plain';
 import Link from './Link';
+import Plain from './Plain';
+import Strike from './Strike';
 
 interface IItalicProps {
 	value: ItalicProps['value'];
@@ -19,18 +19,19 @@ const styles = StyleSheet.create({
 
 const Italic = ({ value }: IItalicProps) => (
 	<Text style={styles.text}>
-		{value.map(block => {
+		{value.map((block, index) => {
+			const key = `${block.type}-${index}`;
 			switch (block.type) {
 				case 'LINK':
-					return <Link value={block.value} />;
+					return <Link key={key} value={block.value} />;
 				case 'PLAIN_TEXT':
-					return <Plain value={block.value} />;
+					return <Plain key={key} value={block.value} />;
 				case 'STRIKE':
-					return <Strike value={block.value} />;
+					return <Strike key={key} value={block.value} />;
 				case 'BOLD':
-					return <Bold value={block.value} />;
+					return <Bold key={key} value={block.value} />;
 				case 'MENTION_CHANNEL':
-					return <Plain value={`#${block.value.value}`} />;
+					return <Plain key={key} value={`#${block.value.value}`} />;
 				default:
 					return null;
 			}

app/containers/markdown/new/Quote.tsx

@@ -1,6 +1,6 @@
+import { Quote as QuoteProps } from '@rocket.chat/message-parser';
 import React from 'react';
 import { View } from 'react-native';
-import { Quote as QuoteProps } from '@rocket.chat/message-parser';
 
 import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
@@ -17,8 +17,8 @@ const Quote = ({ value }: IQuoteProps) => {
 		<View style={styles.container}>
 			<View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
 			<View style={styles.childContainer}>
-				{value.map(item => (
-					<Paragraph value={item.value} />
+				{value.map((item, index) => (
+					<Paragraph key={`${item.type}-${index}`} value={item.value} />
 				))}
 			</View>
 		</View>

app/containers/markdown/new/Strike.tsx

@@ -1,11 +1,11 @@
+import { Strike as StrikeProps } from '@rocket.chat/message-parser';
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { Strike as StrikeProps } from '@rocket.chat/message-parser';
 
 import Bold from './Bold';
 import Italic from './Italic';
-import Plain from './Plain';
 import Link from './Link';
+import Plain from './Plain';
 
 interface IStrikeProps {
 	value: StrikeProps['value'];
@@ -19,18 +19,19 @@ const styles = StyleSheet.create({
 
 const Strike = ({ value }: IStrikeProps) => (
 	<Text style={styles.text}>
-		{value.map(block => {
+		{value.map((block, index) => {
+			const key = `${block.type}-${index}`;
 			switch (block.type) {
 				case 'LINK':
-					return <Link value={block.value} />;
+					return <Link key={key} value={block.value} />;
 				case 'PLAIN_TEXT':
-					return <Plain value={block.value} />;
+					return <Plain key={key} value={block.value} />;
 				case 'BOLD':
-					return <Bold value={block.value} />;
+					return <Bold key={key} value={block.value} />;
 				case 'ITALIC':
-					return <Italic value={block.value} />;
+					return <Italic key={key} value={block.value} />;
 				case 'MENTION_CHANNEL':
-					return <Plain value={`#${block.value.value}`} />;
+					return <Plain key={key} value={`#${block.value.value}`} />;
 				default:
 					return null;
 			}

app/containers/markdown/new/TaskList.tsx

@@ -1,10 +1,10 @@
+import { Tasks as TasksProps } from '@rocket.chat/message-parser';
 import React from 'react';
 import { Text, View } from 'react-native';
-import { Tasks as TasksProps } from '@rocket.chat/message-parser';
 
-import Inline from './Inline';
-import styles from '../styles';
 import { useTheme } from '../../../theme';
+import styles from '../styles';
+import Inline from './Inline';
 
 interface ITasksProps {
 	value: TasksProps['value'];
@@ -14,8 +14,8 @@ const TaskList = ({ value = [] }: ITasksProps) => {
 	const { colors } = useTheme();
 	return (
 		<View>
-			{value.map(item => (
-				<View style={styles.row}>
+			{value.map((item, index) => (
+				<View key={`${item.type}-${index}`} style={styles.row}>
 					<Text style={[styles.text, { color: colors.bodyText }]}>{item.status ? '- [x] ' : '- [ ] '}</Text>
 					<Text style={[styles.inline, { color: colors.bodyText }]}>
 						<Inline value={item.value} />

app/containers/markdown/new/UnorderedList.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
 import { UnorderedList as UnorderedListProps } from '@rocket.chat/message-parser';
-import { View, Text } from 'react-native';
+import React from 'react';
+import { Text, View } from 'react-native';
 
-import Inline from './Inline';
-import styles from '../styles';
 import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
+import styles from '../styles';
+import Inline from './Inline';
 
 interface IUnorderedListProps {
 	value: UnorderedListProps['value'];
@@ -15,8 +15,8 @@ const UnorderedList = ({ value }: IUnorderedListProps) => {
 	const { theme } = useTheme();
 	return (
 		<View>
-			{value.map(item => (
-				<View style={styles.row}>
+			{value.map((item, index) => (
+				<View key={`${item}-${index}`} style={styles.row}>
 					<Text style={[styles.text, styles.listPrefix, { color: themes[theme].bodyText }]}>- </Text>
 					<Text style={[styles.text, styles.inline, { color: themes[theme].bodyText }]}>
 						<Inline value={item.value} />