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
Related
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
I'm trying to learn to work with android native module and using the toast example in the react-native docs. (https://facebook.github.io/react-native/docs/native-modules-android). However, I am facing an issue where the native module that I was trying to export was unable to be resolved/undefine.
My directory structure is as followed:
example
-android
-app
-src
-main
- java
-com
-example
-CustomToastPackage.java
-ToastModule.java
-MainActivity.java
-MainApplication.java
- res
- AndroidManifest.xml
-ios
-app.js
-index.js
-package.json
My index.js:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {NativeModules} from 'react-native';//Added this
module.exports = NativeModules.ToastAndroidTutorial;//Added this
AppRegistry.registerComponent(appName, () => App);
And my App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ToastExample from './ToastExample';//Added this
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}>
ToastExample.show('Awesome', ToastExample.SHORT);//Added this
<Text style={styles.welcome}>Welcome to React Native!</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 the error I am getting.
Based on the code you are showing, this is because you are not correctly importing the Module in your App.js, you should create a file named ToastExample.js in the same directory as App.js and then place
import {NativeModules} from 'react-native';
module.exports = NativeModules.ToastExample;
if in your ToastModule.java you have
#Override
public String getName() {
return "ToastExample";
}
on the getName() method.
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