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}} />
);
}
}
Related
I hope this is the right place to ask. I'm developing a react-native-mapbox-gl/maps app on Windows 10, and the MarkerView component just isn't showing up. Here's the App.js code for reference:
import React, { Component } from 'react';
import {
StyleSheet,
} from 'react-native';
import MapboxGL from '#react-native-mapbox-gl/maps';
MapboxGL.setAccessToken('MY_TOKEN')
export default function App() {
return (
<MapboxGL.MapView
style={{ flex: 1, width: '100%' }}
styleURL={MapboxGL.StyleURL.Street}
showUserLocation={true}>
</MapboxGL.MapView>
);
};
The MapView component and other MapboxGL components are working properly, yet whenever I try to invoke the MapboxGL.MarkerView component (be it inside of Mapview or in any other place in the App), the program does not recognize it. Going to the #react-native-mapbox-gl/maps module yields no results either, as the MarkerView class is missing. Has it been deprecated and the GitHub docs not updated? Is there a replacement?
Thanks in advance.
Notes:
RN Version: 0.62.2;
react-native-mapbox-gl/maps version: 8.1.0 (master).
The Mapbox Token has been properly installed and used;
There are no installation issues either on the client or server sides of the app.
you can use MapboxGL.PointAnnotation component instead
Or you can user 8.0.0 version
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 am new to React Native and i am trying to implement the Instagram auth login in my app. I created the project using expo cli.
I have tried 2 solutions so far-
i used the instagram api provided for authentication https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code...
this api returns me a HTML template, when i render that template inside WebView component of react native, it just shows the instagram splash screen with thumbnail icon and nothing more.
i used react-native-instagram-login npm module but that didn't work coz it's probably a native module and not supported by expo.
I have also looked upon auth0 module, but i guess it also is a native module itself.
Have you configured uri correctly with webView?
example.js
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
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
If I create a new empty react-native project with this code in App.js, application will be crashed, without providing any error.
import React from 'react'
import { ART, View } from 'react-native'
const { Surface, Group, Shape } = ART
export default class App extends React.Component {
render(){
return (
<View>
<Surface width={200} height={100}>
<Group x={0} y={0}>
<Shape
d={"M-68.9646319937036,-29.476762610114324A75,75,0,0,1,-49.345310456503256,-56.48044206582762L-20.635195356782273,-21.775874553905552A30,30,0,0,0,-27.086713440010442,-12.896121704557451Z"}
stroke={"#2ca02c"}
strokeWidth={3}
/>
</Group>
</Surface>
</View>
)
}
}
Am I use ART library incorrectly? I also tried
react-native link art
but it didn't work.
Packages:
react-native: 0.49.3
react: 16.0.0-beta.5
Target Platform: Android Emulator - Nexus_5x_API_26_x86
You can resolve this issue by using software graphics emulation in the AVD properties