wix / wix/react-native-ui-lib

use TouchableOpacity got Element type is inval error

Open
#2,529 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
7.2k
Forks
748
Avg merge
2d 18h
Merged PRs (30d)
1

Description

[Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Description

import { Text, TouchableOpacity, View } from 'react-native-ui-lib';
when i use TouchableOpacity got error only!

Related to
  • Components
  • Demo
  • Docs
  • Typings
Steps to reproduce
Expected behavior

no error

Actual behavior

got type is invalid:
expected a string (for built-in components) or a class/function (for composite components) but got: undefined

More Info

Code snippet
import React from 'react';
import { StyleSheet } from 'react-native';
import { Text, TouchableOpacity, View } from 'react-native-ui-lib';
import { pTd } from '../../untils';

const Button = (props) => {
    const { onPress = () => { console.log(11) }, children = null, text = "button", style = {}, textStyle = {}, disabled = false } = props;

    return <TouchableOpacity onPress={() => onPress()} style={[styles.btnWrap, style, disabled ? styles.disStyles : {}]} >
        {
            children ? children : (<Text style={[styles.btnText, textStyle, disabled ? styles.disTextStyles : {}]}>{text}</Text>)
        }
    </TouchableOpacity>
};
const styles = StyleSheet.create({
    btnWrap: {
        padding: pTd(11),
        minWidth: pTd(108),
        backgroundColor: "#FFB822",
        borderRadius: pTd(4),
        flexDirection: "column",
        alignItems: "center"
    },
    btnText: {
        fontSize: pTd(16),
        color: "#fff",
    },
    disStyles: {
        backgroundColor: "#eee",
    },
    disTextStyles: {
        color: "#999"
    }
})
export default Button;


Screenshots/Video
Environment

"@react-native-async-storage/async-storage": "^1.15.5",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-community/progress-bar-android": "^1.0.5",
"@react-native-community/progress-view": "^1.4.0",
"@react-native-community/slider": "^3.0.3",
"@react-native-picker/picker": "^1.16.4",
"@react-navigation/bottom-tabs": "^6.3.2",
"@react-navigation/native": "^6.0.11",
"@react-navigation/native-stack": "^6.7.0",
"@react-navigation/stack": "^6.3.16",
"@sentry/react-native": "^5.1.0",
"@unimodules/core": "^7.1.1",
"axios": "^0.22.0",
"caniuse-lite": "^1.0.30001312",
"dayjs": "^1.10.6",
"deprecated-react-native-listview": "0.0.7",
"deprecated-react-native-prop-types": "^4.0.0",
"events": "^3.3.0",
"expo-local-authentication": "^11.1.1",
"expo-modules-core": "^0.2.0",
"fundebug-reactnative": "^0.1.1",
"i18n-js": "^3.8.0",
"immutability-helper": "^3.1.1",
"moment": "^2.29.1",
"react": "^18.0.0",
"react-content-loader": "^6.0.3",
"react-native": "^0.69.1",
"react-native-actionsheet": "^2.4.2",
"react-native-blob-util": "^0.14.0",
"react-native-charts-wrapper": "^0.5.7",
"react-native-common-date-picker": "^2.3.4",
"react-native-device-info": "^8.3.1",
"react-native-easy-toast": "^2.0.0",
"react-native-elements": "^3.4.2",
"react-native-exception-handler": "^2.10.10",
"react-native-fingerprint-scanner": "^6.0.0",
"react-native-gesture-handler": "^2.9.0",
"react-native-i18n": "^2.0.15",
"react-native-image-crop-picker": "^0.36.2",
"react-native-image-picker": "^4.8.5",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-localize": "^2.1.1",
"react-native-modal-date-picker": "^1.0.3",
"react-native-ocalendar": "^1.0.1",
"react-native-orientation-locker": "^1.3.1",
"react-native-pdf": "^6.3.0",
"react-native-picker-android": "^1.0.3",
"react-native-plaid-link-sdk": "^7.0.7",
"react-native-reanimated": "^3.0.2",
"react-native-restart": "0.0.22",
"react-native-root-siblings": "^4.1.1",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "3.4.0",
"react-native-segmented-picker": "^2.0.2",
"react-native-shadow": "^1.2.2",
"react-native-share": "^7.2.0",
"react-native-smart-tip": "^2.3.0",
"react-native-splash-screen": "^3.2.0",
"react-native-storage": "^1.0.1",
"react-native-svg": "^13.8.0",
"react-native-swiper": "^1.6.0",
"react-native-ui-lib": "^7.2.0",

  • React Native version: 0.69.1
  • React Native UI Lib version: 7.2.0
Affected platforms
  • Android

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the import and render from the provided code with React Native 0.69.1 and react-native-ui-lib 7.2.0 on Android. Trace why TouchableOpacity is undefined; done means the component import renders without the reported React element-type error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.