feat: add share components

Author: hongbepoz

share/components/BottomSheet.tsx

@@ -0,0 +1,89 @@
+import React, {ReactNode, forwardRef, useCallback, useImperativeHandle, useRef} from 'react'
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetProps as RNBottomSheetProps,
+} from '@gorhom/bottom-sheet'
+import {StyleSheet, View} from 'react-native'
+import {colors, metrics, responsiveWidth} from '../themes'
+
+const SNAP_POINTS = ['50%']
+
+export type BottomSheetMethods = {
+  open: () => void
+  close: () => void
+  snapToIndex: (index: number) => void
+}
+
+export interface BottomSheetProps extends RNBottomSheetProps {
+  showSearchBox?: boolean
+  searchValue?: string
+  onSearchChange?: (text: string) => void
+  children: ReactNode | React.JSX.Element
+  snapPoints?: string[]
+  onClose?: () => void
+}
+
+export const BottomSheet = forwardRef<BottomSheetMethods, BottomSheetProps>(
+  ({children, snapPoints = SNAP_POINTS, onClose, ...rest}, ref) => {
+    const sheetRef = useRef<BottomSheetModal>(null)
+
+    useImperativeHandle(ref, () => ({
+      open: () => {
+        sheetRef.current?.present()
+      },
+      close: () => {
+        sheetRef.current?.close()
+      },
+      snapToIndex: (index: number) => {
+        sheetRef.current?.snapToIndex(index)
+      },
+    }))
+
+    const handleDismiss = useCallback(() => {
+      onClose?.()
+    }, [onClose])
+
+    const renderBackdrop = useCallback(
+      (props: BottomSheetBackdropProps) => <BottomSheetBackdrop {...props} pressBehavior="none" />,
+      [],
+    )
+
+    return (
+      <BottomSheetModal
+        ref={sheetRef}
+        index={0}
+        snapPoints={snapPoints}
+        handleIndicatorStyle={styles.indicator}
+        enablePanDownToClose
+        onDismiss={handleDismiss}
+        backdropComponent={renderBackdrop}
+        stackBehavior="push"
+        {...rest}>
+        <View style={styles.container}>{children}</View>
+      </BottomSheetModal>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: metrics.marginHorizontal,
+    backgroundColor: colors.white,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 0,
+  },
+  indicator: {
+    backgroundColor: colors.gray700,
+    width: responsiveWidth(36),
+    borderRadius: metrics.tiny,
+    height: metrics.tiny,
+  },
+})
+
+BottomSheet.displayName = 'BottomSheet'

share/components/FormInput.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {Controller} from 'react-hook-form'
+import {UseControllerProps} from 'react-hook-form/dist/types/controller'
+import {TextInput} from './TextInput'
+import {TextInputProps} from 'rn-base-component'
+
+interface IProps extends TextInputProps {
+  control: UseControllerProps['control']
+  id: string
+}
+
+export const FormInput = ({control, id, ...rest}: IProps) => (
+  <Controller
+    control={control}
+    render={({field: {onChange, onBlur, value}, fieldState: {error}}) => (
+      <TextInput {...rest} value={value} onChangeText={onChange} onBlur={onBlur} errorText={error?.message} />
+    )}
+    name={id}
+  />
+)

share/components/Header.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import {StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native'
+import {Text} from 'rn-base-component'
+import {useNavigation} from '@react-navigation/native'
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
+import {colors, fonts, fontSizes, metrics} from '../themes'
+
+interface IHeaderProp {
+  title?: string
+  leftStyle?: StyleProp<ViewStyle>
+  centerStyle?: StyleProp<ViewStyle>
+  rightStyle?: StyleProp<ViewStyle>
+  onGoBack?: () => void
+  hasBackButton?: boolean
+  leftView?: React.ReactNode
+  centerView?: React.ReactNode
+  rightView?: React.ReactNode
+  containerStyle?: StyleProp<ViewStyle>
+}
+
+export const Header: React.FC<IHeaderProp> = ({
+  hasBackButton = true,
+  title,
+  leftStyle,
+  rightStyle,
+  centerStyle,
+  onGoBack,
+  leftView,
+  centerView,
+  rightView,
+  containerStyle,
+}) => {
+  const navigation = useNavigation()
+  return (
+    <View style={[styles.headerStyle, containerStyle]}>
+      <View style={[styles.left, leftStyle]}>
+        {hasBackButton && (
+          <TouchableOpacity
+            onPress={() => {
+              if (onGoBack) {
+                onGoBack()
+              } else {
+                navigation.goBack()
+              }
+            }}>
+            <MaterialIcons name={'arrow-back'} color={colors.black} size={25} />
+          </TouchableOpacity>
+        )}
+        {leftView}
+      </View>
+      <View style={[styles.center, centerStyle]}>
+        {!!title && (
+          <Text fontSize={fontSizes.label} fontFamily={fonts.bold} color={colors.black}>
+            {title}
+          </Text>
+        )}
+        {centerView}
+      </View>
+      <View style={[styles.right, rightStyle]}>{rightView}</View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  headerStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: metrics.headerHeight,
+    paddingHorizontal: metrics.marginTop,
+    backgroundColor: colors.white,
+    borderBottomWidth: metrics.borderWidth,
+    borderColor: colors.gray1,
+  },
+  left: {
+    flex: 1,
+  },
+  center: {
+    flex: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  right: {
+    flex: 1,
+  },
+})