0

I'm getting the following error when trying to use a custom select component for react native. This component does work on the web version but breaks for react native. How can I resolve this issue?

Invariant Violation: View config getter callback for component path must be a function (received undefined). Make sure to start component names with a capital letter.

import { TouchableOpacity } from "react-native";
import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { RiArrowDropDownLine, RiArrowDropUpLine, RiCloseLine } from "react-icons/ri"

const Select = React.forwardRef((props, ref) => {
    const {
        data,
        boxStyles,
        placeholder,
        setSelected,
    } = props;
    const [current, setCurrent] = useState(null);
    const [isClosed, setisClosed] = useState(true);

    useEffect(() => {
        setSelected(current)
    }, [current])

    const handleReset = () => {
        setCurrent(null)
        setSelected(null)
    }
    const handleOpen = () => setisClosed(flag => !flag);
    const handleSelect = (name) => {
        setCurrent(name)
        handleOpen()
    };

    const options = data?.map((item, index) => {
        return <TouchableOpacity
            style={styles.option}
            onPress={() => handleSelect(item.value)}
            key={index}>
            <Text>{item.label}</Text>
        </TouchableOpacity>
    });

    return <View style={boxStyles} >
        <TouchableOpacity style={styles.wrapper} onPress={handleOpen}>
            <Text>{current || placeholder}</Text>
            {current ?
                <TouchableOpacity onPress={() => handleReset()} ref={ref}>
                    <RiCloseLine />
                </TouchableOpacity>
            :
                isClosed ? <RiArrowDropDownLine/> : <RiArrowDropUpLine />
            }
        </TouchableOpacity>
        <View style={[styles.dropdown, isClosed && styles.isClosed]} >{options}</View>
    </View>
})

const styles = StyleSheet.create({
    isClosed: {height: 0, display: "none"},
    wrapper:{ borderWidth:1,borderRadius:10,borderColor:'gray',paddingHorizontal:20,paddingVertical:12,flexDirection:'row',justifyContent:'space-between',fontSize: 22},
    dropdown:{ borderWidth:1,borderRadius:10,borderColor:'gray',marginTop:10,overflow:'hidden'},
    option:{ paddingHorizontal:20,paddingVertical:8,overflow:'hidden'},
    disabledoption:{ paddingHorizontal:20,paddingVertical:8,flexDirection:'row',alignItems:'center', backgroundColor:'whitesmoke',opacity:0.9}
})

export default Select
chackerian
  • 1,301
  • 2
  • 15
  • 29
  • Can you share how you're importing your `Select` component into a file where you're using it? Typically, when I've gotten this error, it's due to my import/export wiring. Also, this is a related question that may be helpful: https://stackoverflow.com/questions/61523161/view-config-getter-callback-for-component-div-must-be-a-function-received-un – Reed Dunkle Mar 15 '23 at 15:01
  • @ReedDunkle This is how. A simple import statement: import Select from '../components/Select'; – chackerian Mar 15 '23 at 15:21
  • 1
    I just found this [GitHub issue related to the use of `react-icons` library](https://github.com/react-icons/react-icons/issues/679). They say "This library is incompatible with React Native because it uses `` tags. Use `react-native-vector-icons` or `@expo/vector-icons` if you use Expo." – Reed Dunkle Mar 15 '23 at 15:24
  • @ReedDunkle Thanks this was the issue but I had tried a react native icon pack and it still didn't work. Thanks for the response. – chackerian Mar 15 '23 at 15:52
  • Sorry I couldn't be of more help. I'm going to put it into a proper answer in case it helps someone in the future. – Reed Dunkle Mar 16 '23 at 16:26

1 Answers1

1

It looks like the issue is with the react-icons library.

I found this GitHub issue, which says:

[The react-icons] library is incompatible with React Native because it uses <svg> tags. Use react-native-vector-icons or @expo/vector-icons if you use Expo.

@chackerian says (in comments) that they tried a React Native icon pack, but it still didn't work.

Reed Dunkle
  • 3,408
  • 1
  • 18
  • 29