React Native & Meteor implementation - ios

I'm working on a react native app with a meteor backend. I know to tie these two together I have to use the node package ddp-client for the app to connect. https://www.npmjs.com/package/ddp-client
But what is the best practice for going about this. Should I:
Define the DDPClient and connect in index.ios.js where i keep connected and find some way to issue requests from the main app component? (I wouldnt know how to do this however but it would be a start.)
Only connect through dpp on each component that I need this for and issue a request each time?
Really any real example would help. Most of the code I find online are single page examples with not much else. Or just a push in the right direction.
p.s. The app is a marketplace. Thanks!
'use strict';
var React = require('react-native');
var {
AppRegistry,
NavigatorIOS,
StyleSheet,
StatusBarIOS,
} = React;
var DDPClient = require("ddp-client");
class AppWrapper extends React.Component{
componentDidMount() {
var ddpClient = new DDPClient({url: 'ws://localhost:3000/websocket'});
ddpClient.connect(function(error, wasReconnect) {
if (error) {
console.log('DDP connection error!');
return;
}
if (wasReconnect) {
console.log('Reestablishment of a connection.');
}
console.log('connected!');
});
}
render(){
return(
<NavigatorIOS
barTintColor='black'
titleTextColor='white'
tintColor='white'
style={styles.container}
translucent={false}
initialRoute={{
backButtonTitle: ' ',
component: Homeios,
title: 'hombro',
}}
/>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
},
});
AppRegistry.registerComponent('someApp', () => AppWrapper);

You can use react-native-meteor package in your react native app which is pretty easy. https://www.npmjs.com/package/react-native-meteor check this link for documentation it has many awesome functions including Accounts package ready to use.

Related

React Native/iOS Camera Permission: Show alert to turn on permission from settings for users who disallowed camera access?

I am building an app using React Native and photo upload is one of its key functions. Here is what I am trying to do:
When the user clicks on the button to open the camera roll, tell whether the user allowed camera access or not.
If the user didn't allow, show an alert to ask the user to turn on the permission from settings to ensure proper experience on the app.
Where should I look at to start tackling this? I am new to programming in general and not familiar at all with native code. I know this is a high-level question so some high-level guidance will be appreciated. Thanks!
You can start at looking at react-native-permissions module. It allows you to ask for any kind of permissions that a mobile app can require, and also the dialogs are handled natively so you dont have to worry about building the alerts yourself.
https://github.com/zoontek/react-native-permissions
Here's an example on how to handle image selection with permissions
import ImagePicker, {
ImagePickerOptions,
ImagePickerResponse,
} from 'react-native-image-picker';
import { openSettings } from 'react-native-permissions';
import { alertWrapper } from './alert';
export const selectPicture = (options: ImagePickerOptions) => {
const pickerPromise = new Promise<ImagePickerResponse>((resolve) => {
try {
ImagePicker.showImagePicker(options, (response: ImagePickerResponse) => {
if (response.didCancel) {
return;
}
if (response.error) {
if (response.error.includes('permissions')) {
alertWrapper('Error', response.error, [
{ text: 'Open Settings', onPress: () => openSettings() },
]);
}
return;
}
resolve(response);
});
} catch (e) {
throw e;
}
});
return pickerPromise;
};

How can I make React Native in Android aware of a click event in a tooltip in a Highcharts chart?

I have a React Native application built with Expo. On How can I add links in a Highcharts tooltip that will open on mobile's browser? I was able to pass a URL to Highcharts so that when a tooltip is clicked, that URL is opened:
return(
<View style={styles.container}>
<ChartView
onMessage={m => this.onMessage(m)}
config={config}
/>
</View>
This triggers this method to open the URL:
onMessage = (m) => {
let data = JSON.parse(m.nativeEvent.data);
Linking.openURL(data.url)
};
And the URL gets populated through a global variable window.myURL and sending the message with postMessage():
render() {
let Highcharts = "Highcharts";
let config ={
...
plotOptions: {
series: {
stickyTracking: false,
point: {
events: {
click: function(e) {
window.postMessage(JSON.stringify({'url': window.myUrl}));
}
}
}
},
},
tooltip: {
useHTML: true,
formatter: function () {
window.myUrl = extras.url;
return `<div class="text">some text</div>`;
}
};
This works well on iOS (both physical and emulator), but does not on Android (neither physical nor emulator).
I have gone through different Github issues such as onMessage not called in native code even though sent from webview( android) and react native html postMessage can not reach to WebView and they tend to suggest using some timeout on window.postMessage(). However, I see that even this does not work:
plotOptions: {
series: {
point: {
events: {
click: function(e) {
setTimeout(function() {
console.log('bla');
window.postMessage(JSON.stringify({'url': window.myUrl}));
}, 200);
}
}
}
},
},
Since even console.log() does not work, it looks to me as if the click event is not being caught by Android.
How can I make Android aware of this event so that I can go through the message and then open the URL?
The "click" event is fine. Problem is that, RN core's <WebView> implementation for Android is flawed at polyfilling window.postMessage(). This issue has been well discussed in this github issue.
So it seems the nature of problem, is RN has to polyfill the native window.postMessage for some reason, but the override didn't take place timely, causing window.postMessage calls still made to the native one.
One solution (for Android) proposed in that github issue, is simply stop using the native window.postMessage, and directly use the internal interface, which is the actual polyfill function.
// in place of `window.postMessage(data)`, use:
window.__REACT_WEB_VIEW_BRIDGE.postMessage(String(data))
One heads-up though, this API is not public and might be subject to change in future.

Apache Cordova listens event too late on ios after action

I develop iOS app with Apache Cordova on Xcode. The problem is when I test my app on device, Cordova listens events too late. For example, when I click share button on iOS, the share box runs after 2 minutes. Another example is I use admob pro pluginfor admob, the ads run after 5 minutes on device ready. I recognized that this problem is exist only on Cordova and its plugins events.
I checked and tried everything but couldn't find a solution. On android platform everything is work fine.
How can I fix this? Is there anybody can help me ?
the admob responding after 2-5 minutes. I did type simple javascript function that is alert for device ready. its working fine.
the code snippet is below;
function reklamYukle() {
var admobid = {};
// TODO: replace the following ad units with your own
if (/(android)/i.test(navigator.userAgent)) {
admobid = { // for Android
banner: 'ca-app-pub-5534669392136777/3711456161',
interstitial: 'ca-app-pub-5534669392134577/5454702358'
};
} else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = { // for iOS
banner: 'ca-app-pub-5534669392136777/7457497261',
interstitial: 'ca-app-pub-5534669392136777/5896501200'
};
} else {
admobid = { // for Windows Phone
banner: 'ca-app-pub-6869992474017983/8878394753'
};
}
AdMob.createBanner({
adId: admobid.banner,
position: AdMob.AD_POSITION.BOTTOM_CENTER,
overlap: false,
offsetTopBar: true,
bgColor: 'black',
autoshow: true
});
AdMob.prepareInterstitial({
adId: admobid.interstitial,
autoShow: true
});
}
function onDeviceReady() {
reklamYukle();
}
document.addEventListener("deviceready", onDeviceReady, false);

Looking for a popup webview for React Native that the user can dismiss (Android)

I need to open up a web view that the user can easily dismiss.
It should be able to display a given URL, and have an easy option to dismiss (like an x button) - navigation buttons, should also be presented.
I looked up at Awesome React Native and yet couldn't find anything like that.
You can use React Native WebView component with a View wrapper to achieve it. Create your own MyWebView component like this:
class MyWebview extends React.Component{
constructor(props, context) {
super(props);
this.goBack = this.goBack.bind(this);
}
goBack() {
this.props.navigator.pop();
}
render() {
if (!this.props) {
return null;
}else{
return (
<View style={[GlobalStyle.container, style.container]}>
<NavigationBar />
<WebView
startInLoadingState={true}
source={{uri: this.props.route.url}}
/>
</View>
);
}
}
}
MyWebview.propTypes = {
navigator: PropTypes.object,
route: PropTypes.object
};
export default MyWebview;
And you can pass the url as param in your route function:
let passObj = Object.assign({}, Routes.MyWebview, {
url: url
});
this.props.navigator.push(passObj);
Try this one react-native-custom-tabs
It worked really well for me.

Permission denied - geolocation in React Native

I've been playing around with React Native, getting custom locations to work and setting the "NSLocationWhenInUseUsageDescription" key. The error, when running on the ios simulator, is this:
{
"code": 2,
"message": "Unable to retrieve location.",
"PERMISSION_DENIED": 1,
"POSITION_UNAVAILABLE": 2,
"TIMEOUT": 3
}
This is what I have, pretty much straight from the Geolocation example page https://facebook.github.io/react-native/docs/geolocation.html
/* eslint no-console: 0 */
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
StyleSheet,
Text,
View,
} = ReactNative;
export default class GeolocationExample extends React.Component {
state = {
initialPosition: 'unknown'
};
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
var initialPosition = JSON.stringify(position);
this.setState({initialPosition});
},
(error) => alert(JSON.stringify(error)),
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
);
}
render() {
return (
<View>
<Text>
<Text style={styles.title}>Initial position: </Text>
{this.state.initialPosition}
</Text>
</View>
);
}
}
var styles = StyleSheet.create({
title: {
fontWeight: '500',
},
});
Any help would be appreciated!
You need to set the location in the Simulator. There is an option for that in simulator menus as described in this question: Set the location in iPhone Simulator
In Simulator navigator, Choose Debug, at bottom choose Location, next choose Apple, then CMD+R to reload and it worked.
As Santosh suggested, you need to set the location in the iOS Simulator: Debug > Location.
Keep in my mind that from time to time, you will get the "PERMISSION_DENIED " error even tho you set the location in the simulator. If this is happening, you need to select a different predefined location and then the error goes away.
Adding an update to Santosh's answer, please note that in my current version of simulator (11.4) the option to set location is found in:
Features -> Location
(Posting this as a new answer since I am not allowed to comment yet).
I was testing on a real device and it was giving the same error.
I just restarted my device and it started working. Anyone who is still facing the issue can give it a try.
So, for those who are still looking for the answer in Physical device
if you're using
import Geolocation from '#react-native-community/geolocation';
then
Geolocation.getCurrentPosition(
info => {console.log(info)},error=>{console.log(error)}});
if you don't handle the error it will throw error or make your app crash.
Now it's iOS Simulator: Features > Location.

Resources