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
Related
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/
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
Like this:
How can remove this warning?
As the warning states, setBackgroundColor style can only be applicable for Android version only.
You can solve this warning by specifying the style to apply only for Android version using below snippet.
import { Platform } from 'react-native' // on top of the file
style={{ setBackgroundColor : Platform.OS === 'android' ? 'blue' : null }} // style of the component
If you wish to disable all yellow warnings. Put below snippet in app.js after the imports and before class initialization.
//Disable warnings in both Android and IOS
console.disableYellowBox = true;
I've been trying to set routing to my ionic2 app which is still under development. I'm completely new to the concept of routing.So far whatever I've done is based on NavCtrl.push() or NavCtrl.setRoot().I want to know if routing is possible in ionic2.
But on following the code from official website:https://angular.io/docs/ts/latest/guide/router.html. I got a few errors while running the app. Here is my app.routing.ts file which I created for routing.
import { Routes, RouterModule } from '#angular/router';
import { Contest } from '../pages/contest/contest';
export const appRoute: Routes = [
{ path: '', redirectTo: 'Contest', pathMatch: 'full' },
{ path: 'Contest', component: Contest}
]
export const appRouting = [
RouterModule.forRoot(appRoute)
];
I imported this statement into app.component.ts and injected it into the constructor.
import { Router } from '#angular/router';
constructor(public platform: Platform,protected _router: Router) {
this.initializeApp();
In the app.module.ts I imported the following statements and also set them in the imports inside #ngModule
import { RouterModule, Routes } from '#angular/router';
import {appRouting} from './app.routing';
imports: [appRouting,
IonicModule.forRoot(MyApp)
]
I put the <router-outlet></router-outlet>
in my app.html file.On doing all this when I try to run I get the following errors.
Runtime Error:
WEBPACK_IMPORTED_MODULE_0__angular_core.Version is not a constructor
Typescript Error:
Module '"C:/Users/Impromptu_coder/dem/node_modules/#angular/core/index"' has no exported member 'NgProbeToken
Typescript Error:
Module '"C:/Users/Impromptu_coder/dem/node_modules/#angular/core/index"' has no exported member 'Version'.
I have gone through many sources on the internet about routing in ionic2 and angular2 but most of them seem to be deprecated. Here are the current versions
I'm using:
Ionic2 : v2.2.1
npm: 3.10.10
cordova : 6.5.0
Angular2: Final Release rc5
Kindly tell me what is the exact procedure to set up routing in my app. Do i need to install any dependencies?
Make sure you're dependencies are set according to what's specified in ionic change log:
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md
Is there a reason you want to use angular routing in your ionic 2 app? The ionic 2 navigation system is very intuitive and completely different from that of angular. I would suggest sticking with the built in ionic navigation unless you can define a very real need to do otherwise. Unless you're just trying to use angular navigation out of curiosity. In that case, get your dependencies up to date and give it another try.
I am trying to retrieve the Data URL of a picture saved to iPhone local storage in Ionic Native, running on real device, not simulator.
I am using File.readAsDataURL
I used X-code to look into my phone's local storage and I can see the image at this location.
/var/mobile/Containers/Data/Application/* My APP ID */Documents/www/assets/images/image.png
Here is my code:
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { File } from 'ionic-native';
declare var cordova: any;
#Component({
selector: 'get-picture',
templateUrl: 'get-picutre.html'
})
export class GetPictureComponent {
fs:string = cordova.file.documentsDirectory;
constructor(
public platform: Platform
) {}
ionViewDidEnter() {
this.platform.ready().then(() => {
console.log("FileSystem", this.fs); //logs FileSystem file:///var/mobile/Containers/Data/Application/* My APP ID */Documents/
File.readAsDataURL(this.fs, 'www/assets/images/image.png')
.then((imgData) => console.log('Image Data', imgData))
.catch((error) => console.log('error', error)); //Logs error {"code":1,"message":"NOT_FOUND_ERR"}
});
}
}
I have tried basically the same thing with
window.resolveLocalFileSystemURL(file:///var/mobile/Containers/Data/Application/* My APP ID */Documents/www/assets/images/image.png
and I get error code 1 again.
I updated my config.xml file with these preferences:
<preference name="iosExtraFilesystems" value="library,library-nosync,documents,documents-nosync,cache,bundle,root" />
<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,root" />
Does anyone know why this would not be working?
Ionic Version - 2.1.14
Thanks in advance!
I did a little bit more digging into this issue.
First I did a File.listDir() at my root documents directory (cordova.file.documentsDirectory). I found that the the only folder in the documents directory, that the File System could see, was "NoCloud".
Even though Wikitude is successfully putting images in a folder in this directory called "/www/assets/images/" the file system cannot see, write, or read to it.
I set up wikitude to save images into the "NoCloud" folder and now I can successfully use File.readAsDataUrl()to get base64 image data from the "NoCloud" folder.
Hope this helps someone.