diff --git a/app/containers/HeaderButton/Common.tsx b/app/containers/HeaderButton/Common.tsx index 0877fb4c..0c443a71 100644 --- a/app/containers/HeaderButton/Common.tsx +++ b/app/containers/HeaderButton/Common.tsx @@ -6,20 +6,22 @@ import Container from './HeaderButtonContainer'; import Item from './HeaderButtonItem'; interface IHeaderButtonCommon { - navigation: any; - onPress?(): void; + navigation?: any; // TODO: Evaluate proper type + onPress?: () => void; testID?: string; } // Left -export const Drawer = React.memo(({ navigation, testID, ...props }: Partial) => ( - - navigation.toggleDrawer()} testID={testID} {...props} /> - -)); +export const Drawer = React.memo( + ({ navigation, testID, onPress = navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => ( + + + + ) +); export const CloseModal = React.memo( - ({ navigation, testID, onPress = () => navigation.pop(), ...props }: IHeaderButtonCommon) => ( + ({ navigation, testID, onPress = () => navigation?.pop(), ...props }: IHeaderButtonCommon) => ( @@ -29,9 +31,9 @@ export const CloseModal = React.memo( export const CancelModal = React.memo(({ onPress, testID }: Partial) => ( {isIOS ? ( - + ) : ( - + )} )); @@ -39,22 +41,22 @@ export const CancelModal = React.memo(({ onPress, testID }: Partial) => ( - + )); -export const Download = React.memo(({ onPress, testID, ...props }: Partial) => ( +export const Download = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => ( - + )); -export const Preferences = React.memo(({ onPress, testID, ...props }: Partial) => ( +export const Preferences = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => ( - + )); -export const Legal = React.memo(({ navigation, testID }: Partial) => ( - navigation.navigate('LegalView')} testID={testID} /> +export const Legal = React.memo(({ navigation, testID, onPress = navigation?.navigate('LegalView') }: IHeaderButtonCommon) => ( + )); diff --git a/app/containers/HeaderButton/HeaderButtonContainer.tsx b/app/containers/HeaderButton/HeaderButtonContainer.tsx index f757d43d..abf6db9e 100644 --- a/app/containers/HeaderButton/HeaderButtonContainer.tsx +++ b/app/containers/HeaderButton/HeaderButtonContainer.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; interface IHeaderButtonContainer { - children: React.ReactNode; + children?: React.ReactElement | (React.ReactElement | null)[] | null; left?: boolean; } @@ -20,7 +20,7 @@ const styles = StyleSheet.create({ } }); -const Container = ({ children, left = false }: IHeaderButtonContainer) => ( +const Container = ({ children, left = false }: IHeaderButtonContainer): React.ReactElement => ( {children} ); diff --git a/app/containers/HeaderButton/HeaderButtonItem.tsx b/app/containers/HeaderButton/HeaderButtonItem.tsx index 08f6b5a3..987975db 100644 --- a/app/containers/HeaderButton/HeaderButtonItem.tsx +++ b/app/containers/HeaderButton/HeaderButtonItem.tsx @@ -3,16 +3,15 @@ import { Platform, StyleSheet, Text } from 'react-native'; import Touchable from 'react-native-platform-touchable'; import { CustomIcon } from '../../lib/Icons'; -import { withTheme } from '../../theme'; +import { useTheme } from '../../theme'; import { themes } from '../../constants/colors'; import sharedStyles from '../../views/Styles'; interface IHeaderButtonItem { title?: string; iconName?: string; - onPress: (arg: T) => void; + onPress?: (arg: T) => void; testID?: string; - theme?: string; badge?(): void; } @@ -40,19 +39,22 @@ const styles = StyleSheet.create({ } }); -const Item = ({ title, iconName, onPress, testID, theme, badge }: IHeaderButtonItem) => ( - - <> - {iconName ? ( - - ) : ( - {title} - )} - {badge ? badge() : null} - - -); +const Item = ({ title, iconName, onPress, testID, badge }: IHeaderButtonItem): React.ReactElement => { + const { theme } = useTheme(); + return ( + + <> + {iconName ? ( + + ) : ( + {title} + )} + {badge ? badge() : null} + + + ); +}; Item.displayName = 'HeaderButton.Item'; -export default withTheme(Item); +export default Item; diff --git a/app/containers/HeaderButton/HeaderButtonItemBadge.tsx b/app/containers/HeaderButton/HeaderButtonItemBadge.tsx index 9634c8bd..4bd2d268 100644 --- a/app/containers/HeaderButton/HeaderButtonItemBadge.tsx +++ b/app/containers/HeaderButton/HeaderButtonItemBadge.tsx @@ -15,6 +15,6 @@ const styles = StyleSheet.create({ } }); -export const Badge = ({ ...props }) => ; +export const Badge = ({ ...props }): React.ReactElement => ; export default Badge; diff --git a/storybook/stories/__snapshots__/HeaderButtons.storyshot b/storybook/stories/__snapshots__/HeaderButtons.storyshot index 35d84dca..0602a1bb 100644 --- a/storybook/stories/__snapshots__/HeaderButtons.storyshot +++ b/storybook/stories/__snapshots__/HeaderButtons.storyshot @@ -2,7 +2,7 @@ exports[`Storyshots Header Buttons badge 1`] = `"{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginLeft\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":10.5,\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"backgroundColor\\":\\"#1d74f5\\",\\"minWidth\\":16},{\\"padding\\":2,\\"position\\":\\"absolute\\",\\"right\\":-3,\\"top\\":-3,\\"borderRadius\\":10,\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":13,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"fontSize\\":10},{\\"color\\":\\"#ffffff\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"1\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":10.5,\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"backgroundColor\\":\\"#F5455C\\",\\"minWidth\\":16},{\\"padding\\":2,\\"position\\":\\"absolute\\",\\"right\\":-3,\\"top\\":-3,\\"borderRadius\\":10,\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":13,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"fontSize\\":10},{\\"color\\":\\"#ffffff\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"1\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"borderRadius\\":10.5,\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"backgroundColor\\":\\"#F38C39\\",\\"minWidth\\":16},{\\"padding\\":2,\\"position\\":\\"absolute\\",\\"right\\":-3,\\"top\\":-3,\\"borderRadius\\":10,\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"}]},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":13,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"600\\"},{\\"fontSize\\":10},{\\"color\\":\\"#ffffff\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"1\\"]}]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null}]}]}"`; -exports[`Storyshots Header Buttons common 1`] = `"[{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginLeft\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginLeft\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginLeft\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":17,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Cancel\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginRight\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginRight\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginRight\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginRight\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}]"`; +exports[`Storyshots Header Buttons common 1`] = `"[{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginLeft\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginLeft\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":true,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginLeft\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":17,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Cancel\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginRight\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginRight\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginRight\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginRight\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}]"`; exports[`Storyshots Header Buttons icons 1`] = `"[{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginLeft\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginRight\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]},{\\"type\\":\\"RNCSafeAreaView\\",\\"props\\":{\\"style\\":{\\"backgroundColor\\":\\"#EEEFF1\\"},\\"edges\\":[\\"top\\",\\"left\\",\\"right\\"]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":44,\\"flexDirection\\":\\"row\\",\\"justifyContent\\":\\"center\\",\\"elevation\\":4},{\\"borderBottomWidth\\":0.5,\\"borderBottomColor\\":\\"#B2B2B2\\",\\"elevation\\":0,\\"backgroundColor\\":\\"#EEEFF1\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginLeft\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":null},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\"},{\\"marginRight\\":5}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"hitSlop\\":{\\"top\\":5,\\"right\\":5,\\"bottom\\":5,\\"left\\":5},\\"focusable\\":false,\\"style\\":{\\"marginHorizontal\\":6,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}]"`;