Create component Header

Author: letrungduong113

src/components/Header/Header.props.ts

@@ -0,0 +1,3 @@
+import {Ionicons} from '@expo/vector-icons';
+
+export type IIconTypes = keyof typeof Ionicons.glyphMap;

src/components/Header/Header.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {NavigationService} from '../../services/navigation-service/navigationService';
+import {ColorDefault} from '../../themes/colors';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {IIconTypes} from './Header.props';
+import {Ionicons} from '@expo/vector-icons';
+
+type HeaderProps = {
+  leftIcon?: IIconTypes;
+  onPressLeft?: () => void;
+  rightIcon?: IIconTypes;
+  onPressRight?: () => void;
+  title?: string;
+  backEnabled?: boolean;
+  subRightIcon?: IIconTypes;
+  onPressSubRight?: () => void;
+  children?: React.ReactNode;
+};
+
+export const Header = (props: HeaderProps) => {
+  const {
+    leftIcon,
+    rightIcon,
+    title,
+    onPressLeft,
+    onPressRight,
+    backEnabled,
+    subRightIcon,
+    onPressSubRight,
+    children,
+  } = props;
+
+  const iconLeft = leftIcon || (backEnabled ? 'chevron-back-sharp' : undefined);
+
+  const onLeftPress =
+    onPressLeft || backEnabled ? NavigationService.goBack : undefined;
+
+  return (
+    <View
+      style={[styles.header, {backgroundColor: ColorDefault.navigationBar}]}>
+      <TouchableOpacity
+        disabled={!iconLeft}
+        onPress={onLeftPress}
+        style={styles.leftButton}>
+        {!!iconLeft && (
+          <Ionicons
+            name={iconLeft}
+            size={32}
+            style={{color: ColorDefault.primary}}
+          />
+        )}
+      </TouchableOpacity>
+      {!!subRightIcon && <View style={styles.leftButton} />}
+
+      {/* Title */}
+      {children || (
+        <Text style={[styles.titleText, {color: ColorDefault.primary}]}>
+          {title}
+        </Text>
+      )}
+      {!!subRightIcon && (
+        <TouchableOpacity
+          disabled={!rightIcon}
+          onPress={onPressSubRight}
+          style={styles.subRightButton}>
+          {!!subRightIcon && (
+            <Ionicons
+              name={subRightIcon}
+              size={32}
+              style={{color: ColorDefault.primary}}
+            />
+          )}
+        </TouchableOpacity>
+      )}
+      {/* Button right */}
+      <TouchableOpacity
+        disabled={!rightIcon}
+        onPress={onPressRight}
+        style={styles.rightButton}>
+        {!!rightIcon && (
+          <Ionicons
+            name={rightIcon}
+            size={32}
+            style={{color: ColorDefault.primary}}
+          />
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    height: 50,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  leftButton: {
+    width: 50,
+    alignItems: 'center',
+  },
+  rightButton: {
+    width: 50,
+    alignItems: 'center',
+  },
+  subRightButton: {
+    width: 50,
+    alignItems: 'center',
+  },
+  titleText: {
+    flex: 1,
+    textAlign: 'center',
+  },
+  searchContainer: {
+    height: 30,
+    flex: 1,
+    borderRadius: 5,
+    paddingHorizontal: 5,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FFF',
+    marginRight: 8,
+  },
+});

src/components/index.ts

@@ -6,3 +6,4 @@ export * from './Button/Button';
 export * from './Divider/Divider';
 export * from './Modal/Modal';
 export * from './BottomMenu/TabBar';
+export * from './Header/Header';

src/models/IThemes.ts

@@ -89,6 +89,8 @@ export interface IColors {
   blue: string;
 
   grey: string;
+
+  navigationBar: string;
 }
 
 export interface ISpacing {

src/themes/colors.ts

@@ -10,6 +10,7 @@ export const ColorDefault: IColors = {
   info: '#ffd700',
   blue: '#3A36D5',
   grey: '#CFD2D7',
+  navigationBar: '#ffffff',
 };
 export const ColorDark: IColors = {
   primary: 'rgb(10, 132, 255)',
@@ -22,4 +23,5 @@ export const ColorDark: IColors = {
   info: '#ffd700',
   blue: '#3A36D5',
   grey: '#CFD2D7',
+  navigationBar: '#ffffff',
 };

src/views/HomeScreen/index.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {Header} from '../../components';
 import config from '../../config';
 
 const HomeScreen = () => {
   return (
-    <View style={styles.container}>
-      <Text>{config.BASE_URL}</Text>
-    </View>
+    <SafeAreaView style={{flex: 1}}>
+      <Header title="Header" backEnabled={true} />
+      <View style={styles.container}>
+        <Text>{config.BASE_URL}</Text>
+      </View>
+    </SafeAreaView>
   );
 };
 const styles = StyleSheet.create({
@@ -17,5 +22,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
 });
-
 export default HomeScreen;