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
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!
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
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
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.
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