From 6b8086aa55f364b015bc582db1237087692c03d0 Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Silva Date: Thu, 11 Aug 2022 11:30:11 -0300 Subject: [PATCH 01/22] [FIX] Markdown's ListItem not using the entered index (#4388) * fix ordered list number * update snapshot --- app/containers/ActionSheet/ActionSheet.tsx | 3 ++- app/containers/ReactionsList.tsx | 6 ++++-- app/containers/markdown/new/OrderedList.tsx | 11 +++++------ storybook/stories/__snapshots__/NewMarkdown.storyshot | 2 +- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx index e114b8e1c..94065dd84 100644 --- a/app/containers/ActionSheet/ActionSheet.tsx +++ b/app/containers/ActionSheet/ActionSheet.tsx @@ -142,7 +142,8 @@ const ActionSheet = React.memo( onChange={index => index === -1 && onClose()} // We need this to allow horizontal swipe gestures inside bottom sheet like in reaction picker enableContentPanningGesture={data?.enableContentPanningGesture ?? true} - {...androidTablet}> + {...androidTablet} + > )} diff --git a/app/containers/ReactionsList.tsx b/app/containers/ReactionsList.tsx index 10a1b3c80..b7908c240 100644 --- a/app/containers/ReactionsList.tsx +++ b/app/containers/ReactionsList.tsx @@ -62,7 +62,8 @@ const TabBarItem = ({ tab, index, goToPage, baseUrl, getCustomEmoji }: ITabBarIt }} style={({ pressed }: { pressed: boolean }) => ({ opacity: pressed ? 0.7 : 1 - })}> + })} + > + }} + > ); diff --git a/app/containers/markdown/new/OrderedList.tsx b/app/containers/markdown/new/OrderedList.tsx index b71c086ff..02965c214 100644 --- a/app/containers/markdown/new/OrderedList.tsx +++ b/app/containers/markdown/new/OrderedList.tsx @@ -4,20 +4,19 @@ import { OrderedList as OrderedListProps } from '@rocket.chat/message-parser'; import Inline from './Inline'; import styles from '../styles'; -import { themes } from '../../../lib/constants'; import { useTheme } from '../../../theme'; interface IOrderedListProps { value: OrderedListProps['value']; } -const OrderedList = ({ value }: IOrderedListProps) => { - const { theme } = useTheme(); +const OrderedList = ({ value }: IOrderedListProps): React.ReactElement => { + const { colors } = useTheme(); return ( - {value.map((item, index) => ( - - {index + 1}. + {value.map(item => ( + + {item.number}. ))} diff --git a/storybook/stories/__snapshots__/NewMarkdown.storyshot b/storybook/stories/__snapshots__/NewMarkdown.storyshot index f2623f09b..fb20fd1bf 100644 --- a/storybook/stories/__snapshots__/NewMarkdown.storyshot +++ b/storybook/stories/__snapshots__/NewMarkdown.storyshot @@ -16,7 +16,7 @@ exports[`Storyshots NewMarkdown Katex 1`] = `"{\\"type\\":\\"View\\",\\"props\\" exports[`Storyshots NewMarkdown Links 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"rgb(242, 242, 242)\\"},null]},\\"children\\":[{\\"type\\":\\"RNSScreenContainer\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"RNSScreen\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"activityState\\":2,\\"collapsable\\":false,\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"closing\\":false,\\"gestureVelocityImpact\\":0.3,\\"transitionSpec\\":{\\"open\\":{\\"animation\\":\\"spring\\",\\"config\\":{\\"stiffness\\":1000,\\"damping\\":500,\\"mass\\":3,\\"overshootClamping\\":true,\\"restDisplacementThreshold\\":10,\\"restSpeedThreshold\\":10}},\\"close\\":{\\"animation\\":\\"spring\\",\\"config\\":{\\"stiffness\\":1000,\\"damping\\":500,\\"mass\\":3,\\"overshootClamping\\":true,\\"restDisplacementThreshold\\":10,\\"restSpeedThreshold\\":10}}},\\"accessibilityElementsHidden\\":false,\\"importantForAccessibility\\":\\"auto\\",\\"style\\":[{\\"display\\":\\"flex\\"},{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"needsOffscreenAlphaCompositing\\":false,\\"collapsable\\":false,\\"style\\":{\\"flex\\":1,\\"transform\\":[{\\"translateX\\":0},{\\"translateX\\":0}]}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"overflow\\":\\"hidden\\"},[{\\"backgroundColor\\":\\"rgb(242, 242, 242)\\"},{\\"backgroundColor\\":\\"#ffffff\\"}]]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"column-reverse\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\"https://rocket.chat\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\"Markdown link\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"accessibilityElementsHidden\\":false,\\"importantForAccessibility\\":\\"auto\\",\\"style\\":null},\\"children\\":null}]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{\\"zIndex\\":1,\\"height\\":44,\\"position\\":\\"absolute\\",\\"top\\":0,\\"left\\":0,\\"right\\":0}},\\"children\\":null}]}]}]}"`; -exports[`Storyshots NewMarkdown Lists 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"rgb(242, 242, 242)\\"},null]},\\"children\\":[{\\"type\\":\\"RNSScreenContainer\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"RNSScreen\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"activityState\\":2,\\"collapsable\\":false,\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"closing\\":false,\\"gestureVelocityImpact\\":0.3,\\"transitionSpec\\":{\\"open\\":{\\"animation\\":\\"spring\\",\\"config\\":{\\"stiffness\\":1000,\\"damping\\":500,\\"mass\\":3,\\"overshootClamping\\":true,\\"restDisplacementThreshold\\":10,\\"restSpeedThreshold\\":10}},\\"close\\":{\\"animation\\":\\"spring\\",\\"config\\":{\\"stiffness\\":1000,\\"damping\\":500,\\"mass\\":3,\\"overshootClamping\\":true,\\"restDisplacementThreshold\\":10,\\"restSpeedThreshold\\":10}}},\\"accessibilityElementsHidden\\":false,\\"importantForAccessibility\\":\\"auto\\",\\"style\\":[{\\"display\\":\\"flex\\"},{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"needsOffscreenAlphaCompositing\\":false,\\"collapsable\\":false,\\"style\\":{\\"flex\\":1,\\"transform\\":[{\\"translateX\\":0},{\\"translateX\\":0}]}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"overflow\\":\\"hidden\\"},[{\\"backgroundColor\\":\\"rgb(242, 242, 242)\\"},{\\"backgroundColor\\":\\"#ffffff\\"}]]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"column-reverse\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Plain text \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Plain text \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"}]},\\"children\\":[\\"💡\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" italic \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" italic \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" bold \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" bold \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" strike \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" strike \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"#general\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\" link \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2},{\\"color\\":\\"#2f343d\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{},\\"children\\":[\\" inline code\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"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\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"1\\",\\". \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Plain text \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Plain text \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"}]},\\"children\\":[\\"💡\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" italic \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" italic \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" bold \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" bold \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" strike \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" strike \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"#general\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\" link \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2},{\\"color\\":\\"#2f343d\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{},\\"children\\":[\\" inline code\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"2\\",\\". \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"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\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- [x] \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Plain text \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Plain text \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"}]},\\"children\\":[\\"💡\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" italic \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" italic \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" bold \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" bold \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" strike \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" strike \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"#general\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\" link \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2},{\\"color\\":\\"#2f343d\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{},\\"children\\":[\\" inline code\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- [ ] \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"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\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"accessibilityElementsHidden\\":false,\\"importantForAccessibility\\":\\"auto\\",\\"style\\":null},\\"children\\":null}]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{\\"zIndex\\":1,\\"height\\":44,\\"position\\":\\"absolute\\",\\"top\\":0,\\"left\\":0,\\"right\\":0}},\\"children\\":null}]}]}]}"`; +exports[`Storyshots NewMarkdown Lists 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"rgb(242, 242, 242)\\"},null]},\\"children\\":[{\\"type\\":\\"RNSScreenContainer\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"RNSScreen\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"activityState\\":2,\\"collapsable\\":false,\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"closing\\":false,\\"gestureVelocityImpact\\":0.3,\\"transitionSpec\\":{\\"open\\":{\\"animation\\":\\"spring\\",\\"config\\":{\\"stiffness\\":1000,\\"damping\\":500,\\"mass\\":3,\\"overshootClamping\\":true,\\"restDisplacementThreshold\\":10,\\"restSpeedThreshold\\":10}},\\"close\\":{\\"animation\\":\\"spring\\",\\"config\\":{\\"stiffness\\":1000,\\"damping\\":500,\\"mass\\":3,\\"overshootClamping\\":true,\\"restDisplacementThreshold\\":10,\\"restSpeedThreshold\\":10}}},\\"accessibilityElementsHidden\\":false,\\"importantForAccessibility\\":\\"auto\\",\\"style\\":[{\\"display\\":\\"flex\\"},{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"needsOffscreenAlphaCompositing\\":false,\\"collapsable\\":false,\\"style\\":{\\"flex\\":1,\\"transform\\":[{\\"translateX\\":0},{\\"translateX\\":0}]}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"overflow\\":\\"hidden\\"},[{\\"backgroundColor\\":\\"rgb(242, 242, 242)\\"},{\\"backgroundColor\\":\\"#ffffff\\"}]]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"column-reverse\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Plain text \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Plain text \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"}]},\\"children\\":[\\"💡\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" italic \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" italic \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" bold \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" bold \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" strike \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" strike \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"#general\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\" link \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2},{\\"color\\":\\"#2f343d\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{},\\"children\\":[\\" inline code\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"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\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\". \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Plain text \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Plain text \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"}]},\\"children\\":[\\"💡\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" italic \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" italic \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" bold \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" bold \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" strike \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" strike \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"#general\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\" link \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2},{\\"color\\":\\"#2f343d\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{},\\"children\\":[\\" inline code\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\". \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"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\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- [x] \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Plain text \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"Plain text \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#2f343d\\"},{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"}]},\\"children\\":[\\"💡\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontStyle\\":\\"italic\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" italic \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" italic \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"700\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" bold \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" bold \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textDecorationLine\\":\\"line-through\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" strike \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" strike \\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"#general\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#1d74f5\\"}]},\\"children\\":[\\" link \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Courier New\\",\\"fontWeight\\":\\"400\\",\\"borderWidth\\":1,\\"borderRadius\\":4,\\"paddingLeft\\":2,\\"paddingTop\\":2},{\\"color\\":\\"#2f343d\\",\\"backgroundColor\\":\\"#f1f2f4\\",\\"borderColor\\":\\"#e1e5e8\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{},\\"children\\":[\\" inline code\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"- [ ] \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"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\\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"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\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"accessibilityElementsHidden\\":false,\\"importantForAccessibility\\":\\"auto\\",\\"style\\":null},\\"children\\":null}]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{\\"zIndex\\":1,\\"height\\":44,\\"position\\":\\"absolute\\",\\"top\\":0,\\"left\\":0,\\"right\\":0}},\\"children\\":null}]}]}]}"`; exports[`Storyshots NewMarkdown Mentions 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"RNCSafeAreaProvider\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"backgroundColor\\":\\"rgb(242, 242, 242)\\"},null]},\\"children\\":[{\\"type\\":\\"RNSScreenContainer\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"RNSScreen\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"activityState\\":2,\\"collapsable\\":false,\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"collapsable\\":false,\\"style\\":{\\"opacity\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"closing\\":false,\\"gestureVelocityImpact\\":0.3,\\"transitionSpec\\":{\\"open\\":{\\"animation\\":\\"spring\\",\\"config\\":{\\"stiffness\\":1000,\\"damping\\":500,\\"mass\\":3,\\"overshootClamping\\":true,\\"restDisplacementThreshold\\":10,\\"restSpeedThreshold\\":10}},\\"close\\":{\\"animation\\":\\"spring\\",\\"config\\":{\\"stiffness\\":1000,\\"damping\\":500,\\"mass\\":3,\\"overshootClamping\\":true,\\"restDisplacementThreshold\\":10,\\"restSpeedThreshold\\":10}}},\\"accessibilityElementsHidden\\":false,\\"importantForAccessibility\\":\\"auto\\",\\"style\\":[{\\"display\\":\\"flex\\"},{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"needsOffscreenAlphaCompositing\\":false,\\"collapsable\\":false,\\"style\\":{\\"flex\\":1,\\"transform\\":[{\\"translateX\\":0},{\\"translateX\\":0}]}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"overflow\\":\\"hidden\\"},[{\\"backgroundColor\\":\\"rgb(242, 242, 242)\\"},{\\"backgroundColor\\":\\"#ffffff\\"}]]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"flexDirection\\":\\"column-reverse\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginHorizontal\\":15,\\"backgroundColor\\":\\"#ffffff\\",\\"marginVertical\\":50}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"rocket.cat\\"]}]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"flexShrink\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F3BE08\\"}]},\\"children\\":[\\"name\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F5455C\\"}]},\\"children\\":[\\"rocket.cat\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F38C39\\"}]},\\"children\\":[\\"here\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\" \\",\\"style\\":[{\\"fontSize\\":16,\\"flexShrink\\":1},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\" \\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#F38C39\\"}]},\\"children\\":[\\"all\\"]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"accessibilityElementsHidden\\":false,\\"importantForAccessibility\\":\\"auto\\",\\"style\\":null},\\"children\\":null}]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"pointerEvents\\":\\"box-none\\",\\"collapsable\\":false,\\"style\\":{\\"zIndex\\":1,\\"height\\":44,\\"position\\":\\"absolute\\",\\"top\\":0,\\"left\\":0,\\"right\\":0}},\\"children\\":null}]}]}]}"`; From a101d319e572562d09819a28163be536efe5be28 Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Silva Date: Thu, 11 Aug 2022 11:41:18 -0300 Subject: [PATCH 02/22] Chore: Migrate WithoutServerView to hooks (#4415) * migrate WithoutServerView to hooks * remove navigation options * minor tweak Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Co-authored-by: Reinaldo Neto --- app/share.tsx | 2 +- app/views/WithoutServersView.tsx | 48 +++++++++++++++----------------- 2 files changed, 24 insertions(+), 26 deletions(-) diff --git a/app/share.tsx b/app/share.tsx index f347c5ae5..7c6933912 100644 --- a/app/share.tsx +++ b/app/share.tsx @@ -72,7 +72,7 @@ const OutsideStack = () => { return ( - + ); }; diff --git a/app/views/WithoutServersView.tsx b/app/views/WithoutServersView.tsx index 91cfe1319..362229765 100644 --- a/app/views/WithoutServersView.tsx +++ b/app/views/WithoutServersView.tsx @@ -1,12 +1,12 @@ -import React from 'react'; +import React, { useLayoutEffect } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import ShareExtension from 'rn-extensions-share'; +import { useNavigation } from '@react-navigation/native'; import * as HeaderButton from '../containers/HeaderButton'; -import sharedStyles from './Styles'; import I18n from '../i18n'; -import { themes } from '../lib/constants'; -import { TSupportedThemes, withTheme } from '../theme'; +import { useTheme } from '../theme'; +import sharedStyles from './Styles'; const styles = StyleSheet.create({ container: { @@ -26,27 +26,25 @@ const styles = StyleSheet.create({ } }); -interface IWithoutServerViewProps { - theme: TSupportedThemes; -} +const WithoutServerView = (): React.ReactElement => { + const navigation = useNavigation(); + const { colors } = useTheme(); -class WithoutServerView extends React.Component { - static navigationOptions = () => ({ - title: 'Rocket.Chat', - headerLeft: () => - }); + useLayoutEffect(() => { + navigation.setOptions({ + title: 'Rocket.Chat', + headerLeft: () => + }); + }, [navigation]); - render() { - const { theme } = this.props; - return ( - - {I18n.t('Without_Servers')} - - {I18n.t('You_need_to_access_at_least_one_RocketChat_server_to_share_something')} - - - ); - } -} + return ( + + {I18n.t('Without_Servers')} + + {I18n.t('You_need_to_access_at_least_one_RocketChat_server_to_share_something')} + + + ); +}; -export default withTheme(WithoutServerView); +export default WithoutServerView; From 92111afa6a4d7474aec5857ca9b7e59455cdb6da Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Silva Date: Thu, 11 Aug 2022 11:50:03 -0300 Subject: [PATCH 03/22] Chore: Migrate E2EHowItWorksView to hooks (#4416) * remove navigation obligatory * remove the obliglatory to use theme with the withTheme HOC * migrate E2EHowItWorksView to hooks * remove navigate options * adds non-null assertion because theme is injected --- app/containers/HeaderButton/Common.tsx | 22 ++++++++--- app/containers/markdown/index.tsx | 28 ++++++------- app/stacks/InsideStack.tsx | 6 +-- app/stacks/MasterDetailStack/index.tsx | 2 +- app/views/E2EHowItWorksView.tsx | 55 ++++++++++++-------------- 5 files changed, 57 insertions(+), 56 deletions(-) diff --git a/app/containers/HeaderButton/Common.tsx b/app/containers/HeaderButton/Common.tsx index 82006f9ef..b9645dcbd 100644 --- a/app/containers/HeaderButton/Common.tsx +++ b/app/containers/HeaderButton/Common.tsx @@ -1,7 +1,8 @@ import React from 'react'; +import { StackActions, useNavigation } from '@react-navigation/native'; -import { isIOS } from '../../lib/methods/helpers'; import I18n from '../../i18n'; +import { isIOS } from '../../lib/methods/helpers'; import Container from './HeaderButtonContainer'; import Item, { IHeaderButtonItem } from './HeaderButtonItem'; @@ -18,13 +19,22 @@ export const Drawer = React.memo( ) ); -export const CloseModal = React.memo( - ({ navigation, testID, onPress = () => navigation?.pop(), ...props }: IHeaderButtonCommon) => ( +export const CloseModal = React.memo(({ testID, onPress, ...props }: IHeaderButtonCommon) => { + const { dispatch } = useNavigation(); + return ( - + { + if (onPress) return onPress(arg); + dispatch(StackActions.pop()); + }} + testID={testID} + {...props} + /> - ) -); + ); +}); export const CancelModal = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => ( diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx index 5243af2ac..1fd04eb36 100644 --- a/app/containers/markdown/index.tsx +++ b/app/containers/markdown/index.tsx @@ -22,14 +22,14 @@ import { formatText } from './formatText'; import { IUserMention, IUserChannel, TOnLinkPress } from './interfaces'; import { TGetCustomEmoji } from '../../definitions/IEmoji'; import { formatHyperlink } from './formatHyperlink'; -import { TSupportedThemes } from '../../theme'; +import { TSupportedThemes, withTheme } from '../../theme'; import { themes } from '../../lib/constants'; export { default as MarkdownPreview } from './Preview'; interface IMarkdownProps { msg?: string | null; - theme: TSupportedThemes; + theme?: TSupportedThemes; md?: MarkdownAST; mentions?: IUserMention[]; getCustomEmoji?: TGetCustomEmoji; @@ -158,9 +158,9 @@ class Markdown extends PureComponent { style={[ { ...styles.codeInline, - color: themes[theme].bodyText, - backgroundColor: themes[theme].bannerBackground, - borderColor: themes[theme].bannerBackground + color: themes[theme!].bodyText, + backgroundColor: themes[theme!].bannerBackground, + borderColor: themes[theme!].bannerBackground }, ...style ]} @@ -177,9 +177,9 @@ class Markdown extends PureComponent { style={[ { ...styles.codeBlock, - color: themes[theme].bodyText, - backgroundColor: themes[theme].bannerBackground, - borderColor: themes[theme].bannerBackground + color: themes[theme!].bodyText, + backgroundColor: themes[theme!].bannerBackground, + borderColor: themes[theme!].bannerBackground }, ...style ]} @@ -200,7 +200,7 @@ class Markdown extends PureComponent { return null; } return ( - + {children} ); @@ -209,7 +209,7 @@ class Markdown extends PureComponent { renderLink = ({ children, href }: any) => { const { theme, onLinkPress } = this.props; return ( - + {children} ); @@ -261,7 +261,7 @@ class Markdown extends PureComponent { // @ts-ignore const textStyle = styles[`heading${level}Text`]; return ( - + {children} ); @@ -289,13 +289,13 @@ class Markdown extends PureComponent { renderBlockQuote = ({ children }: { children: JSX.Element }) => { const { theme } = this.props; - return {children}; + return {children}; }; renderTable = ({ children, numColumns }: { children: JSX.Element; numColumns: number }) => { const { theme } = this.props; return ( - + {children} ); @@ -354,4 +354,4 @@ class Markdown extends PureComponent { } } -export default Markdown; +export default withTheme(Markdown); diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx index 982ee4d4d..5c077081c 100644 --- a/app/stacks/InsideStack.tsx +++ b/app/stacks/InsideStack.tsx @@ -282,11 +282,7 @@ const E2ESaveYourPasswordStackNavigator = () => { component={E2ESaveYourPasswordView} options={E2ESaveYourPasswordView.navigationOptions} /> - + ); }; diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx index ec385a649..c740c781f 100644 --- a/app/stacks/MasterDetailStack/index.tsx +++ b/app/stacks/MasterDetailStack/index.tsx @@ -200,7 +200,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => { component={E2ESaveYourPasswordView} options={E2ESaveYourPasswordView.navigationOptions} /> - + ; +const E2EHowItWorksView = (): React.ReactElement => { + const { setOptions } = useNavigation(); + const { colors } = useTheme(); + const { params } = useRoute>(); -class E2EHowItWorksView extends React.Component { - static navigationOptions = ({ route, navigation }: Pick) => { - const showCloseModal = route.params?.showCloseModal; - return { + useEffect(() => { + setOptions({ title: I18n.t('How_It_Works'), - headerLeft: showCloseModal ? () => : undefined - }; - }; + headerLeft: params?.showCloseModal ? () => : undefined + }); + }, []); - render() { - const { theme } = this.props; + const infoStyle = [styles.info, { color: colors.bodyText }]; - const infoStyle = [styles.info, { color: themes[theme].bodyText }]; + return ( + + + + + + + ); +}; - return ( - - - - - - - ); - } -} - -export default withTheme(E2EHowItWorksView); +export default E2EHowItWorksView; From 69349dee6eae1105905fbb083084ee53f31a0e79 Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Silva Date: Thu, 11 Aug 2022 11:59:40 -0300 Subject: [PATCH 04/22] Chore: Migrate E2EEnterYourPasswordView to hooks (#4423) * migrate E2EEnterYourPasswordView to hooks * remove navigation options * minor tweak Co-authored-by: Reinaldo Neto --- app/stacks/InsideStack.tsx | 6 +- app/stacks/MasterDetailStack/index.tsx | 6 +- app/views/E2EEnterYourPasswordView.tsx | 124 ++++++++++--------------- 3 files changed, 49 insertions(+), 87 deletions(-) diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx index 5c077081c..21b2004d8 100644 --- a/app/stacks/InsideStack.tsx +++ b/app/stacks/InsideStack.tsx @@ -296,11 +296,7 @@ const E2EEnterYourPasswordStackNavigator = () => { - + ); }; diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx index c740c781f..bba752d80 100644 --- a/app/stacks/MasterDetailStack/index.tsx +++ b/app/stacks/MasterDetailStack/index.tsx @@ -201,11 +201,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => { options={E2ESaveYourPasswordView.navigationOptions} /> - + { + const [password, setPassword] = useState(''); + const { colors } = useTheme(); + const navigation = useNavigation(); + const dispatch = useDispatch(); -type TE2EEnterYourPasswordViewProps = IBaseScreen; + useLayoutEffect(() => { + navigation.setOptions({ + headerLeft: () => , + title: I18n.t('Enter_Your_E2E_Password') + }); + }, [navigation]); -class E2EEnterYourPasswordView extends React.Component { - private passwordInput?: RNTextInput; - - static navigationOptions = ({ navigation }: Pick): StackNavigationOptions => ({ - headerLeft: () => , - title: I18n.t('Enter_Your_E2E_Password') - }); - - constructor(props: TE2EEnterYourPasswordViewProps) { - super(props); - this.state = { - password: '' - }; - } - - submit = () => { + const submit = () => { logEvent(events.E2E_ENTER_PW_SUBMIT); - const { password } = this.state; - const { dispatch } = this.props; dispatch(encryptionDecodeKey(password)); }; - render() { - const { password } = this.state; - const { theme } = this.props; - - return ( - - - + + + - - { - this.passwordInput = e; - }} - placeholder={I18n.t('Password')} - returnKeyType='send' - secureTextEntry - onSubmitEditing={this.submit} - onChangeText={value => this.setState({ password: value })} - testID='e2e-enter-your-password-view-password' - textContentType='password' - /> - + ) : null; const renderItem = ({ item }: { item: IActionSheetItem['item'] }) => ; diff --git a/app/containers/ActionSheet/Button.ts b/app/containers/ActionSheet/Button.ts deleted file mode 100644 index e742b89a4..000000000 --- a/app/containers/ActionSheet/Button.ts +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { TouchableOpacity } from 'react-native'; - -import { isAndroid } from '../../lib/methods/helpers'; -import Touch from '../../lib/methods/helpers/touch'; - -// Taken from https://github.com/rgommezz/react-native-scroll-bottom-sheet#touchables -export const Button: typeof React.Component = isAndroid ? Touch : TouchableOpacity; diff --git a/app/containers/ActionSheet/Item.tsx b/app/containers/ActionSheet/Item.tsx index cb39f2c1a..5268679ae 100644 --- a/app/containers/ActionSheet/Item.tsx +++ b/app/containers/ActionSheet/Item.tsx @@ -4,9 +4,9 @@ import { Text, View } from 'react-native'; import { themes } from '../../lib/constants'; import { CustomIcon } from '../CustomIcon'; import { useTheme } from '../../theme'; -import { Button } from './Button'; import { TActionSheetOptionsItem } from './Provider'; import styles from './styles'; +import Touch from '../Touch'; export interface IActionSheetItem { item: TActionSheetOptionsItem; @@ -21,12 +21,7 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => { }; return ( - + ); }); diff --git a/app/containers/ActionSheet/index.ts b/app/containers/ActionSheet/index.ts index d714d22bb..505094109 100644 --- a/app/containers/ActionSheet/index.ts +++ b/app/containers/ActionSheet/index.ts @@ -1,2 +1 @@ export * from './Provider'; -export * from './Button'; diff --git a/app/containers/BackgroundContainer/index.stories.js b/app/containers/BackgroundContainer/index.stories.js index 4d1abfb65..14eec29ac 100644 --- a/app/containers/BackgroundContainer/index.stories.js +++ b/app/containers/BackgroundContainer/index.stories.js @@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react-native'; import { ThemeContext } from '../../theme'; import { longText } from '../../../storybook/utils'; +import { themes } from '../../lib/constants'; import BackgroundContainer from '.'; const stories = storiesOf('BackgroundContainer', module); @@ -17,7 +18,7 @@ stories.add('text', () => ); stories.add('long text', () => ); const ThemeStory = ({ theme, ...props }) => ( - + ); diff --git a/app/containers/DirectoryItem/index.tsx b/app/containers/DirectoryItem/index.tsx index edba47866..5edf32637 100644 --- a/app/containers/DirectoryItem/index.tsx +++ b/app/containers/DirectoryItem/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Text, View, ViewStyle } from 'react-native'; -import Touch from '../../lib/methods/helpers/touch'; +import Touch from '../Touch'; import Avatar from '../Avatar'; import RoomTypeIcon from '../RoomTypeIcon'; import styles, { ROW_HEIGHT } from './styles'; @@ -49,7 +49,7 @@ const DirectoryItem = ({ }: IDirectoryItem): React.ReactElement => { const { theme } = useTheme(); return ( - + diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx index bd1459815..9e75ea876 100644 --- a/app/containers/List/ListItem.tsx +++ b/app/containers/List/ListItem.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { I18nManager, StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native'; -import Touch from '../../lib/methods/helpers/touch'; +import Touch from '../Touch'; import { themes } from '../../lib/constants'; import sharedStyles from '../../views/Styles'; import { TSupportedThemes, useTheme } from '../../theme'; @@ -139,7 +139,6 @@ const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props } style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }} underlayColor={underlayColor} enabled={!props.disabled} - theme={props.theme} > diff --git a/app/containers/LoginServices/ButtonService.tsx b/app/containers/LoginServices/ButtonService.tsx index 9975c9933..048cdcb77 100644 --- a/app/containers/LoginServices/ButtonService.tsx +++ b/app/containers/LoginServices/ButtonService.tsx @@ -2,20 +2,19 @@ import React from 'react'; import { Text, View } from 'react-native'; import { useTheme } from '../../theme'; -import Touch from '../../lib/methods/helpers/touch'; +import Touch from '../Touch'; import { CustomIcon } from '../CustomIcon'; import { IButtonService } from './interfaces'; import styles from './styles'; const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, icon }: IButtonService) => { - const { theme, colors } = useTheme(); + const { colors } = useTheme(); return ( diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx index e75d7ca7c..1e573dc07 100644 --- a/app/containers/MessageActions/Header.tsx +++ b/app/containers/MessageActions/Header.tsx @@ -7,10 +7,10 @@ import { CustomIcon } from '../CustomIcon'; import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode'; import CustomEmoji from '../EmojiPicker/CustomEmoji'; import database from '../../lib/database'; -import { Button } from '../ActionSheet'; import { useDimensions } from '../../dimensions'; import sharedStyles from '../../views/Styles'; import { TAnyMessageModel, TFrequentlyUsedEmojiModel } from '../../definitions'; +import Touch from '../Touch'; type TItem = TFrequentlyUsedEmojiModel | string; @@ -75,30 +75,28 @@ const HeaderItem = ({ item, onReaction, server, theme }: THeaderItem) => { const emojiModel = item as TFrequentlyUsedEmojiModel; const emoji = (emojiModel.id ? emojiModel.content : item) as string; return ( - + ); }; const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => ( - + ); const Header = React.memo(({ handleReaction, server, message, isMasterDetail }: IHeader) => { diff --git a/app/containers/Passcode/Base/Button.tsx b/app/containers/Passcode/Base/Button.tsx index 703082234..b768fb50c 100644 --- a/app/containers/Passcode/Base/Button.tsx +++ b/app/containers/Passcode/Base/Button.tsx @@ -3,7 +3,7 @@ import { Text } from 'react-native'; import styles from './styles'; import { themes } from '../../../lib/constants'; -import Touch from '../../../lib/methods/helpers/touch'; +import Touch from '../../Touch'; import { CustomIcon, TIconsName } from '../../CustomIcon'; import { useTheme } from '../../../theme'; @@ -25,7 +25,6 @@ const Button = React.memo(({ text, disabled, onPress, icon }: IPasscodeButton) = underlayColor={themes[theme].passcodeButtonActive} rippleColor={themes[theme].passcodeButtonActive} enabled={!disabled} - theme={theme} onPress={press} > {icon ? ( diff --git a/app/containers/RoomItem/Touchable.tsx b/app/containers/RoomItem/Touchable.tsx index f2b8d5e94..881a24cbf 100644 --- a/app/containers/RoomItem/Touchable.tsx +++ b/app/containers/RoomItem/Touchable.tsx @@ -14,7 +14,7 @@ import { PanGestureHandlerEventPayload } from 'react-native-gesture-handler'; -import Touch from '../../lib/methods/helpers/touch'; +import Touch from '../Touch'; import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles'; import { LeftActions, RightActions } from './Actions'; import { ITouchableProps } from './interfaces'; @@ -38,7 +38,7 @@ const Touchable = ({ swipeEnabled, displayMode }: ITouchableProps): React.ReactElement => { - const { theme, colors } = useTheme(); + const { colors } = useTheme(); const rowOffSet = useSharedValue(0); const transX = useSharedValue(0); @@ -221,7 +221,6 @@ const Touchable = ({ (({ children, onPress, underlayColor, ...props }, ref) => { + const { colors } = useTheme(); + + return ( + + {children} + + ); +}); + +export default Touch; diff --git a/app/lib/methods/helpers/touch.tsx b/app/lib/methods/helpers/touch.tsx deleted file mode 100644 index 87e12d3bf..000000000 --- a/app/lib/methods/helpers/touch.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { RectButton, RectButtonProps } from 'react-native-gesture-handler'; - -import { TSupportedThemes } from '../../../theme'; -import { themes } from '../../constants'; - -interface ITouchProps extends RectButtonProps { - children: React.ReactNode; - theme: TSupportedThemes; - accessibilityLabel?: string; - testID?: string; -} - -class Touch extends React.Component { - private ref: any; - - setNativeProps(props: ITouchProps): void { - this.ref.setNativeProps(props); - } - - getRef = (ref: RectButton): void => { - this.ref = ref; - }; - - render(): JSX.Element { - const { children, onPress, theme, underlayColor, ...props } = this.props; - - return ( - - {children} - - ); - } -} - -export default Touch; diff --git a/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx b/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx index 354022431..5ecdae1aa 100644 --- a/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx +++ b/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx @@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native'; import { themes } from '../../../lib/constants'; import { useTheme } from '../../../theme'; -import Touch from '../../../lib/methods/helpers/touch'; +import Touch from '../../../containers/Touch'; import { CustomIcon, TIconsName } from '../../../containers/CustomIcon'; import sharedStyles from '../../Styles'; @@ -34,7 +34,7 @@ const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) => const { theme } = useTheme(); return ( - + {text} {iconName ? : null} diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx index 198ded49d..43c84fc09 100644 --- a/app/views/DirectoryView/Options.tsx +++ b/app/views/DirectoryView/Options.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { Animated, Easing, Switch, Text, TouchableWithoutFeedback, View } from 'react-native'; -import Touch from '../../lib/methods/helpers/touch'; +import Touch from '../../containers/Touch'; import { CustomIcon, TIconsName } from '../../containers/CustomIcon'; import Check from '../../containers/Check'; import I18n from '../../i18n'; @@ -64,12 +64,7 @@ export default class DirectoryOptions extends PureComponent changeType(itemType)} - style={styles.dropdownItemButton} - theme={theme} - accessibilityLabel={I18n.t(text)} - > + changeType(itemType)} style={styles.dropdownItemButton} accessibilityLabel={I18n.t(text)}> {I18n.t(text)} @@ -97,7 +92,7 @@ export default class DirectoryOptions extends PureComponent - + - + { const { theme } = this.props; return ( - + ( - onPress(item.url)} theme={theme} testID={`server-history-${item.url}`}> + onPress(item.url)} testID={`server-history-${item.url}`}> {item.url} diff --git a/app/views/ProfileView/index.tsx b/app/views/ProfileView/index.tsx index 5d3109742..c428a0d4e 100644 --- a/app/views/ProfileView/index.tsx +++ b/app/views/ProfileView/index.tsx @@ -8,7 +8,7 @@ import { dequal } from 'dequal'; import omit from 'lodash/omit'; import { StackNavigationOptions } from '@react-navigation/stack'; -import Touch from '../../lib/methods/helpers/touch'; +import Touch from '../../containers/Touch'; import KeyboardView from '../../containers/KeyboardView'; import sharedStyles from '../Styles'; import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps'; @@ -376,7 +376,6 @@ class ProfileView extends React.Component onPress={onPress} style={[styles.avatarButton, { opacity: disabled ? 0.5 : 1 }, { backgroundColor: themes[theme].borderColor }]} enabled={!disabled} - theme={theme} > {child} diff --git a/app/views/RoomActionsView/index.tsx b/app/views/RoomActionsView/index.tsx index e8bbcb00b..df0707a70 100644 --- a/app/views/RoomActionsView/index.tsx +++ b/app/views/RoomActionsView/index.tsx @@ -28,7 +28,7 @@ import { ChatsStackParamList } from '../../stacks/types'; import { withTheme } from '../../theme'; import { showConfirmationAlert, showErrorAlert } from '../../lib/methods/helpers/info'; import log, { events, logEvent } from '../../lib/methods/helpers/log'; -import Touch from '../../lib/methods/helpers/touch'; +import Touch from '../../containers/Touch'; import sharedStyles from '../Styles'; import styles from './styles'; import { ERoomType } from '../../definitions/ERoomType'; @@ -807,7 +807,6 @@ class RoomActionsView extends React.Component diff --git a/app/views/RoomView/List/NavBottomFAB.tsx b/app/views/RoomView/List/NavBottomFAB.tsx index 895c1278a..695c4ba38 100644 --- a/app/views/RoomView/List/NavBottomFAB.tsx +++ b/app/views/RoomView/List/NavBottomFAB.tsx @@ -5,7 +5,7 @@ import Animated, { call, cond, greaterOrEq, useCode } from 'react-native-reanima import { themes } from '../../../lib/constants'; import { CustomIcon } from '../../../containers/CustomIcon'; import { useTheme } from '../../../theme'; -import Touch from '../../../lib/methods/helpers/touch'; +import Touch from '../../../containers/Touch'; import { hasNotch } from '../../../lib/methods/helpers'; const SCROLL_LIMIT = 200; @@ -63,7 +63,7 @@ const NavBottomFAB = ({ } return ( - + diff --git a/app/views/RoomView/LoadMore/LoadMore.stories.js b/app/views/RoomView/LoadMore/LoadMore.stories.js index 8d13d55ca..b186b0117 100644 --- a/app/views/RoomView/LoadMore/LoadMore.stories.js +++ b/app/views/RoomView/LoadMore/LoadMore.stories.js @@ -24,7 +24,7 @@ stories.add('basic', () => ( )); const ThemeStory = ({ theme }) => ( - + diff --git a/app/views/RoomView/LoadMore/index.tsx b/app/views/RoomView/LoadMore/index.tsx index bb88c525c..d08d82460 100644 --- a/app/views/RoomView/LoadMore/index.tsx +++ b/app/views/RoomView/LoadMore/index.tsx @@ -4,7 +4,7 @@ import { ActivityIndicator, StyleSheet, Text } from 'react-native'; import { MessageTypeLoad, themes } from '../../../lib/constants'; import { MessageType } from '../../../definitions'; import { useTheme } from '../../../theme'; -import Touch from '../../../lib/methods/helpers/touch'; +import Touch from '../../../containers/Touch'; import sharedStyles from '../../Styles'; import I18n from '../../../i18n'; @@ -59,7 +59,7 @@ const LoadMore = ({ } return ( - + {loading ? ( ) : ( diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx index b9bbdd6dc..0883cb7ba 100644 --- a/app/views/RoomView/index.tsx +++ b/app/views/RoomView/index.tsx @@ -9,7 +9,7 @@ import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context'; import { Subscription } from 'rxjs'; import { getRoutingConfig } from '../../lib/services/restApi'; -import Touch from '../../lib/methods/helpers/touch'; +import Touch from '../../containers/Touch'; import { replyBroadcast } from '../../actions/messages'; import database from '../../lib/database'; import Message from '../../containers/message'; @@ -1385,7 +1385,6 @@ class RoomView extends React.Component { onPress={this.resumeRoom} style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]} enabled={!loading} - theme={theme} > {I18n.t('Resume')} @@ -1407,7 +1406,6 @@ class RoomView extends React.Component { onPress={this.joinRoom} style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]} enabled={!loading} - theme={theme} > {I18n.t(this.isOmnichannel ? 'Take_it' : 'Join')} diff --git a/app/views/SidebarView/SidebarItem.tsx b/app/views/SidebarView/SidebarItem.tsx index 835bc406d..422d90fe4 100644 --- a/app/views/SidebarView/SidebarItem.tsx +++ b/app/views/SidebarView/SidebarItem.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Text, View } from 'react-native'; -import Touch from '../../lib/methods/helpers/touch'; +import Touch from '../../containers/Touch'; import { themes } from '../../lib/constants'; import { TSupportedThemes, withTheme } from '../../theme'; import styles from './styles'; @@ -21,7 +21,6 @@ const Item = React.memo(({ left, right, text, onPress, testID, current, theme }: key={testID} testID={testID} onPress={onPress} - theme={theme} style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]} > {left} diff --git a/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx b/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx index 01943e64b..95b2a819b 100644 --- a/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx +++ b/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../../theme'; -import Touch from '../../../lib/methods/helpers/touch'; +import Touch from '../../../containers/Touch'; import { CustomIcon, TIconsName } from '../../../containers/CustomIcon'; import sharedStyles from '../../Styles'; @@ -28,9 +28,9 @@ interface IDropdownItem { } const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) => { - const { colors, theme } = useTheme(); + const { colors } = useTheme(); return ( - + {text} {iconName ? : null} diff --git a/storybook/stories/List.js b/storybook/stories/List.js index 5b7ac2612..2f4ba3aad 100644 --- a/storybook/stories/List.js +++ b/storybook/stories/List.js @@ -8,6 +8,7 @@ import SafeAreaView from '../../app/containers/SafeAreaView'; import { longText } from '../utils'; import { ThemeContext } from '../../app/theme'; import { DimensionsContext } from '../../app/dimensions'; +import { themes } from '../../app/lib/constants'; const stories = storiesOf('List', module); @@ -176,7 +177,7 @@ const ListFull = () => ( ); const ThemeStory = ({ theme }) => ( - + ); diff --git a/storybook/stories/__snapshots__/List.storyshot b/storybook/stories/__snapshots__/List.storyshot index 4dfc69bfe..878af1273 100644 --- a/storybook/stories/__snapshots__/List.storyshot +++ b/storybook/stories/__snapshots__/List.storyshot @@ -16,11 +16,11 @@ exports[`Storyshots List with FlatList 1`] = `"{\\"type\\":\\"RNCSafeAreaView\\" 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\\",\\"colors\\":{\\"backgroundColor\\":\\"#ffffff\\",\\"focusedBackground\\":\\"#ffffff\\",\\"chatComponentBackground\\":\\"#f3f4f5\\",\\"auxiliaryBackground\\":\\"#efeff4\\",\\"bannerBackground\\":\\"#f1f2f4\\",\\"titleText\\":\\"#0d0e12\\",\\"bodyText\\":\\"#2f343d\\",\\"backdropColor\\":\\"#000000\\",\\"dangerColor\\":\\"#f5455c\\",\\"successColor\\":\\"#2de0a5\\",\\"borderColor\\":\\"#e1e5e8\\",\\"controlText\\":\\"#54585e\\",\\"auxiliaryText\\":\\"#9ca2a8\\",\\"infoText\\":\\"#6d6d72\\",\\"tintColor\\":\\"#1d74f5\\",\\"tintActive\\":\\"#549df9\\",\\"tintDisabled\\":\\"#88B4F5\\",\\"auxiliaryTintColor\\":\\"#6C727A\\",\\"actionTintColor\\":\\"#1d74f5\\",\\"separatorColor\\":\\"#cbcbcc\\",\\"navbarBackground\\":\\"#ffffff\\",\\"headerBorder\\":\\"#B2B2B2\\",\\"headerBackground\\":\\"#EEEFF1\\",\\"headerSecondaryBackground\\":\\"#ffffff\\",\\"headerTintColor\\":\\"#6C727A\\",\\"headerTitleColor\\":\\"#0C0D0F\\",\\"headerSecondaryText\\":\\"#1d74f5\\",\\"toastBackground\\":\\"#0C0D0F\\",\\"videoBackground\\":\\"#1f2329\\",\\"favoriteBackground\\":\\"#ffbb00\\",\\"hideBackground\\":\\"#54585e\\",\\"messageboxBackground\\":\\"#ffffff\\",\\"searchboxBackground\\":\\"#E6E6E7\\",\\"buttonBackground\\":\\"#414852\\",\\"buttonText\\":\\"#ffffff\\",\\"passcodeBackground\\":\\"#EEEFF1\\",\\"passcodeButtonActive\\":\\"#E4E7EA\\",\\"passcodeLockIcon\\":\\"#6C727A\\",\\"passcodePrimary\\":\\"#2F343D\\",\\"passcodeSecondary\\":\\"#6C727A\\",\\"passcodeDotEmpty\\":\\"#CBCED1\\",\\"passcodeDotFull\\":\\"#6C727A\\",\\"previewBackground\\":\\"#1F2329\\",\\"previewTintColor\\":\\"#f9f9f9\\",\\"backdropOpacity\\":0.3,\\"attachmentLoadingOpacity\\":0.7,\\"collapsibleQuoteBorder\\":\\"#CBCED1\\",\\"collapsibleChevron\\":\\"#6C727A\\",\\"cancelButton\\":\\"#E4E7EA\\",\\"unreadColor\\":\\"#6C727A\\",\\"tunreadColor\\":\\"#1d74f5\\",\\"mentionMeColor\\":\\"#F5455C\\",\\"mentionGroupColor\\":\\"#F38C39\\",\\"mentionOtherColor\\":\\"#F3BE08\\"}},\\"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\\":{\\"selectable\\":false,\\"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\\"},null,{\\"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\\":{\\"selectable\\":false,\\"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\\":{\\"selectable\\":false,\\"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\\"},null,{\\"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\\":{\\"selectable\\":false,\\"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\\":{\\"selectable\\":false,\\"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\\"},null,{\\"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\\":{\\"selectable\\":false,\\"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\\":{\\"selectable\\":false,\\"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\\"},null,{\\"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\\":{\\"selectable\\":false,\\"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\\"]}]}]}]}]}]}"`; -exports[`Storyshots List with black theme 1`] = `"{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},{\\"backgroundColor\\":\\"#080808\\"},null],\\"edges\\":[\\"right\\",\\"left\\"]},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"contentContainerStyle\\":{\\"paddingVertical\\":16},\\"scrollIndicatorInsets\\":{\\"right\\":1},\\"keyboardShouldPersistTaps\\":\\"always\\",\\"keyboardDismissMode\\":\\"interactive\\",\\"theme\\":\\"black\\"},\\"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\\":\\"#272728\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#b2b8c6\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#272728\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},{\\"opacity\\":0.3},{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#b2b8c6\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#272728\\"}]},\\"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\\":\\"#272728\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#b2b8c6\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#272728\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},{\\"opacity\\":0.3},{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#b2b8c6\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#272728\\"}]},\\"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\\"]}]}]}]}]}]}"`; +exports[`Storyshots List with black theme 1`] = `"{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},{\\"backgroundColor\\":\\"#080808\\"},null],\\"edges\\":[\\"right\\",\\"left\\"]},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"contentContainerStyle\\":{\\"paddingVertical\\":16},\\"scrollIndicatorInsets\\":{\\"right\\":1},\\"keyboardShouldPersistTaps\\":\\"always\\",\\"keyboardDismissMode\\":\\"interactive\\",\\"theme\\":\\"black\\",\\"colors\\":{\\"backgroundColor\\":\\"#000000\\",\\"focusedBackground\\":\\"#0d0d0d\\",\\"chatComponentBackground\\":\\"#16181a\\",\\"auxiliaryBackground\\":\\"#080808\\",\\"bannerBackground\\":\\"#1f2329\\",\\"titleText\\":\\"#f9f9f9\\",\\"bodyText\\":\\"#cbced1\\",\\"backdropColor\\":\\"#000000\\",\\"dangerColor\\":\\"#f5455c\\",\\"successColor\\":\\"#2de0a5\\",\\"borderColor\\":\\"#1f2329\\",\\"controlText\\":\\"#dadde6\\",\\"auxiliaryText\\":\\"#b2b8c6\\",\\"infoText\\":\\"#6d6d72\\",\\"tintColor\\":\\"#1e9bfe\\",\\"tintActive\\":\\"#76b7fc\\",\\"tintDisabled\\":\\"#88B4F5\\",\\"auxiliaryTintColor\\":\\"#f9f9f9\\",\\"actionTintColor\\":\\"#1e9bfe\\",\\"separatorColor\\":\\"#272728\\",\\"navbarBackground\\":\\"#0d0d0d\\",\\"headerBorder\\":\\"#323232\\",\\"headerBackground\\":\\"#0d0d0d\\",\\"headerSecondaryBackground\\":\\"#0d0d0d\\",\\"headerTintColor\\":\\"#f9f9f9\\",\\"headerTitleColor\\":\\"#f9f9f9\\",\\"headerSecondaryText\\":\\"#b2b8c6\\",\\"toastBackground\\":\\"#0C0D0F\\",\\"videoBackground\\":\\"#1f2329\\",\\"favoriteBackground\\":\\"#ffbb00\\",\\"hideBackground\\":\\"#54585e\\",\\"messageboxBackground\\":\\"#0d0d0d\\",\\"searchboxBackground\\":\\"#1f1f1f\\",\\"buttonBackground\\":\\"#414852\\",\\"buttonText\\":\\"#ffffff\\",\\"passcodeBackground\\":\\"#000000\\",\\"passcodeButtonActive\\":\\"#0E0D0D\\",\\"passcodeLockIcon\\":\\"#6C727A\\",\\"passcodePrimary\\":\\"#FFFFFF\\",\\"passcodeSecondary\\":\\"#CBCED1\\",\\"passcodeDotEmpty\\":\\"#CBCED1\\",\\"passcodeDotFull\\":\\"#6C727A\\",\\"previewBackground\\":\\"#000000\\",\\"previewTintColor\\":\\"#f9f9f9\\",\\"backdropOpacity\\":0.9,\\"attachmentLoadingOpacity\\":0.3,\\"collapsibleQuoteBorder\\":\\"#CBCED1\\",\\"collapsibleChevron\\":\\"#6C727A\\",\\"cancelButton\\":\\"#E4E7EA\\",\\"unreadColor\\":\\"#6C727A\\",\\"tunreadColor\\":\\"#1d74f5\\",\\"mentionMeColor\\":\\"#F5455C\\",\\"mentionGroupColor\\":\\"#F38C39\\",\\"mentionOtherColor\\":\\"#F3BE08\\"}},\\"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\\":\\"#272728\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#b2b8c6\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#272728\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},{\\"opacity\\":0.3},{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#b2b8c6\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#272728\\"}]},\\"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\\":\\"#272728\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#b2b8c6\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#272728\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},{\\"opacity\\":0.3},{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#b2b8c6\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#b2b8c6\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#272728\\"}]},\\"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\\"]}]}]}]}]}]}"`; exports[`Storyshots List with custom colors 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"contentContainerStyle\\":{\\"paddingVertical\\":16},\\"scrollIndicatorInsets\\":{\\"right\\":1},\\"keyboardShouldPersistTaps\\":\\"always\\",\\"keyboardDismissMode\\":\\"interactive\\",\\"theme\\":\\"light\\",\\"colors\\":{\\"backgroundColor\\":\\"#ffffff\\",\\"focusedBackground\\":\\"#ffffff\\",\\"chatComponentBackground\\":\\"#f3f4f5\\",\\"auxiliaryBackground\\":\\"#efeff4\\",\\"bannerBackground\\":\\"#f1f2f4\\",\\"titleText\\":\\"#0d0e12\\",\\"bodyText\\":\\"#2f343d\\",\\"backdropColor\\":\\"#000000\\",\\"dangerColor\\":\\"#f5455c\\",\\"successColor\\":\\"#2de0a5\\",\\"borderColor\\":\\"#e1e5e8\\",\\"controlText\\":\\"#54585e\\",\\"auxiliaryText\\":\\"#9ca2a8\\",\\"infoText\\":\\"#6d6d72\\",\\"tintColor\\":\\"#1d74f5\\",\\"tintActive\\":\\"#549df9\\",\\"tintDisabled\\":\\"#88B4F5\\",\\"auxiliaryTintColor\\":\\"#6C727A\\",\\"actionTintColor\\":\\"#1d74f5\\",\\"separatorColor\\":\\"#cbcbcc\\",\\"navbarBackground\\":\\"#ffffff\\",\\"headerBorder\\":\\"#B2B2B2\\",\\"headerBackground\\":\\"#EEEFF1\\",\\"headerSecondaryBackground\\":\\"#ffffff\\",\\"headerTintColor\\":\\"#6C727A\\",\\"headerTitleColor\\":\\"#0C0D0F\\",\\"headerSecondaryText\\":\\"#1d74f5\\",\\"toastBackground\\":\\"#0C0D0F\\",\\"videoBackground\\":\\"#1f2329\\",\\"favoriteBackground\\":\\"#ffbb00\\",\\"hideBackground\\":\\"#54585e\\",\\"messageboxBackground\\":\\"#ffffff\\",\\"searchboxBackground\\":\\"#E6E6E7\\",\\"buttonBackground\\":\\"#414852\\",\\"buttonText\\":\\"#ffffff\\",\\"passcodeBackground\\":\\"#EEEFF1\\",\\"passcodeButtonActive\\":\\"#E4E7EA\\",\\"passcodeLockIcon\\":\\"#6C727A\\",\\"passcodePrimary\\":\\"#2F343D\\",\\"passcodeSecondary\\":\\"#6C727A\\",\\"passcodeDotEmpty\\":\\"#CBCED1\\",\\"passcodeDotFull\\":\\"#6C727A\\",\\"previewBackground\\":\\"#1F2329\\",\\"previewTintColor\\":\\"#f9f9f9\\",\\"backdropOpacity\\":0.3,\\"attachmentLoadingOpacity\\":0.7,\\"collapsibleQuoteBorder\\":\\"#CBCED1\\",\\"collapsibleChevron\\":\\"#6C727A\\",\\"cancelButton\\":\\"#E4E7EA\\",\\"unreadColor\\":\\"#6C727A\\",\\"tunreadColor\\":\\"#1d74f5\\",\\"mentionMeColor\\":\\"#F5455C\\",\\"mentionGroupColor\\":\\"#F38C39\\",\\"mentionOtherColor\\":\\"#F3BE08\\"}},\\"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\\"},null,{\\"color\\":\\"red\\"}],\\"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\\":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\\"},null,{\\"color\\":\\"white\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Press me!\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#cbcbcc\\"}]},\\"children\\":null}]}]}"`; -exports[`Storyshots List with dark theme 1`] = `"{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},{\\"backgroundColor\\":\\"#07101e\\"},null],\\"edges\\":[\\"right\\",\\"left\\"]},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"contentContainerStyle\\":{\\"paddingVertical\\":16},\\"scrollIndicatorInsets\\":{\\"right\\":1},\\"keyboardShouldPersistTaps\\":\\"always\\",\\"keyboardDismissMode\\":\\"interactive\\",\\"theme\\":\\"dark\\"},\\"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\\":\\"#2b2b2d\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9297a2\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#2b2b2d\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},{\\"opacity\\":0.3},{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9297a2\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#2b2b2d\\"}]},\\"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\\":\\"#2b2b2d\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9297a2\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#2b2b2d\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},{\\"opacity\\":0.3},{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9297a2\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#2b2b2d\\"}]},\\"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\\"]}]}]}]}]}]}"`; +exports[`Storyshots List with dark theme 1`] = `"{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},{\\"backgroundColor\\":\\"#07101e\\"},null],\\"edges\\":[\\"right\\",\\"left\\"]},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"contentContainerStyle\\":{\\"paddingVertical\\":16},\\"scrollIndicatorInsets\\":{\\"right\\":1},\\"keyboardShouldPersistTaps\\":\\"always\\",\\"keyboardDismissMode\\":\\"interactive\\",\\"theme\\":\\"dark\\",\\"colors\\":{\\"backgroundColor\\":\\"#030b1b\\",\\"focusedBackground\\":\\"#0b182c\\",\\"chatComponentBackground\\":\\"#192132\\",\\"auxiliaryBackground\\":\\"#07101e\\",\\"bannerBackground\\":\\"#0e1f38\\",\\"titleText\\":\\"#f9f9f9\\",\\"bodyText\\":\\"#cbced1\\",\\"backdropColor\\":\\"#000000\\",\\"dangerColor\\":\\"#f5455c\\",\\"successColor\\":\\"#2de0a5\\",\\"borderColor\\":\\"#0f213d\\",\\"controlText\\":\\"#dadde6\\",\\"auxiliaryText\\":\\"#9297a2\\",\\"infoText\\":\\"#6D6D72\\",\\"tintColor\\":\\"#1d74f5\\",\\"tintActive\\":\\"#549df9\\",\\"tintDisabled\\":\\"#88B4F5\\",\\"auxiliaryTintColor\\":\\"#f9f9f9\\",\\"actionTintColor\\":\\"#1d74f5\\",\\"separatorColor\\":\\"#2b2b2d\\",\\"navbarBackground\\":\\"#0b182c\\",\\"headerBorder\\":\\"#2F3A4B\\",\\"headerBackground\\":\\"#0b182c\\",\\"headerSecondaryBackground\\":\\"#0b182c\\",\\"headerTintColor\\":\\"#f9f9f9\\",\\"headerTitleColor\\":\\"#f9f9f9\\",\\"headerSecondaryText\\":\\"#9297a2\\",\\"toastBackground\\":\\"#0C0D0F\\",\\"videoBackground\\":\\"#1f2329\\",\\"favoriteBackground\\":\\"#ffbb00\\",\\"hideBackground\\":\\"#54585e\\",\\"messageboxBackground\\":\\"#0b182c\\",\\"searchboxBackground\\":\\"#192d4d\\",\\"buttonBackground\\":\\"#414852\\",\\"buttonText\\":\\"#ffffff\\",\\"passcodeBackground\\":\\"#030C1B\\",\\"passcodeButtonActive\\":\\"#0B182C\\",\\"passcodeLockIcon\\":\\"#6C727A\\",\\"passcodePrimary\\":\\"#FFFFFF\\",\\"passcodeSecondary\\":\\"#CBCED1\\",\\"passcodeDotEmpty\\":\\"#CBCED1\\",\\"passcodeDotFull\\":\\"#6C727A\\",\\"previewBackground\\":\\"#030b1b\\",\\"previewTintColor\\":\\"#f9f9f9\\",\\"backdropOpacity\\":0.9,\\"attachmentLoadingOpacity\\":0.3,\\"collapsibleQuoteBorder\\":\\"#CBCED1\\",\\"collapsibleChevron\\":\\"#6C727A\\",\\"cancelButton\\":\\"#E4E7EA\\",\\"unreadColor\\":\\"#6C727A\\",\\"tunreadColor\\":\\"#1d74f5\\",\\"mentionMeColor\\":\\"#F5455C\\",\\"mentionGroupColor\\":\\"#F38C39\\",\\"mentionOtherColor\\":\\"#F3BE08\\"}},\\"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\\":\\"#2b2b2d\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9297a2\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#2b2b2d\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},{\\"opacity\\":0.3},{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9297a2\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#2b2b2d\\"}]},\\"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\\":\\"#2b2b2d\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},null,{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9297a2\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#2b2b2d\\"}]},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":12},{\\"opacity\\":0.3},{\\"height\\":92}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},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\\"},null,{\\"color\\":\\"#f9f9f9\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Chats\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9297a2\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"All\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#9297a2\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":0.5},null,{\\"backgroundColor\\":\\"#2b2b2d\\"}]},\\"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\\"]}]}]}]}]}]}"`; exports[`Storyshots List with icon 1`] = `"{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"contentContainerStyle\\":{\\"paddingVertical\\":16},\\"scrollIndicatorInsets\\":{\\"right\\":1},\\"keyboardShouldPersistTaps\\":\\"always\\",\\"keyboardDismissMode\\":\\"interactive\\",\\"theme\\":\\"light\\",\\"colors\\":{\\"backgroundColor\\":\\"#ffffff\\",\\"focusedBackground\\":\\"#ffffff\\",\\"chatComponentBackground\\":\\"#f3f4f5\\",\\"auxiliaryBackground\\":\\"#efeff4\\",\\"bannerBackground\\":\\"#f1f2f4\\",\\"titleText\\":\\"#0d0e12\\",\\"bodyText\\":\\"#2f343d\\",\\"backdropColor\\":\\"#000000\\",\\"dangerColor\\":\\"#f5455c\\",\\"successColor\\":\\"#2de0a5\\",\\"borderColor\\":\\"#e1e5e8\\",\\"controlText\\":\\"#54585e\\",\\"auxiliaryText\\":\\"#9ca2a8\\",\\"infoText\\":\\"#6d6d72\\",\\"tintColor\\":\\"#1d74f5\\",\\"tintActive\\":\\"#549df9\\",\\"tintDisabled\\":\\"#88B4F5\\",\\"auxiliaryTintColor\\":\\"#6C727A\\",\\"actionTintColor\\":\\"#1d74f5\\",\\"separatorColor\\":\\"#cbcbcc\\",\\"navbarBackground\\":\\"#ffffff\\",\\"headerBorder\\":\\"#B2B2B2\\",\\"headerBackground\\":\\"#EEEFF1\\",\\"headerSecondaryBackground\\":\\"#ffffff\\",\\"headerTintColor\\":\\"#6C727A\\",\\"headerTitleColor\\":\\"#0C0D0F\\",\\"headerSecondaryText\\":\\"#1d74f5\\",\\"toastBackground\\":\\"#0C0D0F\\",\\"videoBackground\\":\\"#1f2329\\",\\"favoriteBackground\\":\\"#ffbb00\\",\\"hideBackground\\":\\"#54585e\\",\\"messageboxBackground\\":\\"#ffffff\\",\\"searchboxBackground\\":\\"#E6E6E7\\",\\"buttonBackground\\":\\"#414852\\",\\"buttonText\\":\\"#ffffff\\",\\"passcodeBackground\\":\\"#EEEFF1\\",\\"passcodeButtonActive\\":\\"#E4E7EA\\",\\"passcodeLockIcon\\":\\"#6C727A\\",\\"passcodePrimary\\":\\"#2F343D\\",\\"passcodeSecondary\\":\\"#6C727A\\",\\"passcodeDotEmpty\\":\\"#CBCED1\\",\\"passcodeDotFull\\":\\"#6C727A\\",\\"previewBackground\\":\\"#1F2329\\",\\"previewTintColor\\":\\"#f9f9f9\\",\\"backdropOpacity\\":0.3,\\"attachmentLoadingOpacity\\":0.7,\\"collapsibleQuoteBorder\\":\\"#CBCED1\\",\\"collapsibleChevron\\":\\"#6C727A\\",\\"cancelButton\\":\\"#E4E7EA\\",\\"unreadColor\\":\\"#6C727A\\",\\"tunreadColor\\":\\"#1d74f5\\",\\"mentionMeColor\\":\\"#F5455C\\",\\"mentionGroupColor\\":\\"#F38C39\\",\\"mentionOtherColor\\":\\"#F3BE08\\"}},\\"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\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"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\\"},null,{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Icon Left\\"]}]}]}]}]},{\\"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\\"},null,{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Icon Right\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"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\\":{\\"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\\":{\\"paddingRight\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"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\\"},null,{\\"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\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},null]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"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\\":{\\"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\\"},null,{\\"color\\":\\"#0d0e12\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Show Action Indicator\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingLeft\\":12}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"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}]}]}"`; From 28043a2eb525efec53d917ad928dfa26a11d6b41 Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Silva Date: Wed, 17 Aug 2022 10:51:40 -0300 Subject: [PATCH 13/22] Chore: Migrate E2ESaveYourPasswordView to hooks (#4432) --- app/stacks/InsideStack.tsx | 6 +- app/stacks/MasterDetailStack/index.tsx | 6 +- app/views/E2ESaveYourPasswordView.tsx | 163 +++++++++---------------- 3 files changed, 62 insertions(+), 113 deletions(-) diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx index 21b2004d8..544edb32d 100644 --- a/app/stacks/InsideStack.tsx +++ b/app/stacks/InsideStack.tsx @@ -277,11 +277,7 @@ const E2ESaveYourPasswordStackNavigator = () => { - + ); diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx index bba752d80..e36b81ac9 100644 --- a/app/stacks/MasterDetailStack/index.tsx +++ b/app/stacks/MasterDetailStack/index.tsx @@ -195,11 +195,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => { - + diff --git a/app/views/E2ESaveYourPasswordView.tsx b/app/views/E2ESaveYourPasswordView.tsx index 6426ec2ca..ff6409b2d 100644 --- a/app/views/E2ESaveYourPasswordView.tsx +++ b/app/views/E2ESaveYourPasswordView.tsx @@ -1,7 +1,9 @@ -import React from 'react'; -import { ScrollView, StyleSheet, Text, View } from 'react-native'; import Clipboard from '@react-native-clipboard/clipboard'; -import { connect } from 'react-redux'; +import React, { useEffect, useLayoutEffect, useState } from 'react'; +import { ScrollView, StyleSheet, Text, View } from 'react-native'; +import { useDispatch } from 'react-redux'; +import { StackActions, useNavigation } from '@react-navigation/native'; +import { StackNavigationProp } from '@react-navigation/stack'; import { encryptionSetBanner } from '../actions/encryption'; import Button from '../containers/Button'; @@ -9,15 +11,15 @@ import * as HeaderButton from '../containers/HeaderButton'; import SafeAreaView from '../containers/SafeAreaView'; import StatusBar from '../containers/StatusBar'; import { LISTENER } from '../containers/Toast'; -import { IApplicationState, IBaseScreen } from '../definitions'; import I18n from '../i18n'; -import { E2E_RANDOM_PASSWORD_KEY, themes } from '../lib/constants'; -import UserPreferences from '../lib/methods/userPreferences'; -import { E2ESaveYourPasswordStackParamList } from '../stacks/types'; -import { withTheme } from '../theme'; +import { E2E_RANDOM_PASSWORD_KEY } from '../lib/constants'; +import { useAppSelector } from '../lib/hooks'; import EventEmitter from '../lib/methods/helpers/events'; import { events, logEvent } from '../lib/methods/helpers/log'; import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps'; +import UserPreferences from '../lib/methods/userPreferences'; +import { E2ESaveYourPasswordStackParamList } from '../stacks/types'; +import { useTheme } from '../theme'; import sharedStyles from './Styles'; const styles = StyleSheet.create({ @@ -54,123 +56,78 @@ const styles = StyleSheet.create({ } }); -interface IE2ESaveYourPasswordViewState { - password: string | null; -} +const E2ESaveYourPasswordView = () => { + const server = useAppSelector(state => state.server.server); + const navigation = useNavigation>(); + const dispatch = useDispatch(); + const [password, setPassword] = useState(''); + const { colors } = useTheme(); -interface IE2ESaveYourPasswordViewProps extends IBaseScreen { - server: string; -} + useLayoutEffect(() => { + navigation.setOptions({ + title: I18n.t('Save_Your_E2E_Password'), + headerLeft: () => + }); + }, [navigation]); -class E2ESaveYourPasswordView extends React.Component { - private mounted: boolean; - - static navigationOptions = ({ navigation }: Pick) => ({ - headerLeft: () => , - title: I18n.t('Save_Your_E2E_Password') - }); - - constructor(props: IE2ESaveYourPasswordViewProps) { - super(props); - this.mounted = false; - this.state = { password: '' }; - this.init(); - } - - componentDidMount() { - this.mounted = true; - } - - init = () => { - const { server } = this.props; - try { - // Set stored password on local state + useEffect(() => { + const init = () => { const password = UserPreferences.getString(`${server}-${E2E_RANDOM_PASSWORD_KEY}`); - if (this.mounted) { - this.setState({ password }); - } else { - // @ts-ignore - this.state.password = password; - } - } catch { - // Do nothing - } - }; + if (password) setPassword(password); + }; + init(); + }, []); - onSaved = () => { + const onSaved = () => { logEvent(events.E2E_SAVE_PW_SAVED); - const { navigation, server, dispatch } = this.props; - // Remove stored password UserPreferences.removeItem(`${server}-${E2E_RANDOM_PASSWORD_KEY}`); - // Hide encryption banner dispatch(encryptionSetBanner()); - navigation.pop(); + navigation.dispatch(StackActions.pop()); }; - onCopy = () => { + const onCopy = () => { logEvent(events.E2E_SAVE_PW_COPY); - const { password } = this.state; if (password) { Clipboard.setString(password); EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') }); } }; - onHowItWorks = () => { + const onHowItWorks = () => { logEvent(events.E2E_SAVE_PW_HOW_IT_WORKS); - const { navigation } = this.props; navigation.navigate('E2EHowItWorksView'); }; - render() { - const { password } = this.state; - const { theme } = this.props; - - return ( - - - - - - {I18n.t('Save_Your_Encryption_Password_warning')} - - - {I18n.t('Your_password_is')} - {password} -