Intervention setup done

src/components/bottomTab/AddOptionModal.tsx

@@ -17,12 +17,10 @@ import Intervention from 'assets/images/svg/InterventionIcon.svg'
 import ChartIcon from 'assets/images/svg/ChartIcon.svg'
 import CrossArrow from 'assets/images/svg/CrossArrowIcon.svg'
 import {StackNavigationProp} from '@react-navigation/stack'
-
 import React, {useMemo} from 'react'
 import i18next from 'src/locales'
 import * as Colors from 'src/utils/constants/colors'
 import * as Typography from 'src/utils/constants/typography'
-
 import {scaleFont, scaleSize} from 'src/utils/constants/mixins'
 import {useNavigation} from '@react-navigation/native'
 import {RootStackParamList} from 'src/types/type/navigation.type'
@@ -64,22 +62,23 @@ const AddOptionModal = (props: Props) => {
       svgIcon: <Intervention width={25} height={25} />,
       title: 'Intervention',
       coming_soon: false,
-      onPress: () => navigation.navigate('SingleTreeRegister'),
+      onPress: () => navigation.navigate('InterventionForm'),
       disabled: false,
     },
     {
       svgIcon: <SingleTreeIcon width={25} height={25} />,
       title: 'label.tree_registration_type_1',
       coming_soon: false,
       onPress: () =>
-        navigation.navigate('FormIntermediate',{id:'SINGLE_TREE'}),
+        navigation.navigate('FormIntermediate', {id: 'SINGLE_TREE'}),
       disabled: false,
     },
     {
       svgIcon: <MultipleTreeIcon width={25} height={25} />,
       title: 'label.tree_registration_type_2',
       coming_soon: false,
-      onPress: () => navigation.navigate('CreatePolygon'),
+      onPress: () =>
+        navigation.navigate('FormIntermediate', {id: 'MULTI_TREE'}),
       disabled: false,
     },
   ]

src/components/common/CustomDropDown.tsx

@@ -1,24 +1,106 @@
 import React, {useState} from 'react'
-import DropDownPicker from 'react-native-dropdown-picker'
+import {StyleSheet, Text, View} from 'react-native'
+import {Dropdown} from 'react-native-element-dropdown'
+import {Colors} from 'src/utils/constants'
+import SelectIcon from 'assets/images/svg/SelectIcon.svg'
 
-export default function App() {
-  const [open, setOpen] = useState(false)
-  const [value, setValue] = useState(null)
-  const [items, setItems] = useState([
-    {label: 'Apple', value: 'apple'},
-    {label: 'Banana', value: 'banana'},
-    {label: 'Pear', value: 'pear'},
-  ])
+const data = [
+  {label: 'Item 1', value: '1', search: 'Item 1'},
+  {label: 'Item 2', value: '2', search: 'Item 2'},
+  {label: 'Item 3', value: '3', search: 'Item 3'},
+  {label: 'Item 4', value: '4', search: 'Item 4'},
+  {label: 'Item 5', value: '5', search: 'Item 5'},
+  {label: 'Item 6', value: '6', search: 'Item 6'},
+  {label: 'Item 7', value: '7', search: 'Item 7'},
+  {label: 'Item 8', value: '8', search: 'Item 8'},
+]
+
+interface Props {
+  label: string
+}
+
+const DropdownComponent = (props: Props) => {
+  const [value, setValue] = useState<string>()
+  const [isFocus, setIsFocus] = useState(false)
+
+  const renderLabel = () => {
+    if (value || isFocus) {
+      return (
+        <Text style={[styles.label, isFocus && {color: 'blue'}]}>
+          {props.label}
+        </Text>
+      )
+    }
+    return null
+  }
 
   return (
-    <DropDownPicker
-      open={open}
-      value={value}
-      items={items}
-      setOpen={setOpen}
-      setValue={setValue}
-      dropDownDirection="BOTTOM"
-      setItems={setItems}
-    />
+    <View style={styles.container}>
+      {renderLabel()}
+      <Dropdown
+        style={[styles.dropdown, isFocus && {borderColor: 'blue'}]}
+        placeholderStyle={styles.placeholderStyle}
+        selectedTextStyle={styles.selectedTextStyle}
+        inputSearchStyle={styles.inputSearchStyle}
+        iconStyle={styles.iconStyle}
+        data={data}
+        autoScroll
+        maxHeight={300}
+        minHeight={100}
+        labelField="label"
+        valueField="value"
+        searchField="search"
+        placeholder={!isFocus ? props.label : '...'}
+        value={value}
+        onFocus={() => setIsFocus(true)}
+        onBlur={() => setIsFocus(false)}
+        onChange={item => {
+          setValue(item.value)
+          setIsFocus(false)
+        }}
+        renderRightIcon={() => <SelectIcon />}
+      />
+    </View>
   )
 }
+
+export default DropdownComponent
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  dropdown: {
+    height: 50,
+    borderColor: 'gray',
+    borderWidth: 0.5,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+  },
+  icon: {
+    marginRight: 5,
+  },
+  label: {
+    position: 'absolute',
+    backgroundColor: Colors.GRAY_BACKDROP,
+    left: 22,
+    top: 8,
+    zIndex: 999,
+    paddingHorizontal: 8,
+    fontSize: 14,
+  },
+  placeholderStyle: {
+    fontSize: 16,
+  },
+  selectedTextStyle: {
+    fontSize: 16,
+  },
+  iconStyle: {
+    width: 20,
+    height: 20,
+  },
+  inputSearchStyle: {
+    height: 40,
+    fontSize: 16,
+  },
+})

src/components/common/CustomTextInput.tsx

@@ -0,0 +1,50 @@
+import {StyleSheet, View} from 'react-native'
+import React from 'react'
+import {InputOutline} from 'react-native-input-outline'
+import {Colors} from 'src/utils/constants'
+
+interface Props {
+  label: string
+}
+
+const CustomTextInput = (props: Props) => {
+  const {label} = props
+
+  return (
+    <View style={styles.container}>
+      <InputOutline
+        style={styles.inputWrapper}
+        placeholder={label}
+        activeColor={Colors.PRIMARY}
+        inactiveColor={Colors.GRAY_TEXT}
+        placeholderTextColor={Colors.GRAY_TEXT}
+        fontSize={16}
+        backgroundColor={Colors.GRAY_BACKDROP}
+      />
+    </View>
+  )
+}
+
+export default CustomTextInput
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: 50,
+    alignItems: 'center',
+    marginVertical: 20,
+    flexDirection: 'row',
+    backgroundColor: Colors.GRAY_BACKDROP,
+  },
+  inputWrapper: {
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    width: '90%',
+    height: '100%',
+    marginHorizontal: '5%',
+    backgroundColor: Colors.GRAY_BACKDROP,
+  },
+  unitLabel: {
+    color: Colors.GRAY_TEXT,
+  },
+})

src/components/common/PlaceHolderSwitch.tsx

@@ -0,0 +1,63 @@
+import {StyleSheet, Switch, Text, View} from 'react-native'
+import React, {useState} from 'react'
+import {scaleFont} from 'src/utils/constants/mixins'
+import { Colors } from 'src/utils/constants'
+interface Props {
+  description: string
+}
+
+const PlaceHolderSwitch = (props: Props) => {
+  const [isSelected, setIsSelected] = useState(false)
+  const changeHandler = () => {
+    setIsSelected(!isSelected)
+  }
+  return (
+    <View style={styles.container}>
+      <View
+        style={[
+          styles.inputWrapper,
+          {
+            backgroundColor: isSelected
+              ? Colors.NEW_PRIMARY
+              : Colors.GRAY_LIGHT,
+          },
+        ]}>
+        <Text style={styles.inputLabel}>{props.description}</Text>
+        <View style={styles.divider} />
+        <Switch
+          value={isSelected}
+          onValueChange={changeHandler}
+          disabled={false}
+        />
+      </View>
+    </View>
+  )
+}
+
+export default PlaceHolderSwitch
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical:10
+  },
+  inputWrapper: {
+    borderRadius: 10,
+    width: '95%',
+    height: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 7,
+  },
+  inputLabel: {
+    color: 'gray',
+    fontSize: scaleFont(15),
+    marginLeft: 10,
+  },
+  divider: {
+    flex: 1,
+  },
+})

src/components/map/DispalyCurrentPolygonMarker.tsx

@@ -0,0 +1,35 @@
+import {StyleSheet, Text, View} from 'react-native'
+import React from 'react'
+import { scaleSize } from 'src/utils/constants/mixins'
+import { Colors } from 'src/utils/constants'
+
+interface Props {
+  lat: number
+  long: number
+  id: string
+}
+
+const DispalyCurrentPolygonMarker = (props: Props) => {
+  const {id} = props
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>Corner {id}</Text>
+      <Text>Please select the next corner</Text>
+    </View>
+  )
+}
+
+export default DispalyCurrentPolygonMarker
+
+const styles = StyleSheet.create({
+    container:{
+        width:'100%',
+        height:scaleSize(50),
+        backgroundColor:Colors.WHITE,
+        paddingHorizontal:20
+    },
+    label:{
+        fontSize: 18,
+        fontWeight:'600'
+    }
+})