diff --git a/.storybook/index.js b/.storybook/index.js index 69fb86031..8b41d94e9 100644 --- a/.storybook/index.js +++ b/.storybook/index.js @@ -6,11 +6,13 @@ import RNBootSplash from 'react-native-bootsplash'; import { selectServerRequest } from '../app/actions/server'; import { mockedStore as store } from '../app/reducers/mockedStore'; import database from '../app/lib/database'; +import { setUser } from '../app/actions/login'; RNBootSplash.hide(); const baseUrl = 'https://open.rocket.chat'; store.dispatch(selectServerRequest(baseUrl)); +store.dispatch(setUser({ id: 'abc', username: 'rocket.cat', name: 'Rocket Cat' })); database.setActiveDB(baseUrl); const StorybookUIRoot = getStorybookUI({}); diff --git a/.storybook/storybook.requires.js b/.storybook/storybook.requires.js index 1baa14ff4..975d6d3f9 100644 --- a/.storybook/storybook.requires.js +++ b/.storybook/storybook.requires.js @@ -30,6 +30,7 @@ const getStories = () => { require("../app/containers/markdown/new/NewMarkdown.stories.tsx"), require("../app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories.tsx"), require("../app/containers/message/Message.stories.tsx"), + require("../app/containers/ReactionsList/ReactionsList.stories.tsx"), require("../app/containers/RoomHeader/RoomHeader.stories.tsx"), require("../app/containers/RoomItem/RoomItem.stories.tsx"), require("../app/containers/SearchBox/SearchBox.stories.tsx"), diff --git a/__tests__/containers/ReactionsList/__snapshots__/ReactionsList.stories.storyshot b/__tests__/containers/ReactionsList/__snapshots__/ReactionsList.stories.storyshot new file mode 100644 index 000000000..a09e68fb8 --- /dev/null +++ b/__tests__/containers/ReactionsList/__snapshots__/ReactionsList.stories.storyshot @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots ReactionsList Reactions List Full Name 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingVertical\\":10,\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1},\\"testID\\":\\"reactionsList\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"reactionsTabBar\\"},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"horizontal\\":true,\\"showsHorizontalScrollIndicator\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":2,\\"borderColor\\":\\"#549df9\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-All\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"All\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":1,\\"borderColor\\":\\"#cbcbcc\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-:marioparty:\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":24,\\"height\\":24}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/marioparty.gif\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"2\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":1,\\"borderColor\\":\\"#cbcbcc\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-:react_rocket:\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":24,\\"height\\":24}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/react_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"2\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":1,\\"borderColor\\":\\"#cbcbcc\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-:nyan_rocket:\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":24,\\"height\\":24}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"1\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":1,\\"borderColor\\":\\"#cbcbcc\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-:grinning:\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontSize\\":20,\\"width\\":24,\\"height\\":24,\\"textAlign\\":\\"center\\",\\"color\\":\\"#fff\\"}},\\"children\\":[\\"😀\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"1\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":1,\\"borderColor\\":\\"#cbcbcc\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-:tada:\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontSize\\":20,\\"width\\":24,\\"height\\":24,\\"textAlign\\":\\"center\\",\\"color\\":\\"#fff\\"}},\\"children\\":[\\"🎉\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"1\\"]}]}]}]}]}]}]},{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"scrollEventThrottle\\":16,\\"horizontal\\":true,\\"pagingEnabled\\":true,\\"automaticallyAdjustContentInsets\\":false,\\"contentOffset\\":{\\"x\\":0},\\"scrollsToTop\\":false,\\"showsHorizontalScrollIndicator\\":false,\\"scrollEnabled\\":true,\\"directionalLockEnabled\\":true,\\"alwaysBounceVertical\\":false,\\"keyboardDismissMode\\":\\"on-drag\\",\\"collapsable\\":false,\\"style\\":{}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1},\\"testID\\":\\"reactionsListAllTab\\"},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"data\\":[{\\"emoji\\":\\":marioparty:\\",\\"_id\\":\\"marioparty\\",\\"usernames\\":[\\"rocket.cat\\",\\"diego.mello\\"],\\"names\\":[\\"Rocket Cat\\",\\"Diego Mello\\"]},{\\"emoji\\":\\":react_rocket:\\",\\"_id\\":\\"react_rocket\\",\\"usernames\\":[\\"rocket.cat\\",\\"diego.mello\\"],\\"names\\":[\\"Rocket Cat\\",\\"Diego Mello\\"]},{\\"emoji\\":\\":nyan_rocket:\\",\\"_id\\":\\"nyan_rocket\\",\\"usernames\\":[\\"rocket.cat\\"],\\"names\\":[\\"Rocket Cat\\"]},{\\"emoji\\":\\":grinning:\\",\\"_id\\":\\"grinning\\",\\"usernames\\":[\\"diego.mello\\"],\\"names\\":[\\"Diego Mello\\"]},{\\"emoji\\":\\":tada:\\",\\"_id\\":\\"tada\\",\\"usernames\\":[\\"diego.mello\\"],\\"names\\":[\\"Diego Mello\\"]}],\\"contentContainerStyle\\":{\\"marginHorizontal\\":12,\\"marginVertical\\":8,\\"paddingBottom\\":30},\\"viewabilityConfigCallbackPairs\\":[],\\"removeClippedSubviews\\":false,\\"scrollEventThrottle\\":50,\\"stickyHeaderIndices\\":[]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":6,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/marioparty.gif\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginLeft\\":8,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"2 people reacted\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"Rocket Cat and Diego Mello\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":6,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/react_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginLeft\\":8,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"2 people reacted\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"Rocket Cat and Diego Mello\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":6,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginLeft\\":8,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"1 person reacted\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"Rocket Cat\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":6,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontSize\\":30,\\"width\\":36,\\"textAlign\\":\\"center\\",\\"color\\":\\"#fff\\"}},\\"children\\":[\\"😀\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginLeft\\":8,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"1 person reacted\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"Diego Mello\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":6,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontSize\\":30,\\"width\\":36,\\"textAlign\\":\\"center\\",\\"color\\":\\"#fff\\"}},\\"children\\":[\\"🎉\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginLeft\\":8,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"1 person reacted\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"Diego Mello\\"]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"tabLabel\\":{\\"emoji\\":\\":marioparty:\\",\\"_id\\":\\"marioparty\\",\\"usernames\\":[\\"rocket.cat\\",\\"diego.mello\\"],\\"names\\":[\\"Rocket Cat\\",\\"Diego Mello\\"]}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"tabLabel\\":{\\"emoji\\":\\":react_rocket:\\",\\"_id\\":\\"react_rocket\\",\\"usernames\\":[\\"rocket.cat\\",\\"diego.mello\\"],\\"names\\":[\\"Rocket Cat\\",\\"Diego Mello\\"]}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"tabLabel\\":{\\"emoji\\":\\":nyan_rocket:\\",\\"_id\\":\\"nyan_rocket\\",\\"usernames\\":[\\"rocket.cat\\"],\\"names\\":[\\"Rocket Cat\\"]}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"tabLabel\\":{\\"emoji\\":\\":grinning:\\",\\"_id\\":\\"grinning\\",\\"usernames\\":[\\"diego.mello\\"],\\"names\\":[\\"Diego Mello\\"]}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"tabLabel\\":{\\"emoji\\":\\":tada:\\",\\"_id\\":\\"tada\\",\\"usernames\\":[\\"diego.mello\\"],\\"names\\":[\\"Diego Mello\\"]}},\\"children\\":null}]}]}]}]}]}]}"`; + +exports[`Storyshots ReactionsList Reactions List Story 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingVertical\\":10,\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1},\\"testID\\":\\"reactionsList\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flex\\":1},null]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"reactionsTabBar\\"},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"horizontal\\":true,\\"showsHorizontalScrollIndicator\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":2,\\"borderColor\\":\\"#549df9\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-All\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"All\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":1,\\"borderColor\\":\\"#cbcbcc\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-:marioparty:\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":24,\\"height\\":24}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/marioparty.gif\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"2\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":1,\\"borderColor\\":\\"#cbcbcc\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-:react_rocket:\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":24,\\"height\\":24}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/react_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"2\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":1,\\"borderColor\\":\\"#cbcbcc\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-:nyan_rocket:\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":24,\\"height\\":24}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"1\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":1,\\"borderColor\\":\\"#cbcbcc\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-:grinning:\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontSize\\":20,\\"width\\":24,\\"height\\":24,\\"textAlign\\":\\"center\\",\\"color\\":\\"#fff\\"}},\\"children\\":[\\"😀\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"1\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":125,\\"borderBottomWidth\\":1,\\"borderColor\\":\\"#cbcbcc\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"tabBarItem-:tada:\\",\\"accessible\\":true,\\"focusable\\":true,\\"style\\":{\\"opacity\\":1},\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"paddingBottom\\":4,\\"height\\":44,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\",\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontSize\\":20,\\"width\\":24,\\"height\\":24,\\"textAlign\\":\\"center\\",\\"color\\":\\"#fff\\"}},\\"children\\":[\\"🎉\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"marginLeft\\":4,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"1\\"]}]}]}]}]}]}]},{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"scrollEventThrottle\\":16,\\"horizontal\\":true,\\"pagingEnabled\\":true,\\"automaticallyAdjustContentInsets\\":false,\\"contentOffset\\":{\\"x\\":0},\\"scrollsToTop\\":false,\\"showsHorizontalScrollIndicator\\":false,\\"scrollEnabled\\":true,\\"directionalLockEnabled\\":true,\\"alwaysBounceVertical\\":false,\\"keyboardDismissMode\\":\\"on-drag\\",\\"collapsable\\":false,\\"style\\":{}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1},\\"testID\\":\\"reactionsListAllTab\\"},\\"children\\":[{\\"type\\":\\"RCTScrollView\\",\\"props\\":{\\"data\\":[{\\"emoji\\":\\":marioparty:\\",\\"_id\\":\\"marioparty\\",\\"usernames\\":[\\"rocket.cat\\",\\"diego.mello\\"],\\"names\\":[\\"Rocket Cat\\",\\"Diego Mello\\"]},{\\"emoji\\":\\":react_rocket:\\",\\"_id\\":\\"react_rocket\\",\\"usernames\\":[\\"rocket.cat\\",\\"diego.mello\\"],\\"names\\":[\\"Rocket Cat\\",\\"Diego Mello\\"]},{\\"emoji\\":\\":nyan_rocket:\\",\\"_id\\":\\"nyan_rocket\\",\\"usernames\\":[\\"rocket.cat\\"],\\"names\\":[\\"Rocket Cat\\"]},{\\"emoji\\":\\":grinning:\\",\\"_id\\":\\"grinning\\",\\"usernames\\":[\\"diego.mello\\"],\\"names\\":[\\"Diego Mello\\"]},{\\"emoji\\":\\":tada:\\",\\"_id\\":\\"tada\\",\\"usernames\\":[\\"diego.mello\\"],\\"names\\":[\\"Diego Mello\\"]}],\\"contentContainerStyle\\":{\\"marginHorizontal\\":12,\\"marginVertical\\":8,\\"paddingBottom\\":30},\\"viewabilityConfigCallbackPairs\\":[],\\"removeClippedSubviews\\":false,\\"scrollEventThrottle\\":50,\\"stickyHeaderIndices\\":[]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":6,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/marioparty.gif\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginLeft\\":8,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"2 people reacted\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"rocket.cat and diego.mello\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":6,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/react_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginLeft\\":8,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"2 people reacted\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"rocket.cat and diego.mello\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":6,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":36,\\"height\\":36}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"/emoji-custom/nyan_rocket.png\\",\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"contain\\"},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginLeft\\":8,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"1 person reacted\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"rocket.cat\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":6,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontSize\\":30,\\"width\\":36,\\"textAlign\\":\\"center\\",\\"color\\":\\"#fff\\"}},\\"children\\":[\\"😀\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginLeft\\":8,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"1 person reacted\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"diego.mello\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":null},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginVertical\\":6,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"fontSize\\":30,\\"width\\":36,\\"textAlign\\":\\"center\\",\\"color\\":\\"#fff\\"}},\\"children\\":[\\"🎉\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginLeft\\":8,\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}]},\\"children\\":[\\"1 person reacted\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"diego.mello\\"]}]}]}]}]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"tabLabel\\":{\\"emoji\\":\\":marioparty:\\",\\"_id\\":\\"marioparty\\",\\"usernames\\":[\\"rocket.cat\\",\\"diego.mello\\"],\\"names\\":[\\"Rocket Cat\\",\\"Diego Mello\\"]}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"tabLabel\\":{\\"emoji\\":\\":react_rocket:\\",\\"_id\\":\\"react_rocket\\",\\"usernames\\":[\\"rocket.cat\\",\\"diego.mello\\"],\\"names\\":[\\"Rocket Cat\\",\\"Diego Mello\\"]}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"tabLabel\\":{\\"emoji\\":\\":nyan_rocket:\\",\\"_id\\":\\"nyan_rocket\\",\\"usernames\\":[\\"rocket.cat\\"],\\"names\\":[\\"Rocket Cat\\"]}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"tabLabel\\":{\\"emoji\\":\\":grinning:\\",\\"_id\\":\\"grinning\\",\\"usernames\\":[\\"diego.mello\\"],\\"names\\":[\\"Diego Mello\\"]}},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":750}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"tabLabel\\":{\\"emoji\\":\\":tada:\\",\\"_id\\":\\"tada\\",\\"usernames\\":[\\"diego.mello\\"],\\"names\\":[\\"Diego Mello\\"]}},\\"children\\":null}]}]}]}]}]}]}"`; diff --git a/app/containers/ReactionsList.tsx b/app/containers/ReactionsList.tsx deleted file mode 100644 index b7908c240..000000000 --- a/app/containers/ReactionsList.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import React from 'react'; -import { StyleSheet, Text, Pressable, View, ScrollView } from 'react-native'; -import ScrollableTabView from 'react-native-scrollable-tab-view'; -import { FlatList } from 'react-native-gesture-handler'; - -import Emoji from './message/Emoji'; -import { useTheme } from '../theme'; -import { TGetCustomEmoji } from '../definitions/IEmoji'; -import { IReaction } from '../definitions'; -import Avatar from './Avatar'; -import sharedStyles from '../views/Styles'; - -const MIN_TAB_WIDTH = 70; - -const styles = StyleSheet.create({ - reactionsListContainer: { height: '100%', width: '100%' }, - tabBarItem: { - paddingHorizontal: 10, - paddingBottom: 10, - justifyContent: 'center', - alignItems: 'center', - flexDirection: 'row' - }, - reactionCount: { marginLeft: 5 }, - emojiName: { margin: 10 }, - userItemContainer: { marginHorizontal: 10, marginVertical: 5, flexDirection: 'row' }, - usernameContainer: { marginHorizontal: 10, justifyContent: 'center' }, - usernameText: { fontSize: 17, ...sharedStyles.textMedium }, - standardEmojiStyle: { fontSize: 20, color: '#fff' }, - customEmojiStyle: { width: 25, height: 25 } -}); - -interface IReactionsListBase { - baseUrl: string; - getCustomEmoji: TGetCustomEmoji; -} - -interface IReactionsListProps extends IReactionsListBase { - reactions?: IReaction[]; - width: number; -} - -interface ITabBarItem extends IReactionsListBase { - tab: IReaction; - index: number; - goToPage?: (index: number) => void; -} -interface IReactionsTabBar extends IReactionsListBase { - activeTab?: number; - tabs?: IReaction[]; - goToPage?: (index: number) => void; - width: number; -} - -const TabBarItem = ({ tab, index, goToPage, baseUrl, getCustomEmoji }: ITabBarItem) => { - const { colors } = useTheme(); - return ( - { - goToPage?.(index); - }} - style={({ pressed }: { pressed: boolean }) => ({ - opacity: pressed ? 0.7 : 1 - })} - > - - - {tab.usernames.length} - - - ); -}; - -const ReactionsTabBar = ({ tabs, activeTab, goToPage, baseUrl, getCustomEmoji, width }: IReactionsTabBar) => { - const tabWidth = tabs && Math.max(width / tabs.length, MIN_TAB_WIDTH); - const { colors } = useTheme(); - return ( - - - {tabs?.map((tab, index) => { - const isActiveTab = activeTab === index; - return ( - - - - ); - })} - - - ); -}; - -const UsersList = ({ tabLabel }: { tabLabel: IReaction }) => { - const { colors } = useTheme(); - const { emoji, usernames } = tabLabel; - return ( - ( - - {emoji} - - )} - renderItem={({ item }) => ( - - - - {item} - - - )} - keyExtractor={item => item} - /> - ); -}; - -const ReactionsList = ({ reactions, baseUrl, getCustomEmoji, width }: IReactionsListProps): React.ReactElement => { - // sorting reactions in descending order on the basic of number of users reacted - const sortedReactions = reactions?.sort((reaction1, reaction2) => reaction2.usernames.length - reaction1.usernames.length); - - return ( - - }> - {sortedReactions?.map(reaction => ( - - ))} - - - ); -}; - -export default ReactionsList; diff --git a/app/containers/ReactionsList/AllTab.tsx b/app/containers/ReactionsList/AllTab.tsx new file mode 100644 index 000000000..4dfcbd2f0 --- /dev/null +++ b/app/containers/ReactionsList/AllTab.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import { Text, View, FlatList } from 'react-native'; + +import Emoji from '../message/Emoji'; +import { useTheme } from '../../theme'; +import { IReaction } from '../../definitions'; +import { TGetCustomEmoji } from '../../definitions/IEmoji'; +import I18n from '../../i18n'; +import styles from './styles'; +import { useAppSelector } from '../../lib/hooks'; + +interface IAllReactionsListItemProps { + getCustomEmoji: TGetCustomEmoji; + item: IReaction; +} + +interface IAllTabProps { + getCustomEmoji: TGetCustomEmoji; + tabLabel: IReaction; + reactions?: IReaction[]; +} + +const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemProps) => { + const { colors } = useTheme(); + const useRealName = useAppSelector(state => state.settings.UI_Use_Real_Name); + const server = useAppSelector(state => state.server.server); + const username = useAppSelector(state => state.login.user.username); + const count = item.usernames.length; + + let displayNames; + if (useRealName && item.names) { + displayNames = item.names + .slice(0, 3) + .map((name, index) => (item.usernames[index] === username ? I18n.t('you') : name)) + .join(', '); + } else { + displayNames = item.usernames + .slice(0, 3) + .map((otherUsername: string) => (username === otherUsername ? I18n.t('you') : otherUsername)) + .join(', '); + } + if (count > 3) { + displayNames = `${displayNames} ${I18n.t('and_more')} ${count - 3}`; + } else { + displayNames = displayNames.replace(/,(?=[^,]*$)/, ` ${I18n.t('and')}`); + } + return ( + + + + + {count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })} + + {displayNames} + + + ); +}; + +const AllTab = ({ reactions, getCustomEmoji }: IAllTabProps): React.ReactElement => ( + + } + keyExtractor={item => item.emoji} + /> + +); + +export default AllTab; diff --git a/app/containers/ReactionsList/ReactionsList.stories.tsx b/app/containers/ReactionsList/ReactionsList.stories.tsx new file mode 100644 index 000000000..50d99b8ae --- /dev/null +++ b/app/containers/ReactionsList/ReactionsList.stories.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { View } from 'react-native'; + +import { TGetCustomEmoji, IEmoji } from '../../definitions'; +import ReactionsList from '.'; +import { mockedStore as store } from '../../reducers/mockedStore'; +import { updateSettings } from '../../actions/settings'; + +const getCustomEmoji: TGetCustomEmoji = content => { + const customEmoji = { + marioparty: { name: content, extension: 'gif' }, + react_rocket: { name: content, extension: 'png' }, + nyan_rocket: { name: content, extension: 'png' } + }[content] as IEmoji; + return customEmoji; +}; + +const reactions = [ + { + emoji: ':marioparty:', + _id: 'marioparty', + usernames: ['rocket.cat', 'diego.mello'], + names: ['Rocket Cat', 'Diego Mello'] + }, + { + emoji: ':react_rocket:', + _id: 'react_rocket', + usernames: ['rocket.cat', 'diego.mello'], + names: ['Rocket Cat', 'Diego Mello'] + }, + { + emoji: ':nyan_rocket:', + _id: 'nyan_rocket', + usernames: ['rocket.cat'], + names: ['Rocket Cat'] + }, + { + emoji: ':grinning:', + _id: 'grinning', + usernames: ['diego.mello'], + names: ['Diego Mello'] + }, + { + emoji: ':tada:', + _id: 'tada', + usernames: ['diego.mello'], + names: ['Diego Mello'] + } +]; + +export const ReactionsListStory = () => { + store.dispatch(updateSettings('UI_Use_Real_Name', false)); + return ( + + + + ); +}; + +export const ReactionsListFullName = () => { + store.dispatch(updateSettings('UI_Use_Real_Name', true)); + return ( + + + + ); +}; + +export default { + title: 'ReactionsList' +}; diff --git a/app/containers/ReactionsList/ReactionsList.test.tsx b/app/containers/ReactionsList/ReactionsList.test.tsx new file mode 100644 index 000000000..004b4498f --- /dev/null +++ b/app/containers/ReactionsList/ReactionsList.test.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { fireEvent, render, within } from '@testing-library/react-native'; +import { Provider } from 'react-redux'; + +import ReactionsList from '.'; +import { mockedStore } from '../../reducers/mockedStore'; + +const getCustomEmoji = jest.fn(); +const reactions = [ + { + emoji: 'marioparty', + _id: 'marioparty', + usernames: ['rocket.cat', 'diego.mello'], + names: ['Rocket Cat', 'Diego Mello'] + }, + { + emoji: 'react_rocket', + _id: 'react_rocket', + usernames: ['rocket.cat', 'diego.mello'], + names: ['Rocket Cat', 'Diego Mello'] + }, + { + emoji: 'nyan_rocket', + _id: 'nyan_rocket', + usernames: ['rocket.cat'], + names: ['Rocket Cat'] + }, + { + emoji: 'grinning', + _id: 'grinning', + usernames: ['diego.mello'], + names: ['Diego Mello'] + } +]; + +const Render = () => ( + + + +); + +describe('ReactionsList', () => { + test('should render Reactions List', async () => { + const { findByTestId } = render(); + const ReactionsListView = await findByTestId('reactionsList'); + expect(ReactionsListView).toBeTruthy(); + }); + + test('should render tab bar', async () => { + const { findByTestId } = render(); + const AllTab = await findByTestId('reactionsTabBar'); + expect(AllTab).toBeTruthy(); + }); + + test('should render All tab', async () => { + const { findByTestId } = render(); + const AllTab = await findByTestId('reactionsListAllTab'); + expect(AllTab).toBeTruthy(); + }); + + test('correct tab on clicking tab item', async () => { + const { findByTestId } = render(); + const tab = await findByTestId(`tabBarItem-${reactions[0].emoji}`); + fireEvent.press(tab); + const usersList = await findByTestId(`usersList-${reactions[0].emoji}`); + expect(usersList).toBeTruthy(); + const emojiName = await within(usersList).getByTestId(`usersListEmojiName`); + expect(emojiName.props.children).toEqual(reactions[0].emoji); + }); + + test('should render correct number of reactions', async () => { + const { findByTestId } = render(); + const tab = await findByTestId(`tabBarItem-${reactions[0].emoji}`); + fireEvent.press(tab); + const usersList = await findByTestId(`usersList-${reactions[0].emoji}`); + const allReactions = await within(usersList).getAllByTestId('userItem'); + expect(allReactions).toHaveLength(reactions[0].usernames.length); + }); +}); diff --git a/app/containers/ReactionsList/ReactionsTabBar.tsx b/app/containers/ReactionsList/ReactionsTabBar.tsx new file mode 100644 index 000000000..cbb780110 --- /dev/null +++ b/app/containers/ReactionsList/ReactionsTabBar.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import { Text, Pressable, View, ScrollView } from 'react-native'; + +import Emoji from '../message/Emoji'; +import { useTheme } from '../../theme'; +import { IReaction } from '../../definitions'; +import { TGetCustomEmoji } from '../../definitions/IEmoji'; +import I18n from '../../i18n'; +import styles, { MIN_TAB_WIDTH } from './styles'; +import { useDimensions, useOrientation } from '../../dimensions'; +import { useAppSelector } from '../../lib/hooks'; + +interface ITabBarItem { + getCustomEmoji: TGetCustomEmoji; + tab: IReaction; + index: number; + goToPage?: (index: number) => void; +} +interface IReactionsTabBar { + getCustomEmoji: TGetCustomEmoji; + activeTab?: number; + tabs?: IReaction[]; + goToPage?: (index: number) => void; +} + +const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => { + const { colors } = useTheme(); + const server = useAppSelector(state => state.server.server); + return ( + { + goToPage?.(index); + }} + style={({ pressed }: { pressed: boolean }) => ({ + opacity: pressed ? 0.7 : 1 + })} + testID={`tabBarItem-${tab.emoji}`} + > + + {tab._id === 'All' ? ( + {I18n.t('All')} + ) : ( + <> + + {tab.usernames.length} + + )} + + + ); +}; + +const ReactionsTabBar = ({ tabs, activeTab, goToPage, getCustomEmoji }: IReactionsTabBar): React.ReactElement => { + const { isLandscape } = useOrientation(); + const { width } = useDimensions(); + const reactionsListWidth = isLandscape ? width / 2 : width; + const tabWidth = tabs && Math.max(reactionsListWidth / tabs.length, MIN_TAB_WIDTH); + const { colors } = useTheme(); + return ( + + + {tabs?.map((tab, index) => { + const isActiveTab = activeTab === index; + return ( + + + + ); + })} + + + ); +}; + +export default ReactionsTabBar; diff --git a/app/containers/ReactionsList/UsersList.tsx b/app/containers/ReactionsList/UsersList.tsx new file mode 100644 index 000000000..9723b051f --- /dev/null +++ b/app/containers/ReactionsList/UsersList.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { Text, View, FlatList } from 'react-native'; +import { useSelector } from 'react-redux'; + +import { useTheme } from '../../theme'; +import { IReaction, IApplicationState } from '../../definitions'; +import Avatar from '../Avatar'; +import styles from './styles'; + +const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement => { + const { colors } = useTheme(); + const useRealName = useSelector((state: IApplicationState) => state.settings.UI_Use_Real_Name); + + const { emoji, usernames, names } = tabLabel; + const users = + names?.length > 0 + ? usernames.map((username, index) => ({ username, name: names[index] })) + : usernames.map(username => ({ username, name: '' })); + + return ( + + + {emoji} + + + } + renderItem={({ item }) => ( + + + + + {useRealName && item.name ? item.name : item.username} + + + + )} + keyExtractor={item => item.username} + testID={`usersList-${emoji}`} + /> + ); +}; + +export default UsersList; diff --git a/app/containers/ReactionsList/index.tsx b/app/containers/ReactionsList/index.tsx new file mode 100644 index 000000000..ec55057ab --- /dev/null +++ b/app/containers/ReactionsList/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { View } from 'react-native'; +import ScrollableTabView from 'react-native-scrollable-tab-view'; + +import { TGetCustomEmoji } from '../../definitions/IEmoji'; +import { IReaction } from '../../definitions'; +import I18n from '../../i18n'; +import styles from './styles'; +import AllTab from './AllTab'; +import UsersList from './UsersList'; +import ReactionsTabBar from './ReactionsTabBar'; + +interface IReactionsListProps { + getCustomEmoji: TGetCustomEmoji; + reactions?: IReaction[]; +} + +const ReactionsList = ({ reactions, getCustomEmoji }: IReactionsListProps): React.ReactElement => { + // sorting reactions in descending order on the basic of number of users reacted + const sortedReactions = reactions?.sort((reaction1, reaction2) => reaction2.usernames.length - reaction1.usernames.length); + const allTabLabel = { emoji: I18n.t('All'), usernames: [], names: [], _id: 'All' }; + return ( + + }> + + {sortedReactions?.map(reaction => ( + + ))} + + + ); +}; + +export default ReactionsList; diff --git a/app/containers/ReactionsList/styles.ts b/app/containers/ReactionsList/styles.ts new file mode 100644 index 000000000..34885f216 --- /dev/null +++ b/app/containers/ReactionsList/styles.ts @@ -0,0 +1,88 @@ +import { StyleSheet } from 'react-native'; + +import sharedStyles from '../../views/Styles'; + +export const MIN_TAB_WIDTH = 70; + +export default StyleSheet.create({ + container: { + flex: 1 + }, + allTabContainer: { + flex: 1 + }, + tabBarItem: { + paddingBottom: 4, + height: 44, + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'row' + }, + listContainer: { + marginHorizontal: 12, + marginVertical: 8, + paddingBottom: 30 + }, + reactionCount: { + marginLeft: 4, + ...sharedStyles.textSemibold + }, + emojiNameContainer: { + marginVertical: 8 + }, + emojiName: { + fontSize: 14, + ...sharedStyles.textMedium + }, + listItemContainer: { + marginVertical: 6, + flexDirection: 'row', + alignItems: 'center' + }, + textContainer: { + flex: 1, + marginLeft: 8, + justifyContent: 'center' + }, + usernameText: { + fontSize: 16, + ...sharedStyles.textSemibold + }, + standardEmojiStyle: { + fontSize: 20, + width: 24, + height: 24, + textAlign: 'center', + color: '#fff' + }, + customEmojiStyle: { + width: 24, + height: 24 + }, + allTabItem: { + fontSize: 16, + ...sharedStyles.textSemibold + }, + allTabStandardEmojiStyle: { + fontSize: 30, + width: 36, + textAlign: 'center', + color: '#fff' + }, + allTabCustomEmojiStyle: { + width: 36, + height: 36 + }, + allListItemContainer: { + flexDirection: 'row', + alignItems: 'center' + }, + allListNPeopleReacted: { + fontSize: 14, + ...sharedStyles.textMedium + }, + allListWhoReacted: { + fontSize: 14, + ...sharedStyles.textRegular + } +}); diff --git a/app/containers/message/Attachments.tsx b/app/containers/message/Attachments.tsx index a581f194e..8731d1505 100644 --- a/app/containers/message/Attachments.tsx +++ b/app/containers/message/Attachments.tsx @@ -114,7 +114,16 @@ const Attachments: React.FC = React.memo( ); } - return ; + return ( + + ); }); return <>{attachmentsElements}; }, diff --git a/app/definitions/IReaction.ts b/app/definitions/IReaction.ts index a28f5d06e..113b3a0af 100644 --- a/app/definitions/IReaction.ts +++ b/app/definitions/IReaction.ts @@ -2,4 +2,5 @@ export interface IReaction { _id: string; emoji: string; usernames: string[]; + names: string[]; } diff --git a/app/lib/methods/helpers/normalizeMessage.ts b/app/lib/methods/helpers/normalizeMessage.ts index a0e7d6409..bb31d5858 100644 --- a/app/lib/methods/helpers/normalizeMessage.ts +++ b/app/lib/methods/helpers/normalizeMessage.ts @@ -38,7 +38,8 @@ export default (msg: any): IMessage | IThreadResult | null => { msg.reactions = Object.keys(msg.reactions).map(key => ({ _id: `${msg._id}${key}`, emoji: key, - usernames: msg.reactions ? msg.reactions[key].usernames : [] + usernames: msg.reactions ? msg.reactions[key].usernames : [], + names: msg.reactions ? msg.reactions[key].names : [] })); } if (msg.translations && Object.keys(msg.translations).length) { diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx index 1b6d4081e..4b76660a2 100644 --- a/app/views/RoomView/index.tsx +++ b/app/views/RoomView/index.tsx @@ -862,18 +862,11 @@ class RoomView extends React.Component { onReactionLongPress = (message: TAnyMessageModel) => { this.setState({ selectedMessage: message }); - const { showActionSheet, baseUrl, width } = this.props; + const { showActionSheet } = this.props; const { selectedMessage } = this.state; this.messagebox?.current?.closeEmojiAndAction(showActionSheet, { - children: ( - - ), - snaps: ['50%'], + children: , + snaps: ['50%', '80%'], enableContentPanningGesture: false }); }; diff --git a/e2e/tests/room/02-room.spec.ts b/e2e/tests/room/02-room.spec.ts index 266da5e27..7e449fe64 100644 --- a/e2e/tests/room/02-room.spec.ts +++ b/e2e/tests/room/02-room.spec.ts @@ -306,7 +306,7 @@ describe('Room screen', () => { .withTimeout(60000); }); - it('should show reaction picker on add reaction button pressed and have frequently used emoji, and dismiss review nag', async () => { + it('should show reaction picker on add reaction button pressed and have frequently used emoji', async () => { await element(by.id('message-add-reaction')).tap(); await waitFor(element(by.id('reaction-picker'))) .toExist() @@ -324,6 +324,19 @@ describe('Room screen', () => { .withTimeout(60000); }); + it('should ask for review', async () => { + await dismissReviewNag(); // TODO: Create a proper test for this elsewhere. + }); + + it('should open/close reactions list', async () => { + await element(by.id('message-reaction-:grinning:')).longPress(); + await waitFor(element(by.id('reactionsList'))) + .toExist() + .withTimeout(4000); + await expect(element(by.id('action-sheet-handle'))).toBeVisible(); + await element(by.id('action-sheet-handle')).swipe('down', 'fast', 0.5); + }); + it('should remove reaction', async () => { await element(by.id('message-reaction-:grinning:')).tap(); await waitFor(element(by.id('message-reaction-:grinning:'))) @@ -331,10 +344,6 @@ describe('Room screen', () => { .withTimeout(60000); }); - it('should ask for review', async () => { - await dismissReviewNag(); // TODO: Create a proper test for this elsewhere. - }); - it('should edit message', async () => { await mockMessage('edit'); await element(by[textMatcher](`${data.random}edit`))