I want to display (android/ios) 360 tour with react-vr but for doing that I need to open the tour in a WebView component using server request url, but all the packages that I have found do not work or return the same bug:
react-native-static-server
react-native-http-bridge
here you can find my problem with react-native-static-server
so even if I follow the tutorial and I respect all the rules the local server does not work and shows me this bug.
This is the code off app.js:
import React, {Component} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import StaticServer from 'react-native-static-server'; let server = new StaticServer(8080); // Start the server server.start().then((url) => { console.log("Serving at URL", url); }); server.stop(); type Props = {}; export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Text style={styles.welcome}>Welcome to React Native!</Text> <Text style={styles.instructions}>To get started, edit App.js</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, }, });
Someone can suggest a way to implement the server in my react-native app or a tutorial to solve this problem thanks
Related
I newbie for react native. when I learning to hello world in app.js. when I run for android "native-react run-android" build success but not working on my phone. not change
this is my code in app.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Hello, Steven Wiaji, S.Kom</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</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,
},
});
this is adb running
this is when i run on my phone
There's nothing wrong with the code. Probably issue with node_modules. You might wanna delete the folder and do a npm i or yarn again.
Here's a working example.
https://snack.expo.io/S1oozjjUV
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.
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>
)
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