index.tsx 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import React, { FC, ReactNode } from 'react';
  2. import { Text, TouchableOpacity, View } from 'react-native';
  3. import { CommonActions, useNavigation } from '@react-navigation/native';
  4. import { styles } from './style';
  5. import ChevronLeft from '../../../assets/icons/chevron-left.svg';
  6. import CloseSvg from '../../../assets/icons/close.svg';
  7. import { NAVIGATION_PAGES } from 'src/types';
  8. import { Colors } from 'src/theme';
  9. type Props = {
  10. label: any;
  11. rightElement?: ReactNode;
  12. shouldClose?: boolean;
  13. textColor?: string;
  14. };
  15. export const Header: FC<Props> = ({
  16. label,
  17. rightElement,
  18. shouldClose,
  19. textColor = Colors.DARK_BLUE
  20. }) => {
  21. const navigation = useNavigation();
  22. const handlePress = () => {
  23. if (shouldClose) {
  24. navigation.dispatch(
  25. CommonActions.reset({
  26. index: 1,
  27. routes: [{ name: NAVIGATION_PAGES.IN_APP }]
  28. })
  29. );
  30. } else {
  31. navigation.goBack();
  32. }
  33. };
  34. // navigation.setOptions() TODO
  35. return (
  36. <View style={styles.wrapper}>
  37. <TouchableOpacity onPress={handlePress}>
  38. <View style={styles.chevronWrapper}>
  39. {shouldClose ? <CloseSvg /> : <ChevronLeft fill={Colors.DARK_BLUE} />}
  40. </View>
  41. </TouchableOpacity>
  42. <Text style={[styles.label, { color: textColor }]}>{label}</Text>
  43. {rightElement ? <View>{rightElement}</View> : <View style={styles.placeholder} />}
  44. </View>
  45. );
  46. };