CODEWITHSUNDEEP
reactjsreact-native
skj
skj

Reputation: 11

Render error element type is invalid: expected a string or a class/function but got undefined

I am new on react native and sorry if this is a stupid question. I am trying the button elements from this website: https://reactnativeelements.com/docs/button/

But when I run it I got this error. I already tried some of the answers on this website but still got no luck. I hope someone can help me with this.

Error

App.js

import React from 'react';
 import type {Node} from 'react';
 import {
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
   useColorScheme,
   View,
 } from 'react-native';
 
 import {
   Colors,
   DebugInstructions,
   Header,
   LearnMoreLinks,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
 import HomeView from './Homepage.js';
 
 const App = () => {
   return (
     <HomeView />
   )
 };export default App

Homepage.js

import React from 'react';
import type Node from 'react';
import {
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
   useColorScheme,
   View,
 } from 'react-native';
 
import {
   Colors,
   DebugInstructions,
   Header,
   LearnMoreLinks,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';

import Button from 'react-native-elements';
import Icon from 'react-native-vector-icons';

const App = () => {
    return (
        <div>
        <Button
        title="Solid Button"
        />

        <Button
        title="Outline button"
        type="outline"
        />

        <Button
        title="Clear button"
        type="clear"
        />

        <Button
        icon={
            <Icon
            name="arrow-right"
            size={15}
            color="white"
            />
        }
        title="Button with icon component"
        />

        <Button
        icon={{
            name: "arrow-right",
            size: 15,
            color: "white"
        }}
        title="Button with icon object"
        />

        <Button
        icon={
            <Icon
            name="arrow-right"
            size={15}
            color="white"
            />
        }
        iconRight
        title="Button with right icon"
        />

        <Button
        title="Loading button"
        loading
        />
        </div>
    );
}
 
 const styles = StyleSheet.create({

});
 
 export default App;

Upvotes: 0

Views: 147

Answers (1)

Code Awesome
Code Awesome

Reputation: 181

This should be

Homepage.js

import React from 'react';
import type Node from 'react';
import {
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
   useColorScheme,
   View,
 } from 'react-native';
 
import {
   Colors,
   DebugInstructions,
   Header,
   LearnMoreLinks,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';

import  { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons';

const HomeView = () => {
    return (
        <View>
        <Button
        title="Solid Button"
        />

        <Button
        title="Outline button"
        type="outline"
        />

        <Button
        title="Clear button"
        type="clear"
        />

        <Button
        icon={
            <Icon
            name="arrow-right"
            size={15}
            color="white"
            />
        }
        title="Button with icon component"
        />

        <Button
        icon={{
            name: "arrow-right",
            size: 15,
            color: "white"
        }}
        title="Button with icon object"
        />

        <Button
        icon={
            <Icon
            name="arrow-right"
            size={15}
            color="white"
            />
        }
        iconRight
        title="Button with right icon"
        />

        <Button
        title="Loading button"
        loading
        />
        </View>
    );
}
 
 const styles = StyleSheet.create({

});
 
 export default HomeView

Upvotes: 1

Related Questions