use TouchableOpacity got Element type is inval error

Aperta
  • Qualcosa non va?
#2,529 2 commenti 1 reazione 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
25/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
javascript, react-native
Ambito
mobile

Direzione di ricerca

Inizia riproducendo l’importazione e il rendering del codice fornito con React Native 0.69.1 e react-native-ui-lib 7.2.0 su Android. Analizza perché TouchableOpacity non è definito; il lavoro è completato quando l’importazione del componente viene renderizzata senza l’errore di tipo di elemento React segnalato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug

[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
Lingua principale
TypeScript
Stelle
7.2k
Fork
749
Merge medio
29m
PR unite (30g)
1

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di wix/react-native-ui-lib

Tutte le issue di wix/react-native-ui-lib

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.