React Native + NativeBase +Exponent, Element type is invalid error - react-native

I am fairly new to react native, nativebase, and Exponent. Unfortunately, I am having trouble getting simple components even to display. I've spent probably 6+ hours troubleshooting simple tutorial components from the nativebase documentation. I feel like I'm just missing something fundamental and I would really appreciate a helping hand.
Here's what I'm doing:
Using Exponent XDE to run my project.
Installed nativebase according to the documentation, no errors at this point.
main.js
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import { Container } from 'native-base';
import { CardImageExample } from './component/card.js';
AppRegistry.registerComponent('main', () => CardImageExample);
card.js
import React, { Component, Image } from 'react';
import { Container, Content, Card, CardItem, Thumbnail, Text, Icon } from 'native-base';
class CardImageExample extends Component {
render() {
return (
<Container>
<Content>
<Card>
<CardItem>
<Thumbnail source={require('./img/penguin-icon.png')} />
<Text>Instrumental Songs</Text>
<Text note>Guitar</Text>
</CardItem>
<CardItem>
<Image style={{ resizeMode: 'cover' }} source={require('./img/penguin.jpg')} />
</CardItem>
<CardItem>
<Icon name='ios-musical-notes' style={{color : '#ED4A6A'}} />
<Text>Listen now</Text>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
export default CardImageExample;
Current error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I just have absolutely no idea where to start. Thanks.

Your main.js should like some thing Like
import * as Exponent from 'exponent';
import React from 'react';
import First from './src/app';
import { Container, Header, Title, Content, Button, Left, Right, Body,Icon, Separator } from 'native-base';
class App extends React.Component {
render() {
return <First / > ;
}
}
Exponent.registerRootComponent(App);

You have to register your app like this Exponent.registerRootComponent(App).
If you are using Exponent.
Example: https://github.com/exponent/nativebase-example

Related

ReactNative with tailwindccss, className only accept one styling?

First of all this is my first question ever so i apologies if it wastes anyones time.
Currently i've been trying to see if i can use tailwind with reactNative for one of my school projects.
I've run into a problem postsetup (i assume postsetup).
The following code when exported to the web using expo start web displays indigo text and a black background in at the top of the browser.
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<>
<View className="bg-black">
<Text className="text-indigo-500">Open up App.js to start working on
your app!</Text>
<StatusBar style="auto" />
</View>
</>
);
}
Now when i do the following:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<>
<View className="bg-black items-center">
<Text className="text-indigo-500">Open up App.js to start
working on your app!</Text>
<StatusBar style="auto" />
</View>
</>
);
}
I've now added items-center to the view, and suddenly it doesn't display the background-color or align the text at the center. Why is this?
React components by default do not support tailwind. However, NativeWind makes it possible to use tailwind in react native

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

i am trying to learn react native but i faced with this 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 hace mixed up default and named imports.
Check the render method of 'GoalInput'(I am sure i didn't made a typo first'l' and after that 'i' letter)
my App.js code:
import { useState } from "react";
import { StyleSheet, View, FlatList, Button } from "react-native";
import { StatusBar } from "expo-status-bar";
import GoalItem from "./components/GoalItem";
import GoalInput from "./components/GoalInput";
return (
<>
<StatusBar/>
<View>
<Button onPress={startAddGoalHandler}/>
<GoalInput
visible={modalIsVisible}
onAddGoal={addGoalHandler}
onCancel={endAddGoalHandler}
/>
</View>
</>
);
my GoalInput.js code:
import { useState } from "react";
import { StyleSheet,Button,TextInput,View,Model,Image} from "react-native";
const GoalInput = (props) => {
const [enteredGoalText, setEnteredGoalText] = useState("");
const goalInputHandler = (enteredText) => {
setEnteredGoalText(enteredText);
};
const addGoalHandler = () => {
props.onAddGoal(enteredGoalText);
setEnteredGoalText("");
};
return (
<Model visible={props.visible} animationType="slide">
<View>
<Image
source={require("../assets/Images/goal.png")}
/>
<TextInput
onChangeText={goalInputHandler}
value={enteredGoalText}
/>
<View>
<View>
<Button title="Add Goal" onPress={addGoalHandler} color="#b180f0" />
</View>
<View>
<Button title="Cancel" onPress={props.onCancel} color="#f31282" />
</View>
</View>
</View>
</Model>
);
};
export default GoalInput;
I have deleted the style parts for keep question simple and even i search a lot couldn't find the error source on my own thanks for all the attention.
by the way i am using 'expo'
There's no Model in react native , its Modal
SO chnage this first :
import { StyleSheet,Button,TextInput,View,Modal,Image} from "react-native";
And also where youve used in
return(
<Modal>
</Modal>
)
Hope it helps. feel free for doubts

Error when I put the Form elements from React Native Elements

I'm making a LoginScreen but when I try to put the Form elements, that launch me an error.
Here's the code:
import React, { Fragment, Component } from 'react';
import { StyleSheet, Image, StatusBar, View, Text } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements'
import normalize from '../components/Utils';
class LoginScreen extends Component{
render(){
return(
<Fragment>
<StatusBar backgroundColor="#14246C" barStyle="light-content" style={{ flexDirection: 'column' }} />
<Image source={require('../img/background-login.jpg')} style={styles.backgroundImage}/>
<View style={styles.loginForm}>
<Text style={styles.loginTitle}>Inicio de sesiĆ³n</Text>
<FormLabel>Usuario</FormLabel>
<FormInput onChangeText="Tu nombre de usuario"/>
<FormValidationMessage>Error message</FormValidationMessage>
</View>
</Fragment>
);
}
}
The error:
Invariant violation: 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 mixed up default and named imports.
Issue is not with the "react-native-elements" but you need to export the component either for named or default.
export default class <className> extends Component{
render(){
return(
<your component>
)
}
}

The code from GetStream.io documentation doesn't work in RN. <Text> string must be inserted

I am using Firebase Server on Node together with RN. I wanted to use GetStream.io in my app. The backend works fine, but an example from GetStream.io documentation for frontend doesn't work, I just get this error.
I tried to insert attribute though it doesn't exist in GetStream.io example. I still receive this error.
This is how my code looks like:
import React from 'react';
import SafeAreaView from 'react-native-safe-area-view';
import { StreamApp } from 'react-native-activity-feed';
import { Text, View } from "react-native";
const newsFeed = () => {
return (
<View>
<SafeAreaView style={{flex: 1}} forceInset={{ top: 'always' }}>
<StreamApp
apiKey="myapikey"
appId="myappid"
token="mytoken"
/>
</SafeAreaView>
</View>
);
};
export default newsFeed;
https://getstream.io/react-native-activity-feed/tutorial/ link to official guide from GetStream.io
Based on the error message, it seems like your newsFeed component is rendered inside a Text element.
Here's the link to the check in RN that raise this error -> https://github.com/facebook/react-native/blob/master/Libraries/Components/View/View.js#L44
Eg. this JSX code would trigger the same error:
<Text>
< newsFeed />
</Text>
Assuming this is the case (or a variation of it) you can fix this problem very easily by wrapping your component in a <View> and remove <Text> when not necessary.
So what I found out.
The problem was because of this line:
import SafeAreaView from 'react-native-safe-area-view';
What you should do is following:
import { SafeAreaView } from "react-native";

invariant violaion.objects are not valid as react child issue in react-native

When I am trying to wrap redux form into the react-native elements it shows following error.
this is my code
import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';
const renderField=({label,keyboardType,name}) => {
return(
<View style={{flexDirection:'row',height:50,alignItems:'center' }}>
<Text>
{label}
</Text>
<Input />
</View>
)
}
const RegisterForm=props => {
const {handleSubmit}=props;
return(
<View style={{flex:1,flexDirection:'column',margin:40,justifyContent:'flex-start'}}>
<Field label="Username" component={renderField} name="username" />
<Button title='SUBMIT' onPress={handleSubmit} />
</View>
)
}
const Register=reduxForm({
form:'register',
})(RegisterForm);
export default Register;
When used FormInput in react-native elements it works then I am changed it into react-native elements 1.0.0beta4 and replace the formInput with Input component.
After that it shows above error.My debugger window also shows an error
debugger window
The error is due to your upgrade to react-native-elements beta which include breaking changes like the button component props :
The actual error is located in welcomePage.js file (as you can see in debugger), you need to change the object you pass to the button icon prop to a react component (see the button doc in the link above).