im just learning how to use react native but im having a little trouble when im trying to import an external component, i got an unexpected token (13:6) error. i jsut cant figure it out what im doing woring, please help me and show me what is wrong and why i cant import the component .
thank you
this is my code
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import ComponenteTexto from './componenteTexto';
export default class primero extends Component {
render() {
return (
<View style={styles.container}>
<componenteTexto/>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu,{'\n'}
<Text style={styles.instructions1}>
te amo tefita {5*2}
</Text>
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: 'skyblue',
marginBottom: 8,
},
instructions1: {
fontSize: 25,
textAlign: 'center',
color: 'black',
marginBottom: 8,
},
});
AppRegistry.registerComponent('primero', () => primero);
`
and this is the component i am trying to import
import React, {Component} from 'react';
import {
View,
Text
} from 'react-native';
export default class ComponenteTexto extends Component {
render() {
return{
<View>
<Text>
Prueba
</Text>
</View>
}
}
}
and this is what i get as error
enter image description here
Your ComponenteTexto component is using { } instead of ( ) in the return statement so it's not returning the expected type of object. Try changing it to:
return (
<View>
<Text>
Prueba
</Text>
</View>
)
Related
code is not reading the values of font-weight and font size but perfectly working with the container. how do I fix it?
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
}
})
In this line of code
<Text> style={styles.title} </Text>
please change ti :
<Text style={styles.title}>my data </Text>
I was editing one of the '.js' files and after saving my work after some changes, when I typed 'rr' to refresh application on the emulator, I kept getting this message.
Android Application Emulator keeps stopping
App info
Close app
enter image description here
After creating Form.js and under a components folder in my project in the visual studio code editor and importing it in my Login.js that's where the error started to occur. IDK what I did wrong. I'm new to React Native and am just learning.
Form.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
export default class Login extends Component<{}> {
render(){
return(
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Email"
placeholderTextColor = "#ffffff"
/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Password"
placeholderTextColor = "#ffffff"
/>
</View>
)
}
}
const styles = StyleSheet.create({
container : {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
inputBox: {
width:300,
backgroundColor:'rgba(255,255,255,0.3)',
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color:'#ffffff',
marginVertical: '10'
}
});
Login.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
StatusBar
} from 'react-native';
import Logo from '../components/Logo';
import Form from '../components/Form';
export default class Login extends Component<{}> {
render () {
return(
<View style={styles.container}>
<Logo/>
<Form/>
</View>
)
}
}
const styles = StyleSheet.create({
container : {
backgroundColor: '#29b6f6',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});
Here is your solution
Your application is crashed because of this props underlineColorAndroid="rgba(0,0,0,0)" in your TextInput and also minor change in inputBox style remove string value marginVertical: "10" to marginVertical: 10
Form.js
import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
export default class Login extends Component {
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.inputBox}
// underlineColorAndroid="rgba(0,0,0,0)"<---Comment this code---
placeholder="Email"
placeholderTextColor="#ffffff"
/>
<TextInput
style={styles.inputBox}
// underlineColorAndroid="rgba(0,0,0,0)"<---Comment this code---
placeholder="Password"
placeholderTextColor="#ffffff"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
inputBox: {
width: 300,
backgroundColor: "rgba(255,255,255,0.3)",
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color: "#ffffff",
marginVertical: 10 <-----Remove string to number---
}
});
Output:--
So I'm new to react native and I am following this tutorial video, and I can't seem to be able to import the 'Splash' component.
This is the error message I get
Error Message
And this is the code I have written
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
TextInput,
} from 'react-native';
import Splash from './splash';
export default class App extends Component<{}> {
render() {
return (
<Splash/>
);
}
}
And the component I want to import
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class Splash extends Component {
render() {
return(
<View style={styles.wrapper}>
<View style={styles.titleWrapper}>
<Text style={styles.title}>Hello World!</Text>
</View>
<View>
<Text style={styles.subtitle}>Powered by React
Native</Text>
</View>
</View>
);
}
}
const styles = Stylesheet.create({
wrapper: {
backgroundColor: 'red',
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
title: {
color: 'white',
fontSize: 35,
fontWeight: 'bold',
},
subtitle: {
color: 'white',
fontWeight: '200',
paddingBottom: 20
},
titleWrapper: {
justifyContent: 'center',
flex: 1
}
});
Any help would be greatly appreciated.
There are 2 solutions you can do.
1) Have you tried re-running your emulator. Sometimes you just need to rerun the emulator again as it does not pick up your files during first run.
2) import Spalsh from './Splash you need to capitalize your Splash
3) Check your file path to splash. Its most likely incorrect.
Need some help with React Native. Searched in Google, but didn't find any solution.
I have one project which works on android. Here code:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class MyApp extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('MyApp', () => MyApp);
But when i try to add my own component it like this:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import MainPage from "./app/components/MainPage/MainPage";
export default class MyApp extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
<MainPage/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('MyApp', () => MyApp);
i get error in emulator:
Can somebody help?
Code for component MainPage:
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, Text} from 'react-native';
export default class MainPage extends Component {
render() {
return (
<View>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
);
}
}
MainPage.propTypes = {}
MainPage.defaultProps = {}
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('MainPage', () => MainPage);
I find solution. It was because of file format. It should be .js and not .jsx. After this correction all works fine. I hope it will help someone
Trying to load a big image fails in react-native. Using a smaller image works as intended but a big one just doesn't show and no error is thrown.
There is a limitation on how big a image can be in React-native? Or in Android?
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
export default class RobberJob extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
<Image source={require('./assets/map.png')} style={{width:200, height:200}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('RobberJob', () => RobberJob);
If your image is really huge, wait a moment until it's loaded. Or is your image is just white?! ;-)
Here's your code with a big (5360 × 3560) image and it's working: https://repl.it/Iqe9