Select field error

[abdulmateentechbits]

When i build through yarn bundle:android
SelectField using react-native-bottom-sheet cause error when select any option but work normally in development

[frankcalise]

When i build through yarn bundle:android
SelectField using react-native-bottom-sheet cause error when select any option but work normally in development

Hey, could you provide the error you've encountered?

[abdulmateentechbits]

When i build through yarn bundle:android
SelectField using react-native-bottom-sheet cause error when select any option but work normally in development

Hey, could you provide the error you've encountered?

Sure here is the error
TypeError: Cannot read property 'includes' of undefined, js engine: hermes
2023-03-02 14:10:23.932 25989-26038 unknown:ReactNative com.myreserp.apps.fm E Exception in native call
com.facebook.react.common.JavascriptException: TypeError: Cannot read property 'includes' of undefined, js engine: hermes, stack:
onPress@1557:2739
value@209:8513
value@209:7769
onResponderRelease@209:5691
c@42:170
m@42:313
v@42:367
w@42:678
Le@42:14318
X@42:5345
anonymous@42:14666
Ce@42:95481
ze@42:14128
Me@42:14505
receiveTouches@42:15298
value@62:3579
anonymous@62:758
value@62:2582
value@62:730

                                                                                                	at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:72)
                                                                                                	at java.lang.reflect.Method.invoke(Native Method)
                                                                                                	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
                                                                                                	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188)
                                                                                                	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
                                                                                                	at android.os.Handler.handleCallback(Handler.java:739)
                                                                                                	at android.os.Handler.dispatchMessage(Handler.java:95)
                                                                                                	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
                                                                                                	at android.os.Looper.loop(Looper.java:158)
                                                                                                	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
                                                                                                	at java.lang.Thread.run(Thread.java:818)

2023-03-02 14:10:23.952 25989-25989 AbsListView com.myreserp.apps.fm D Get MotionRecognitionManager

This is my component where i have use it

/* eslint-disable react-native/no-inline-styles */
import { observer } from "mobx-react-lite"
import React, { FC, useRef, useState, useEffect } from "react"
import { Alert, TextInput, TextStyle, View, ViewStyle, ActivityIndicator } from "react-native"
import { Button, Header, Screen, SelectField, Text, TextField } from "../../../components"
import { useStores } from "../../../models"
import { AppStackScreenProps } from "../../../navigators"
import { colors, spacing, typography } from "../../../theme"
import { AntDesign } from "@expo/vector-icons"
import { doRequest } from "../../../requests/request.js"
import { baseApiUrl } from "../../../constants/constant.js"
import useSwr from "swr"
import Error from "../../../components/Error"
import Spinner from "../../../components/Spinner"

interface ComplainScreenProps extends AppStackScreenProps<"CreateComplain"> {}

export const ComplainScreen: FC<ComplainScreenProps> = observer(function ComplainScreen(_props) {
  const {
    navigation,
    route: {
      params: { isEdit, editData },
    },
  } = _props

  const [selectedTeam, setSelectedTeam] = useState<string[]>(
    isEdit ? [editData?.product.toString()] : [],
  )

  const [formData, setFormData] = useState({
    subject: "",
    message: "",
  })
  // isEdit ? [editData?.product.toString()] :
  const complainTitleRef = useRef<TextInput>()
  const complainDescriptionRef = useRef<TextInput>()

  const {
    authUser: { authToken },
  } = useStores()

  const options = {
    method: "GET",
    headers: {
      Authorization: `Bearer ${authToken}`,
    },
  }

  // Use the useSwr hook to get the home screen data
  const { data, error, isLoading, mutate } = useSwr("product", (url) => doRequest(url, options), {
    revalidateOnMount: true,
  })

  useEffect(() => {
    mutate()
  }, [])

  if (isLoading) {
    return <Spinner />
  }
  if (error) {
    return <Error message={error?.message} />
  }

  const selectOptions = data
    ? data?.product.map((item) => ({
        label: item?.product_unique_id || "-",
        value: item?.id || 0,
      }))
    : []

  useEffect(() => {
    if (isEdit) {
      setFormData({
        subject: editData?.subject,
        message: editData?.message,
      })
    }
  }, [isEdit])

  const handleFormChange = (key, value) => {
    setFormData({
      ...formData,
      [key]: value,
    })
  }

  async function submitComplain() {
    const data = {
      ...formData,
      product_id:selectedTeam[0],
    }

    const errors: string[] = []

    if (!data.product_id) {
      errors.push("Please select a product")
    }

    if (!data.subject) {
      errors.push("Please enter a subject")
    }

    if (!data.message) {
      errors.push("Please enter a message")
    }

    if (errors.length > 0) {
      alert(errors.join("\n"))
      return
    }

    try {
      const optionPost = {
        method: "POST",
        headers: {
          Authorization: `Bearer ${authToken}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      }

      const response = await fetch(
        isEdit
          ? `${baseApiUrl}/complain/update/${editData.complainId}`
          : `${baseApiUrl}/complain/create`,
        optionPost,
      )
      if (response.status === 200) {
        setFormData({
          message: "",
          subject: "",
        })         
        complainTitleRef.current?.clear()
        complainDescriptionRef.current?.clear()
        setSelectedTeam([])
        alert(isEdit ? `Your complain successfully updated!` : `Your complain successfully added!`);
        navigation.navigate("ComplainList")
      }
    } catch (error) {
      console.log("submitting form data", error)
    }
  }

  return (
    <Screen
      preset="auto"
      contentContainerStyle={$screenContentContainer}
      safeAreaEdges={["top", "bottom"]}
    >
      <Header
        titleMode="flex"
        LeftActionComponent={
          <View style={$customLeftAction}>
            <AntDesign
              name="arrowleft"
              size={24}
              color="black"
              onPress={() => navigation.goBack()}
            />
          </View>
        }
        safeAreaEdges={[]}
        title="Complains"
        titleStyle={$titleStyles}
        style={$headerStyle}
      />
      <Text
        testID="login-heading"
        tx={isEdit ? `complainScreen.update` : `complainScreen.title`}
        preset="heading"
        style={$signIn}
      />

      <SelectField
        label="Select Product"
        placeholder={isEdit ? editData?.productLabel : "eg. A-D-2"}
        value={selectedTeam}
        onSelect={setSelectedTeam}
        options={selectOptions}
        LabelTextProps={{ style: $numberLabelStyle }}
        multiple={false}
        containerStyle={{ marginBottom: spacing.large, marginTop: spacing.large }}
        inputWrapperStyle={$selectFieldWrapper}
        onSubmitEditing={() => complainTitleRef.current?.focus()}
      />

      <TextField
        ref={complainTitleRef}
        value={formData.subject}
        onChangeText={(value) => handleFormChange("subject", value)}
        inputWrapperStyle={[$numberField, { minHeight: 60 }]}
        style={$inputFieldStyle}
        autoCapitalize="none"
        autoCorrect={true}
        LabelTextProps={{ style: $numberLabelStyle }}
        keyboardType="default"
        multiline
        labelTx="complainScreen.titleFieldLabel"
        onSubmitEditing={() => complainDescriptionRef.current?.focus()}
      />
      <TextField
        ref={complainDescriptionRef}
        value={formData.message}
        onChangeText={(value) => handleFormChange("message", value)}
        inputWrapperStyle={[$numberField, { minHeight: 110 }]}
        containerStyle={$inputFieldStyle}
        autoCapitalize="none"
        autoCorrect={true}
        multiline
        LabelTextProps={{ style: $numberLabelStyle }}
        keyboardType="default"
        labelTx="complainScreen.descriptionLabel"
      />
      <Button
        testID="login-button"
        tx="common.submit"
        style={$tapButton}
        textStyle={$tabButtonTextStyle}
        onPress={submitComplain}
      />
    </Screen>
  )
})