We are testing the code push implementation for our ReactNative application to push js updates.
Changes Done:
Created App center login and connected to the github repo.
Deployed CodePush from my react native project using cmd
appcenter codepush release-react -a chandrasekarg/ReactNativeCodePush
-d Staging
Modified app.js File as below
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import codePush from "react-native-code-push";
let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME };
class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to Code Push Test !</Text>
</View>
);
}
}
App = codePush(codePushOptions)(App);
export default App;
Where should i have to add the details about my AppCenter account and the Project name to look for the JS bundle.?
how to test the Code Push with Android Emulator.?
You can either hard code ur deployment key in MainActivity.java or have it loaded dynamically.
Please refer to https://learn.microsoft.com/en-us/appcenter/distribution/codepush/react-native for more information
Related
I have seen this issue posted on stack overflow many times with no clear answer. I'm hoping this question can help me and others out.
I wish to render a URL in react native using react-native-webview
I started a blank react native project using expo init my-app. I ran npm i react-native-webview and react-native link react-native-webview. I then created a file defined as the following
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class WebViewTest extends Component {
render() {
return (
<WebView
source={{ uri: 'https://www.google.com/' }}
style={{ marginTop: 20, width: 400, height: 400 }}
/>
);
}
}
export default WebViewTest;
My app.js imports and renders that file like the following
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import WebViewTest from './Components/WebViewTest';
export default function App() {
return (
<WebViewTest />
);
}
I test this code by running expo start and I open up my project in a web browser.
I then see the following in the browser
I don't get any errors or warnings so where am I going wrong?
As Per The Expo Docs For WebView -
https://docs.expo.io/versions/latest/sdk/webview/
https://www.npmjs.com/package/react-native-webview
It Doesn't Work On Web Using EXPO
I wish to add the React Native MapView Component to the new project I have created using expo. The instructions explain that I need to modify files in the iOS and Android folders, but expo doesn't generate iOS and Android folders, right?
Can I use this component in my project?
It's included as per https://docs.expo.io/versions/latest/sdk/map-view/
"No setup required for use within the Expo app, or within a standalone app for iOS."
import React from 'react';
import MapView from 'react-native-maps';
export default class App extends React.Component {
render() {
return (
<MapView style={{flex: 1}} />
);
}
}
I use to set the main file of my project using AppRegistry.registerComponent(), but projects created with Expo does not support it.
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent('my App', () => App);
Then, I use src/App.js as my main file. How can I do it using Expo?
Thanks
Straight from React Native docs facebook.github.io/react-native/docs/appregistry
AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking AppRegistry.runApplication.
In other words, since Expo isn't a complete real app because it's running on your device Expo app, doesn't have many methods available for you from react-native. Read Expo's docs for more information.
You only need on your App.js:
import React from 'react';
import { View, Text } from 'react-native';
export default () => (
<View>
<Text>Some Text</Text>
</View>
);
Check out this snack: #abranhe/stackoverflow-56694295
I wonder how I can save the value from qrcode scanner used in React Native and show the value to another page automatically. Thus, once the qrcode has been scanned, it will be redirected automatically to another page.
Is it possible to use React Navigation?
You can use react-native-qrcode-scanner the library to create this type of functionality.
react-native-camera is a dependency for this package that you'll need to add to your project. To install, run the following commands:
npm install react-native-camera --save
react-native link react-native-camera
After that install and link react-native-qrcode-scanner by the following commands:
npm install react-native-qrcode-scanner --save
react-native link react-native-qrcode-scanner
react-native link react-native-permissions
Here is a sample code for QR scanner
import React, {Component} from 'react';
import {StyleSheet, Text, View, AppRegistry, TouchableOpacity, Linking} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
export default class App extends Component {
onSuccess(e) {
//here you can do whatever you want to do on a successful scan
alert(e.data);
}
render() {
return (
<View style={{flex:1, justifyContent: 'center',}}>
<QRCodeScanner
showMarker={true}
onRead={this.onSuccess.bind(this)}
/>
</View>
);
}
}
If have face any difficulty in installation you can visit this link: https://www.npmjs.com/package/react-native-qrcode-scanner
I am trying to run my react native app on my device .
So I am running react-native start
everything looks fine.
and when running react-native run-android I get this error
otherwise, I get this error in my device
My issue was the name I gave the project differed from the name that was being registered in AppRegistry
AppRegistry.registerComponent('proj', () => proj)
proj needs to be the same as the name of the project in the gradle and config files.
You need to export the class. Use the code below
import React, { Component } from 'react'
import { AppRegistry, Text, View } from 'react-native'
export default class proj extends Component {
render() {
return (
<View style={styles.container}> <Text > Welcome to PutainDeBiere! </Text> </View> )
}
}
AppRegistry.registerComponent('proj', () => proj)
Delete / uninstall first the APP installed and then do a clean install of it and see if it works.