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
Related
I Am working on this to implement Dark Mode in React Native using React Navigation. but it changes only the bottom bar navigator not the screens inside that. can you help me with this
Snack Code
https://snack.expo.io/#belgin/news-app
You're responsible for styling inside your own components. You're styling background as light, setting navigation theme to dark is not gonna magically change the colors you have defined.
For changing themes to work for your components, you need to use the useTheme hook to set colors in your own components instead of hardcoding them.
import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTheme } from '#react-navigation/native';
function MyScreen() {
const { colors } = useTheme();
return (
<View style={{ flex: 1, backgroundColor: colors.background }}>
{/* screen content */}
</View>
);
}
https://reactnavigation.org/docs/themes/#using-the-current-theme-in-your-own-components
Other method is that, you can also create a state which can store your current view-mode (light/dark mode). This is very simple to implement using react-redux. You can refer this video to get better understanding of react and redux.
This is far more simpler implementation of redux.
Note - dependencies such as thunk, react-redux, etc etc are not installed in this video. You can identify which dependencies you're gonna need step-by-step by following error that came in your way. Eg. if createStore gives error try to import createStore as legacy_createstore like done in this question
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
As I know about it, This checks and gives warnings for React-Native code and its lifecycles.
I read about it from What is StrictMode in react?
How can I use it in react native ?
Here is a simple example to use StrictMode in React Native
StrictMode can be directly imported from React and can used like wrapping up View inside it.
import React, {Component, StrictMode} from 'react';
import {View} from 'react-native';
class Example extends Component {
render() {
return (
<StrictMode>
<View />
</StrictMode>
);
}
}
export default Example;
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