How do I add a class to a React Native App? - react-native

I add a class just like in React.js but when the app runs it says the class doesn't exist. The new class I am adding can be in the same folder as index.ios.js and it still doesn't find it.
My index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Test from './Test.jsx';
export default class TestApp extends Component {
render() {
return (
<View>
<Test />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('TestApp', () => TestApp);
**My new class:**
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class Test extends React.Component {
render() {
return (
<View>
<Text>This is Test.</Text>
</View>
)
}
}
module.exports = Test;
When I run the app it compiles but in the simulator it says that class can't be found. Is there something I'm doing wrong?

These didn't solve it but I figure out what it was:
My files had the '.jsx' extension instead of '.js'
My app worked once I changed them to '.js'.

Related

How to Add External StyleSheet for My React Native Project

How to Add External StyleSheet for My React Native Project
Add External StyleSheet
First, you must create a file to export a StyleSheet object with styles.
Style.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
box: {
width: '80%',
height: 150,
backgroundColor: 'red',
alignSelf: 'center',
borderRadius: 9
}
});
export { styles }
And in your component, you must import that.
import React, { Component } from "react";
import { View } from 'react-native';
import { styles } from "./Style";
class Home extends Component {
render(){
return(
<View>
<View style={styles.box}>
</View>
</View>
)
}
}
export default Home;
Finally, run the app.
If I understand you correctly, you want to add a style to your component/s.
I assume you are using a Functional Component.
A good practice is to do it by creating a style.js file, on the same folder where your component is located.
style.js
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
backgroundColor: 'green'
}
})
export { styles }
and in your desired component you should import it.
MyComponent.js
import React from 'react'
import { View } from 'react-native'
import { styles } from './styles' //<<-- import
const MyComponent = (props) => {
. (Whatever states and handlers, etc. that your component does)
.
.
return (
<View style={styles.container}> //<<-- usage
...rest of your JSX
</View>
)
}
export default MyComponent
good luck!

React native error - expected a string or a class but got object

I am new to react-native. I was trying to write simple programs found from tutorials in order to familiar with react-native environment. I have researched on the same bug on stackoverflow itself and couldn't find any helpful solution, that's the reason I am writing again.
I was referring to the following tutorial
https://levelup.gitconnected.com/getting-started-with-react-native-in-2019-build-your-first-app-a41ebc0617e2
Following is the code that I have used.
Created a new class named EmojiDict.js
import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
class EmojiDict extends Component {
state = {
'😃': '😃 Smiley',
'🚀': '🚀 Rocket',
'⚛️': '⚛️ Atom Symbol'
};
render() {
return (
<View style={styles.container} >
<Text>this.state['😃'] </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
}
});
Then modified the App.js class as follows:
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import EmojiDict from './src/components/EmojiDict';
export default class App extends Component {
render() {
return <EmojiDict />;
}
}
I have tried various examples and nothing worked when the App.js class gets modified. I am not able to go forward due to this error.
It's looks like you forgot to export the EmojiDict component
instead of class EmojiDict extends Component {
try
export default class EmojiDict extends Component {
may resolve this issue

React Native calling another .js inside App.js render

Is it possible to call another render() inside my App.js render. I just start working with react native, so it might look stupid.
I create the following file. Splash.js
import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default class Splash extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}></Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontWeight: 'bold',
fontSize: 18
}
})
How can I call it inside my App.js to be the default page?
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
// Call the Splash.js
)
}
}
Thanks
There is no need to call render() inside a render() function. You can convert your splash component into a functional component, which just returns the JSX:
import React from 'react';
import {View, Text} from 'react-native';
export default function Splash() {
return (
<View>
<Text>Splash</Text>
</View>
);
}
Your app component will then render the returned JSX like so:
import React from 'react'
import Splash from './your-path-to-the-splash-file'
export default class App extends React.Component {
render() {
return (
<View>
<Splash/>
</View>
);
}
};
You should check out the official react docs: https://reactjs.org/docs/components-and-props.html

React Native: Error 500 when loading custom component

I'm new to React Native and I'm trying to make a custom component for a test app, but I'm getting this error when loading the app from Expo:
Uncaught error: java.lang.Exception: Bundle return code: 500.
Image: https://i.imgur.com/wRTxa8V.jpg
(not enough reputation to post image, sorry)
My project structure is basically as follows:
/TestApp
App.js
/src
/components
CustomButton.js
CustomButton.style.js
CustomButton.style.js
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
buttonContainer: {
width: 100,
height: 20,
alignItems: 'center',
border: '1px solid white',
backgroundColor: 'skyblue'
},
buttonText: {
color: 'white',
fontSize: 20
}
});
CustomButton.js
import React, { Component } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import styles from './CustomButton.style';
export default class CustomButton extends Component {
constructor(props){
this.props = props;
}
render(){
return(
<TouchableOpacity
style={styles.buttonContainer}
onPress={this.props.onPress}>
<Text style={styles.buttonText}>
{this.props.title}
</Text>
</TouchableOpacity>
);
}
}
App.js
import React, { Component } from 'react';
import { Alert, AppRegistry, StyleSheet, View, Text } from 'react-native';
import CustomButton from './src/components/CustomButton';
export default class TestApp extends Component{
render(){
return(
<CustomButton/>
);
}
}
I'm pretty sure the issue is when I try to import the custom component, because the app loads when I comment the line. I've read some questions about this, and it usually happens because the path is incorrect, though I can't figure out what's wrong with my path.
Thanks in advance.
The import for the StyleSheet is wrong in your code, it must be imported from react-native
import {StyleSheet} from 'react-native'
Also constructor is not preceeding with a super class
You need to add
constructor(props){
super(props) <== If you want to access props
this.props = props;
}
The styles are also not valid, since there is no property for border, you may check this for more info.

Invariant violation while importing react native element UI framework

please i have been trying to work with react-native Element framework but i get the error below , but when i remove the import very thing works fine , i tried creating other projects but i still get the same error , but as i said as soon as i remove the import the app works fine .
error i get
my main.js
import React from 'react'
import {
StyleSheet,
Text,
View,
StatusBar,
TextInput,
TouchableHighlight,
TouchableOpacity
} from 'react-native';
import {Input,Icon} from 'react-native-elements';
//import { Container, Header, Content, Footer, FooterTab, Button, Text } from 'native-base';
export default class Main extends React.Component {
render() {
return (
<Input
placeholder='INPUT WITH ICON'
leftIcon={
<Icon
name='user'
size={24}
color='black'
/>
}
/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
justifyContent: 'flex-start',
paddingTop:20,
backgroundColor:'#aaa'
}
});
export default Main;
then my App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Provider} from 'react-redux';
import {configureStore} from './app/store';
import Main from './app/components/Main'
import { createStore, applyMiddleware } from 'redux';
import reducers from './app/reducer';
const store = createStore(reducers);
export default class App extends React.Component {
render() {
return (
<Provider store={configureStore()}>
<Main/>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
})
;
error after #Colin update
As asked by #Colin in the comment section, react-native-elements does not have any container component.
Thats the reason for your issue.
Edited: I request you to go through this link (its a link to the official documentation) and utilise the components which are supported.
Thanks to all ,
i found my mistake actually the doc i was using was 1.0.0 while the node version i was using is version 0.9 . thanks