An issue with React-Native rendering a component

Question

ERROR

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.

Check the render method of `User`.

import User from './Components/User';

return(
  <View style={styles.container}>
    <View>
      <User details={details} />
    </View>
  </View>
)

User component

import React from 'react';
import {Image, Text, StyleSheet} from 'react-native'
import {
  Card,
  CardItem,
  H1,
} from 'native-base'
import moment from 'moment'

const User = ({details}) => {
    return(
        <Card style={styles.card}>
          <CardItem cardBody style={styles.cardItem}>
            <Image
            source={{
              uri: details.picture?.large,
              width: 150,
              height: 250
            }}
            style={styles.image}
            />
          </CardItem>

          <CardItem style={styles.cardItem}>
            <H1 style={styles.text}>
              {details.name?.title} {details.name?.first} {details.name?.last}
            </H1>
          </CardItem>

          <CardItem bordered style={styles.cardItem}>
            <Text style={styles.text}>
              {details.cell}
            </Text>
          </CardItem>

          <CardItem footer style={styles.cardItem}>
            <Text style={{color: '#fff'}}>
              Registered at 
              {moment(details.registered?.text).format('DD-MM-YY')}
            </Text>
          </CardItem>

        </Card>
    )
}

export default User;

could you please show `User` code? – nithinpp Sep 07 '21 at 10:52 — nithinpp, Sep 07 '21 at 10:52
What version of `native-base` are you using? – nithinpp Sep 07 '21 at 11:46 — nithinpp, Sep 07 '21 at 11:46

score 0 · Answer 1 · answered Sep 07 '21 at 11:33

0

try exporting like this

export default function User () {
// ... code goes here
}

you can also use anonymous function in a default export

answered Sep 07 '21 at 11:33

Juno

41
7

nithinpp · Accepted Answer · 2021-09-08T06:34:40.873

0

It seems you have installed native-base v3 and importing native-base v2 components ( Card, CardItem, H1 ) etc. You will have to import the correct components and rewrite your User component.

The Card, CardItem components are not there in v3 and can be easily built using components like Box. The H1 component is also replaced with a component Heading.

https://docs.nativebase.io/migration/card

edited Sep 08 '21 at 06:34

answered Sep 07 '21 at 11:55

nithinpp

1,785
12
24

Now I am getting log as below: LOG [Error: useTheme: `theme` is undefined. Seems you forgot to wrap your app in ``] – Vivek R K Sep 08 '21 at 07:46
You will have to wrap your whole app with `NativeBaseProvider`. https://docs.nativebase.io/setup-provider – nithinpp Sep 08 '21 at 07:47
Do I need to wrap it in User component also? – Vivek R K Sep 08 '21 at 07:50
No. Wrap it on your root level as suggested in the Doc – nithinpp Sep 08 '21 at 07:54
LOG [Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.] ERROR Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager. I did as doc said, now I am facing this – Vivek R K Sep 08 '21 at 07:54
I don't think it has nothing to do with the OP. try this one https://stackoverflow.com/questions/61967017/invariant-violation-requirenativecomponent-rncsafeareaprovider-was-not-found – nithinpp Sep 08 '21 at 07:57
I checked that earlier, but didn't go all way good..( – Vivek R K Sep 08 '21 at 08:05

An issue with React-Native rendering a component

Check the render method of User.

2 Answers2

Check the render method of `User`.