From 0bb3252066e23425ba2d2da5b56cc482573f46eb Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Wed, 16 Mar 2022 22:56:05 -0300
Subject: [PATCH 1/6] Chore: Migrate containers: List to Typescript

---
 app/containers/List/ListContainer.tsx |  2 +-
 app/containers/List/ListHeader.tsx    | 23 ++++----
 app/containers/List/ListIcon.tsx      | 19 ++++---
 app/containers/List/ListInfo.tsx      | 20 ++++---
 app/containers/List/ListItem.tsx      | 82 ++++++++++++++-------------
 app/containers/List/ListSection.tsx   |  5 +-
 app/containers/List/ListSeparator.tsx | 13 +++--
 app/dimensions.tsx                    |  4 +-
 8 files changed, 91 insertions(+), 77 deletions(-)

diff --git a/app/containers/List/ListContainer.tsx b/app/containers/List/ListContainer.tsx
index deb9c8a7109..75647b22e80 100644
--- a/app/containers/List/ListContainer.tsx
+++ b/app/containers/List/ListContainer.tsx
@@ -11,7 +11,7 @@ const styles = StyleSheet.create({
 });
 
 interface IListContainer {
-	children: React.ReactNode;
+	children: React.ReactElement | React.ReactElement[] | null;
 	testID?: string;
 }
 const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx
index 9a0b977315d..469d4cec66a 100644
--- a/app/containers/List/ListHeader.tsx
+++ b/app/containers/List/ListHeader.tsx
@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
 import I18n from '../../i18n';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { PADDING_HORIZONTAL } from './constants';
 
 const styles = StyleSheet.create({
@@ -20,18 +20,21 @@ const styles = StyleSheet.create({
 
 interface IListHeader {
 	title: string;
-	theme?: string;
 	translateTitle?: boolean;
 }
 
-const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => (
-	<View style={styles.container}>
-		<Text style={[styles.title, { color: themes[theme!].infoText }]} numberOfLines={1}>
-			{translateTitle ? I18n.t(title) : title}
-		</Text>
-	</View>
-));
+const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) => {
+	const { theme } = useTheme();
+
+	return (
+		<View style={styles.container}>
+			<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
+				{translateTitle ? I18n.t(title) : title}
+			</Text>
+		</View>
+	);
+});
 
 ListHeader.displayName = 'List.Header';
 
-export default withTheme(ListHeader);
+export default ListHeader;
diff --git a/app/containers/List/ListIcon.tsx b/app/containers/List/ListIcon.tsx
index 71e4fbdf235..c134b169036 100644
--- a/app/containers/List/ListIcon.tsx
+++ b/app/containers/List/ListIcon.tsx
@@ -3,11 +3,10 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { ICON_SIZE } from './constants';
 
 interface IListIcon {
-	theme?: string;
 	name: string;
 	color?: string;
 	style?: StyleProp<ViewStyle>;
@@ -21,12 +20,16 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => (
-	<View style={[styles.icon, style]}>
-		<CustomIcon name={name} color={color ?? themes[theme!].auxiliaryText} size={ICON_SIZE} testID={testID} />
-	</View>
-));
+const ListIcon = React.memo(({ name, color, style, testID }: IListIcon) => {
+	const { theme } = useTheme();
+
+	return (
+		<View style={[styles.icon, style]}>
+			<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={ICON_SIZE} testID={testID} />
+		</View>
+	);
+});
 
 ListIcon.displayName = 'List.Icon';
 
-export default withTheme(ListIcon);
+export default ListIcon;
diff --git a/app/containers/List/ListInfo.tsx b/app/containers/List/ListInfo.tsx
index 2bfe68e324d..baac47ccc8a 100644
--- a/app/containers/List/ListInfo.tsx
+++ b/app/containers/List/ListInfo.tsx
@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { PADDING_HORIZONTAL } from './constants';
 import I18n from '../../i18n';
 
@@ -18,18 +18,20 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IListHeader {
+interface IListInfo {
 	info: string;
-	theme?: string;
 	translateInfo?: boolean;
 }
 
-const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => (
-	<View style={styles.container}>
-		<Text style={[styles.text, { color: themes[theme!].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
-	</View>
-));
+const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
+	const { theme } = useTheme();
+	return (
+		<View style={styles.container}>
+			<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
+		</View>
+	);
+});
 
 ListInfo.displayName = 'List.Info';
 
-export default withTheme(ListInfo);
+export default ListInfo;
diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
index 79b3dcbf73b..2df3cf9ab9f 100644
--- a/app/containers/List/ListItem.tsx
+++ b/app/containers/List/ListItem.tsx
@@ -4,11 +4,11 @@ import { I18nManager, StyleSheet, Text, View } from 'react-native';
 import Touch from '../../utils/touch';
 import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import I18n from '../../i18n';
 import { Icon } from '.';
 import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
-import { withDimensions } from '../../dimensions';
+import { useDimensions } from '../../dimensions';
 import { CustomIcon } from '../../lib/Icons';
 
 const styles = StyleSheet.create({
@@ -59,13 +59,12 @@ interface IListItemContent {
 	left?: () => JSX.Element | null;
 	right?: () => JSX.Element | null;
 	disabled?: boolean;
+	theme: string;
 	testID?: string;
-	theme?: string;
 	color?: string;
 	translateTitle?: boolean;
 	translateSubtitle?: boolean;
 	showActionIndicator?: boolean;
-	fontScale?: number;
 	alert?: boolean;
 }
 
@@ -78,78 +77,83 @@ const Content = React.memo(
 		left,
 		right,
 		color,
-		theme,
-		fontScale,
 		alert,
 		translateTitle = true,
 		translateSubtitle = true,
-		showActionIndicator = false
-	}: IListItemContent) => (
-		<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale! }]} testID={testID}>
-			{left ? <View style={styles.leftContainer}>{left()}</View> : null}
-			<View style={styles.textContainer}>
-				<View style={styles.textAlertContainer}>
-					<Text style={[styles.title, { color: color || themes[theme!].titleText }]} numberOfLines={1}>
-						{translateTitle ? I18n.t(title) : title}
-					</Text>
-					{alert ? (
-						<CustomIcon style={[styles.alertIcon, { color: themes[theme!].dangerColor }]} size={ICON_SIZE} name='info' />
+		showActionIndicator = false,
+		theme
+	}: IListItemContent) => {
+		const { fontScale } = useDimensions();
+
+		return (
+			<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale }]} testID={testID}>
+				{left ? <View style={styles.leftContainer}>{left()}</View> : null}
+				<View style={styles.textContainer}>
+					<View style={styles.textAlertContainer}>
+						<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>
+							{translateTitle ? I18n.t(title) : title}
+						</Text>
+						{alert ? (
+							<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
+						) : null}
+					</View>
+					{subtitle ? (
+						<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+							{translateSubtitle ? I18n.t(subtitle) : subtitle}
+						</Text>
 					) : null}
 				</View>
-				{subtitle ? (
-					<Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
-						{translateSubtitle ? I18n.t(subtitle) : subtitle}
-					</Text>
+				{right || showActionIndicator ? (
+					<View style={styles.rightContainer}>
+						{right ? right() : null}
+						{showActionIndicator ? <Icon name='chevron-right' style={styles.actionIndicator} /> : null}
+					</View>
 				) : null}
 			</View>
-			{right || showActionIndicator ? (
-				<View style={styles.rightContainer}>
-					{right ? right() : null}
-					{showActionIndicator ? <Icon name='chevron-right' style={styles.actionIndicator} /> : null}
-				</View>
-			) : null}
-		</View>
-	)
+		);
+	}
 );
 
 interface IListButtonPress {
-	onPress?: Function;
+	onPress: Function;
 }
 
 interface IListItemButton extends IListButtonPress {
 	title?: string;
 	disabled?: boolean;
-	theme?: string;
+	theme: string;
 	backgroundColor?: string;
 	underlayColor?: string;
 }
 
 const Button = React.memo<IListItemButton>(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
 	<Touch
-		onPress={() => onPress!(props.title)}
-		style={{ backgroundColor: backgroundColor || themes[props.theme!].backgroundColor }}
+		onPress={() => onPress(props.title)}
+		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}
-		theme={props.theme!}>
+		theme={props.theme}>
 		<Content {...props} />
 	</Touch>
 ));
 
-interface IListItem extends IListItemContent, IListItemButton {
+interface IListItem extends Omit<IListItemContent, 'theme'>, Omit<IListItemButton, 'theme'> {
 	backgroundColor?: string;
 }
 
 const ListItem = React.memo<IListItem>(({ ...props }: IListItem) => {
+	const { theme } = useTheme();
+
 	if (props.onPress) {
-		return <Button {...props} />;
+		return <Button {...props} theme={theme} />;
 	}
 	return (
-		<View style={{ backgroundColor: props.backgroundColor || themes[props.theme!].backgroundColor }}>
-			<Content {...props} />
+		<View style={{ backgroundColor: props.backgroundColor || themes[theme].backgroundColor }}>
+			<Content {...props} theme={theme} />
 		</View>
 	);
 });
 
 ListItem.displayName = 'List.Item';
 
-export default withTheme(withDimensions(ListItem));
+export default ListItem;
diff --git a/app/containers/List/ListSection.tsx b/app/containers/List/ListSection.tsx
index e334f5f3f3f..5193d48a5df 100644
--- a/app/containers/List/ListSection.tsx
+++ b/app/containers/List/ListSection.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { withTheme } from '../../theme';
 import { Header } from '.';
 
 const styles = StyleSheet.create({
@@ -11,7 +10,7 @@ const styles = StyleSheet.create({
 });
 
 interface IListSection {
-	children: React.ReactNode;
+	children: React.ReactElement | React.ReactElement[] | null;
 	title?: string;
 	translateTitle?: boolean;
 }
@@ -25,4 +24,4 @@ const ListSection = React.memo(({ children, title, translateTitle }: IListSectio
 
 ListSection.displayName = 'List.Section';
 
-export default withTheme(ListSection);
+export default ListSection;
diff --git a/app/containers/List/ListSeparator.tsx b/app/containers/List/ListSeparator.tsx
index db34b05ba6e..f86dee19643 100644
--- a/app/containers/List/ListSeparator.tsx
+++ b/app/containers/List/ListSeparator.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 
 import { themes } from '../../constants/colors';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 
 const styles = StyleSheet.create({
 	separator: {
@@ -12,13 +12,14 @@ const styles = StyleSheet.create({
 
 interface IListSeparator {
 	style?: ViewStyle;
-	theme?: string;
 }
 
-const ListSeparator = React.memo(({ style, theme }: IListSeparator) => (
-	<View style={[styles.separator, style, { backgroundColor: themes[theme!].separatorColor }]} />
-));
+const ListSeparator = React.memo(({ style }: IListSeparator) => {
+	const { theme } = useTheme();
+
+	return <View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />;
+});
 
 ListSeparator.displayName = 'List.Separator';
 
-export default withTheme(ListSeparator);
+export default ListSeparator;
diff --git a/app/dimensions.tsx b/app/dimensions.tsx
index ddf95d6d375..6c7e543ef02 100644
--- a/app/dimensions.tsx
+++ b/app/dimensions.tsx
@@ -22,7 +22,9 @@ export interface IDimensionsContextProps {
 	}) => void;
 }
 
-export const DimensionsContext = React.createContext<Partial<IDimensionsContextProps>>(Dimensions.get('window'));
+export const DimensionsContext = React.createContext<IDimensionsContextProps>(
+	Dimensions.get('window') as IDimensionsContextProps
+);
 
 export function withDimensions<T extends object>(Component: React.ComponentType<T> & TNavigationOptions): typeof Component {
 	const DimensionsComponent = (props: T) => (

From 0f0a23a8596c67dd5385454b8a28ae36a57c5306 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Wed, 16 Mar 2022 23:54:23 -0300
Subject: [PATCH 2/6] minor tweak

---
 app/containers/List/ListContainer.tsx |  2 +-
 app/containers/List/ListItem.tsx      | 10 ++++++----
 app/containers/List/ListSection.tsx   |  2 +-
 app/views/AddChannelTeamView.tsx      |  4 ----
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/containers/List/ListContainer.tsx b/app/containers/List/ListContainer.tsx
index 75647b22e80..deb9c8a7109 100644
--- a/app/containers/List/ListContainer.tsx
+++ b/app/containers/List/ListContainer.tsx
@@ -11,7 +11,7 @@ const styles = StyleSheet.create({
 });
 
 interface IListContainer {
-	children: React.ReactElement | React.ReactElement[] | null;
+	children: React.ReactNode;
 	testID?: string;
 }
 const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
index 2df3cf9ab9f..a281c87138c 100644
--- a/app/containers/List/ListItem.tsx
+++ b/app/containers/List/ListItem.tsx
@@ -114,11 +114,11 @@ const Content = React.memo(
 	}
 );
 
-interface IListButtonPress {
+interface IListButtonPress extends IListItemButton {
 	onPress: Function;
 }
 
-interface IListItemButton extends IListButtonPress {
+interface IListItemButton {
 	title?: string;
 	disabled?: boolean;
 	theme: string;
@@ -126,7 +126,7 @@ interface IListItemButton extends IListButtonPress {
 	underlayColor?: string;
 }
 
-const Button = React.memo<IListItemButton>(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
+const Button = React.memo<IListButtonPress>(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
 	<Touch
 		onPress={() => onPress(props.title)}
 		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
@@ -139,13 +139,15 @@ const Button = React.memo<IListItemButton>(({ onPress, backgroundColor, underlay
 
 interface IListItem extends Omit<IListItemContent, 'theme'>, Omit<IListItemButton, 'theme'> {
 	backgroundColor?: string;
+	onPress?: Function;
 }
 
 const ListItem = React.memo<IListItem>(({ ...props }: IListItem) => {
 	const { theme } = useTheme();
 
 	if (props.onPress) {
-		return <Button {...props} theme={theme} />;
+		const { onPress } = props;
+		return <Button {...props} theme={theme} onPress={onPress} />;
 	}
 	return (
 		<View style={{ backgroundColor: props.backgroundColor || themes[theme].backgroundColor }}>
diff --git a/app/containers/List/ListSection.tsx b/app/containers/List/ListSection.tsx
index 5193d48a5df..e84568bf470 100644
--- a/app/containers/List/ListSection.tsx
+++ b/app/containers/List/ListSection.tsx
@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
 });
 
 interface IListSection {
-	children: React.ReactElement | React.ReactElement[] | null;
+	children: React.ReactNode;
 	title?: string;
 	translateTitle?: boolean;
 }
diff --git a/app/views/AddChannelTeamView.tsx b/app/views/AddChannelTeamView.tsx
index 8a72d3c967b..2675feb1dc7 100644
--- a/app/views/AddChannelTeamView.tsx
+++ b/app/views/AddChannelTeamView.tsx
@@ -6,7 +6,6 @@ import { CompositeNavigationProp } from '@react-navigation/core';
 
 import * as List from '../containers/List';
 import StatusBar from '../containers/StatusBar';
-import { useTheme } from '../theme';
 import * as HeaderButton from '../containers/HeaderButton';
 import SafeAreaView from '../containers/SafeAreaView';
 import I18n from '../i18n';
@@ -41,7 +40,6 @@ const setHeader = ({
 
 const AddChannelTeamView = ({ navigation, route, isMasterDetail }: IAddChannelTeamView) => {
 	const { teamId, teamChannels } = route.params;
-	const { theme } = useTheme();
 
 	useEffect(() => {
 		setHeader({ navigation, isMasterDetail });
@@ -67,7 +65,6 @@ const AddChannelTeamView = ({ navigation, route, isMasterDetail }: IAddChannelTe
 					testID='add-channel-team-view-create-channel'
 					left={() => <List.Icon name='team' />}
 					right={() => <List.Icon name='chevron-right' />}
-					theme={theme}
 				/>
 				<List.Separator />
 				<List.Item
@@ -76,7 +73,6 @@ const AddChannelTeamView = ({ navigation, route, isMasterDetail }: IAddChannelTe
 					testID='add-channel-team-view-add-existing'
 					left={() => <List.Icon name='channel-public' />}
 					right={() => <List.Icon name='chevron-right' />}
-					theme={theme}
 				/>
 				<List.Separator />
 			</List.Container>

From 9e13698d6dfd7cabaf7c7d99b05bd2e01ffc6625 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Thu, 17 Mar 2022 00:44:48 -0300
Subject: [PATCH 3/6] fix storyshot List - item flatlist

---
 storybook/stories/__snapshots__/List.storyshot | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/stories/__snapshots__/List.storyshot b/storybook/stories/__snapshots__/List.storyshot
index b87a645df54..0744a75ac5c 100644
--- a/storybook/stories/__snapshots__/List.storyshot
+++ b/storybook/stories/__snapshots__/List.storyshot
@@ -12,7 +12,7 @@ exports[`Storyshots List separator 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"pr
 
 exports[`Storyshots List title and subtitle 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"contentContainerStyle\\":{\\"paddingVertical\\":16},\\"scrollIndicatorInsets\\":{\\"right\\":1},\\"keyboardShouldPersistTaps\\":\\"always\\",\\"keyboardDismissMode\\":\\"interactive\\",\\"theme\\":\\"light\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}],\\"testID\\":\\"test-id\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]}]}"`;
 
-exports[`Storyshots List with FlatList 1`] = `"{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"edges\\":[\\"right\\",\\"left\\"]},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"data\\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29],\\"contentContainerStyle\\":{\\"paddingVertical\\":32},\\"disableVirtualization\\":false,\\"horizontal\\":false,\\"initialNumToRender\\":10,\\"maxToRenderPerBatch\\":10,\\"onEndReachedThreshold\\":2,\\"scrollEventThrottle\\":50,\\"updateCellsBatchingPeriod\\":50,\\"windowSize\\":21,\\"removeClippedSubviews\\":false,\\"viewabilityConfigCallbackPairs\\":[],\\"stickyHeaderIndices\\":[]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"0\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"1\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"2\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"3\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"4\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"5\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"6\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"7\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"8\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"9\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"height\\":0}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]}]}]}]}"`;
+exports[`Storyshots List with FlatList 1`] = `"{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"edges\\":[\\"right\\",\\"left\\"]},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"data\\":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29],\\"contentContainerStyle\\":{\\"paddingVertical\\":32},\\"ListHeaderComponent\\":{\\"compare\\":null},\\"ListFooterComponent\\":{\\"compare\\":null},\\"ItemSeparatorComponent\\":{\\"compare\\":null},\\"disableVirtualization\\":false,\\"horizontal\\":false,\\"initialNumToRender\\":10,\\"maxToRenderPerBatch\\":10,\\"onEndReachedThreshold\\":2,\\"scrollEventThrottle\\":50,\\"updateCellsBatchingPeriod\\":50,\\"windowSize\\":21,\\"removeClippedSubviews\\":false,\\"viewabilityConfigCallbackPairs\\":[],\\"stickyHeaderIndices\\":[]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"0\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"1\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"2\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"3\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"4\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"5\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"6\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"7\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"8\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"9\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"height\\":0}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]}]}]}]}"`;
 
 exports[`Storyshots List with bigger font 1`] = `"{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"edges\\":[\\"right\\",\\"left\\"]},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"contentContainerStyle\\":{\\"paddingVertical\\":16},\\"scrollIndicatorInsets\\":{\\"right\\":1},\\"keyboardShouldPersistTaps\\":\\"always\\",\\"keyboardDismissMode\\":\\"interactive\\",\\"theme\\":\\"light\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":12,\\"paddingHorizontal\\":12}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6d6d72\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":69}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},{\\"opacity\\":0.3},{\\"height\\":69}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingTop\\":8,\\"paddingHorizontal\\":12}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6d6d72\\"}]},\\"children\\":[\\"Chats\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":12,\\"paddingHorizontal\\":12}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6d6d72\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":69}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},{\\"opacity\\":0.3},{\\"height\\":69}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"flexShrink\\":1,\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9ca2a8\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingTop\\":8,\\"paddingHorizontal\\":12}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6d6d72\\"}]},\\"children\\":[\\"Chats\\"]}]}]}]}]}]}"`;
 

From d6cffabf5ed06eb256120b219c898411566ca915 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Thu, 17 Mar 2022 16:18:27 -0300
Subject: [PATCH 4/6] fix IListContainer

---
 app/containers/List/ListContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/containers/List/ListContainer.tsx b/app/containers/List/ListContainer.tsx
index deb9c8a7109..6465efc21bd 100644
--- a/app/containers/List/ListContainer.tsx
+++ b/app/containers/List/ListContainer.tsx
@@ -11,7 +11,7 @@ const styles = StyleSheet.create({
 });
 
 interface IListContainer {
-	children: React.ReactNode;
+	children: React.ReactElement | React.ReactElement[] | (React.ReactElement | null)[] | null;
 	testID?: string;
 }
 const ListContainer = React.memo(({ children, ...props }: IListContainer) => (

From aed8717c9ef33e1f6ca00bf48ce6c6e231988d04 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Thu, 17 Mar 2022 16:30:45 -0300
Subject: [PATCH 5/6] fix type of childrens

---
 app/containers/List/ListContainer.tsx | 2 +-
 app/containers/List/ListSection.tsx   | 2 +-
 app/views/ScreenLockConfigView.tsx    | 2 +-
 app/views/ThemeView.tsx               | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/containers/List/ListContainer.tsx b/app/containers/List/ListContainer.tsx
index 6465efc21bd..349c71beed1 100644
--- a/app/containers/List/ListContainer.tsx
+++ b/app/containers/List/ListContainer.tsx
@@ -11,7 +11,7 @@ const styles = StyleSheet.create({
 });
 
 interface IListContainer {
-	children: React.ReactElement | React.ReactElement[] | (React.ReactElement | null)[] | null;
+	children: (React.ReactElement | null)[] | React.ReactElement | null;
 	testID?: string;
 }
 const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
diff --git a/app/containers/List/ListSection.tsx b/app/containers/List/ListSection.tsx
index e84568bf470..860f4252cad 100644
--- a/app/containers/List/ListSection.tsx
+++ b/app/containers/List/ListSection.tsx
@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
 });
 
 interface IListSection {
-	children: React.ReactNode;
+	children: (React.ReactElement | null)[] | React.ReactElement | null;
 	title?: string;
 	translateTitle?: boolean;
 }
diff --git a/app/views/ScreenLockConfigView.tsx b/app/views/ScreenLockConfigView.tsx
index e7ae0cf455f..50f2cde84b8 100644
--- a/app/views/ScreenLockConfigView.tsx
+++ b/app/views/ScreenLockConfigView.tsx
@@ -223,7 +223,7 @@ class ScreenLockConfigView extends React.Component<IScreenLockConfigViewProps, I
 		return (
 			<List.Section>
 				<List.Separator />
-				{items.map(item => this.renderItem({ item }))}
+				<>{items.map(item => this.renderItem({ item }))}</>
 			</List.Section>
 		);
 	};
diff --git a/app/views/ThemeView.tsx b/app/views/ThemeView.tsx
index b3862bed264..5bc365d3584 100644
--- a/app/views/ThemeView.tsx
+++ b/app/views/ThemeView.tsx
@@ -131,11 +131,11 @@ class ThemeView extends React.Component<IThemeViewProps> {
 				<List.Container>
 					<List.Section title='Theme'>
 						<List.Separator />
-						{themeGroup.map(item => this.renderItem({ item }))}
+						<>{themeGroup.map(item => this.renderItem({ item }))}</>
 					</List.Section>
 					<List.Section title='Dark_level'>
 						<List.Separator />
-						{darkGroup.map(item => this.renderItem({ item }))}
+						<>{darkGroup.map(item => this.renderItem({ item }))}</>
 					</List.Section>
 				</List.Container>
 			</SafeAreaView>

From ecad942ac05700ab797dde261e0da402f797af40 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <reinaldonetof@hotmail.com>
Date: Fri, 18 Mar 2022 10:18:10 -0300
Subject: [PATCH 6/6] minor tweak

---
 app/containers/List/ListItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
index a281c87138c..c09266a418c 100644
--- a/app/containers/List/ListItem.tsx
+++ b/app/containers/List/ListItem.tsx
@@ -126,7 +126,7 @@ interface IListItemButton {
 	underlayColor?: string;
 }
 
-const Button = React.memo<IListButtonPress>(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
+const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
 	<Touch
 		onPress={() => onPress(props.title)}
 		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
@@ -142,7 +142,7 @@ interface IListItem extends Omit<IListItemContent, 'theme'>, Omit<IListItemButto
 	onPress?: Function;
 }
 
-const ListItem = React.memo<IListItem>(({ ...props }: IListItem) => {
+const ListItem = React.memo(({ ...props }: IListItem) => {
 	const { theme } = useTheme();
 
 	if (props.onPress) {