So, I have this project in react which is a map made with react leaflet and I'm trying to call it as a webview inside react-native, but its not working, it apears all blank webview called with react-leaflet on in
And its not the webview problem, beacause I can call other websites inside of it
Here I just changed the url to a youtube page
webview called of youtube page
here's my code `import React from 'react';
import {Text} from 'react-native';
import {WebView} from 'react-native-webview';
import {Container, mapurl} from './styles';
export function WebViewComponent() {
return (
<Container>
<WebView
source={{
uri: mapurl,
}}
/>
</Container>
);
}
`
Here is the leaftlet page that i'm trying to call, I made a deploy on vercel
https://map-webview-test-4xfd.vercel.app/
Related
I get an error if i use the following code. I have run a "pod install", link the library manually. Nothing works.
React-Native Version: 0.69.0
Library-Version: 1.0.7
import React, {Component} from 'react';
import {
Text,
TouchableOpacity, View
} from 'react-native';
// #ts-ignore
import {Beacons} from 'react-native-beacons-manager';
export default class App extends Component {
componentDidMount() {
Beacons.requestWhenInUseAuthorization();
// Beacons.requestAlwaysAuthorization();
// Beacons.allowsBackgroundLocationUpdates(true);
}
render() {
return (
<View>
<Text style={{color: 'white', top: 150}}>test</Text>
</View>
)
}
};
Does somebody know why the error occurs?
IOS
For IOS we need to link it manually. Follow next steps:
Drug RNiBeacon.xcodeproj from node_modules/react-native-beacons-manager/ios to Libraries folder in xcode
Link it to your binaries:
Add this path "$(SRCROOT)/node_modules/react-native-beacons-manager/ios" to Headers Search Paths for your App
Add this paths $(SRCROOT)/../../../../ios/Pods/Headers/Public/React-Core, $(SRCROOT)/../../../../ios/Pods/Headers/Public/Yoga, $(SRCROOT)/../../../../ios/Pods/Headers/Public/YogaKit
to Headers Search Paths for RNiBeacon:
Android
This library doesn't support new versions of react native for Android. You need to use forks:
https://github.com/MacKentoch/react-native-beacons-manager/issues/249
https://github.com/MacKentoch/react-native-beacons-manager/issues/228#issuecomment-964131282
https://github.com/benlui/react-native-beacons-manager
depends on your need
I am building a web app on React Js and trying too build a custom map of floors of building. I followed the article on https://www.highcharts.com/docs/maps/create-custom-maps and created an application using HTML CSS and JavaScript,https://jsfiddle.net/hop9cqxj/92/ however I want it inside of ReactJS. Whenever I paste the map options into the React JS variable. I get the error below:
Error
Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=map
The demo work's link is here: https://codesandbox.io/s/inspiring-sunset-o3pf92
missingModuleFor: map
You need to use Highmaps source code and mapChart chart constructor type.
import Highcharts from "highcharts/highmaps";
import HighchartsReact from "highcharts-react-official";
import React from "react";
const option2 = {...};
export default function DeltaSecond() {
return (
<>
<HighchartsReact
highcharts={Highcharts}
options={option2}
constructorType="mapChart"
></HighchartsReact>
</>
);
}
Also, I have noticed that Highcharts doesn't work in StrictMode from the newest React, so you can report a potential bug on highcharts-react github: https://github.com/highcharts/highcharts-react
Live demo: https://codesandbox.io/s/nifty-satoshi-xxt-xxtkp9?file=/src/components/buildings/Delta/delta2nd.js
Docs: https://www.npmjs.com/package/highcharts-react-official#options-details
I am using react in rails. But when I run the app, I get an error: Uncaught Error: Target container is not a DOM element.
My index.jsx file looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from "react-redux";
import thunk from "redux-thunk";
import reducers from "../bundles/HelloWorld/reducers/index.js";
import App from "../bundles/HelloWorld/components/App"
let store = createStore(reducers, applyMiddleware(thunk))
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
Also, I using this in application.html.erb like this:
What could be the error behind this?
Add an element with id='root' to the page e.g.
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.body.appendChild(document.createElement("div"))
);
render expects a DOM element as the second argument, which doesn't exist in your case. You could either set it on the page itself or generate it dynamically as shown above.
I'm loading a webpage via http, and this webpage renders a webview like this (using react)
render() {
return <webview
nodeintegration="true"
preload={`file://${what_should_i_put_here}`}
src={`some_website`}
/>;
}
I would like to import preloadScript from 'npmPackage/lib/preloadScript.js', and inject the preloadScript into the webview.
Is that achievable?
__dirname gives / because of the webpack config
is obviously part you may need adjust. So 1. either main process correctly resolve path and send to ipc, then react component picks up render cycle or 2. configure wepback's external to not to wrap up node's internal so renderer directly access those context.
I tried to load a HTML page from my local path in Android using React Native's WebView, as follows.
var WebViewAndroid = require('react-native-webview-android');
But I am getting a blank page
<WebViewAndroid
ref="webViewAndroidSample"
javaScriptEnabled={true}
geolocationEnabled={false}
builtInZoomControls={false}
url={webapp}
style={styles.containerWebView}
/>
my local path is /storage/emulated/0/Android/data/'myappid'/files/abcd/index.html