Can we use Universal Links with react native navigation? - ios

Problem:
In my project I have done the deep-linking part successfully with react navigation. Then I try to implement Universal Links for IOS too. When the link is clicked it is successfully opening the app with universal links in IOS. But the problem is it is not firing the linking object added to the Root navigation. This is how my code looks with root navigator.
export default function App() {
const linking = {
prefixes: ['https://mydomain/meeting'],
config: {
screens: {
login: 'login/:data',
},
},
};
return (
<NavigationContainer linking={linking}>
<AppStackNavigator />
</NavigationContainer>
);
}
Can someone help me to solve this issue? I tried lot to find out a way to do this but I was unable to do so. Thank you!

Related

Nightwatch.js - Cannot perform touchAction or scroll with Appium (iOS Simulator), looking for solutions

I am running some tests via Nightwatch and Appium, and I have been unable to successfully implement a scroll action using the iOS Simulator. My tests are set up to be able to run on a Chrome, Safari, or Firefox browser, or an iOS Simulator using Safari. The application is built using React, and I am using Javascript. Everything runs smoothly until I have to scroll to a particular element on the screen.
When using the web browsers, all I need to do is send a .click() method on a specific element, and that automatically brings the element into view, but on the iOS Simulator that does not appear to be the case.
This is what I have set up for iOS in my nightwatch.conf.js file. So far any methods that I have seen from my searching online have come up short. The Appium docs have several methods listed, but none of them have been executable, or have failed silently. Does anyone have a possible solution or suggestion about how to properly execute a scroll using this set up? Thanks, and much appreciated
"ios": {
"selenium_start_process": false,
"selenium_port": 4723,
"selenium_host": "localhost",
"silent": true,
"automationName": "XCUITest",
"desiredCapabilities": {
"browserName": "safari",
"platformName": "iOS",
"platformVersion": "12.2",
"deviceName": "iPad Pro (9.7 -inch)"
}
},
Here is an example of what I have tried to implement (The goal is to move to the button element and click it once it's into view - it's a dropdown)
browser
.assert.elementPresent('div[data-mr="quiz-dont-know"]')
.click('div[data-mr="quiz-dont-know"]')
.assert.elementPresent('div[data-mr="grey-info"]')
browser.pause(2000)
browser.element('css selector', 'div[data-"mr=grey-info"]', function(button) {
console.log("THIS ELEMENT IS " + button.value.ELEMENT);
browser.moveTo(button.value.ELEMENT, 10, 10)
browser.elementIdClick(button.value.ELEMENT);
})
.pause(2000)
.assert.elementPresent('div[data-mr="grey-info-options"]')
I think you want to use ".scrollIntoView()"
buttons.value.forEach((button, index) => {
browser.elementIdText(button.ELEMENT, result => {
if(result.value === 'None') {
console.log("THIS ELEMENT IS " + button.ELEMENT);
browser.execute(function(button) {
//var elmnt =button // based on user comment
var elmnt = document.querySelector([data-mr="grey-info"]')
elmnt.scrollIntoView();
});
browser.elementIdClick(button.ELEMENT);
}
});
});
Piggybacking on Jortega's suggestion, I found a solution. Though his initial suggestion was unsuccessful, I wrestled with it a bit and found out that if I use document.querySelector([data-mr="grey-info"]') and assign a variable to that, THEN I was able to call the scrollIntoView method. Much obliged

Open iOS Developer Menu programmatically / command

This isn't exactly a critical bug, but I always feel weird shaking phones at my desk at work, even more so when it doesn't work first time. If we start talking about shaking iPad Pros, it just feels wrong.
On Android, I can run the following command: adb shell input keyevent KEYCODE_MENU
Is there an iOS equivalent?
Thanks
Sadly no.
You can vote for it on Canny here. Until then, your best bet for iOS is to use a workaround such as one of the ones suggested from the original Github issue. For example, creating your own multi-touch shortcut for opening the dev menu as seen here. It's not ideal but it should work. (code copy pasted below)
import React from 'react';
import {
View,
PanResponder,
NativeModules,
} from 'react-native';
const DevMenuTrigger = ({children}) => {
const {DevMenu} = NativeModules;
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => {
if (gestureState.numberActiveTouches === 3) {
DevMenu.show();
}
},
});
return <View style={{flex: 1}} {...panResponder.panHandlers}>{children}</View>;
};
...
AppRegistry.registerComponent('myApp', (): any => <DevMenuTrigger><MyApp></DevMenuTrigger>

onsenui with Cordova - start application on specific screen

I'm running a React.js/Cordova/OnsenUI application that is intended to be used both in the browser and on mobile devices. I'd like the user to be able to scan a QR code, then jump to a screen in my application.
This is what the application looks like right now:
import React from 'react';
import {
Navigator
} from 'react-onsenui';
import MainPage from './MainPage';
import Vendor from './Vendor';
const renderPage = (route, navigator) => (
<route.component key={route.key} navigator={navigator} />
);
const App = () => (
<Navigator
renderPage={renderPage}
initialRoute={{component: MainPage, key: 'MAIN_PAGE'}}
/>
);
export default App;
When I start up, depending on the URL, I might want to start with a Vendor component or a MainPage component.
I figured that the easiest thing to do would be to dynamically create the initialRoute object based on the QR code that was scanned. Given that I might be on an iOS device, how do I know what the URL was that was scanned? Is there a different way that I should be jumping to a specific screen when I start the app?

Angular ng-click issues on Safari with IOS 8.3

This is a weird issue, that is some what hard to generate and explore.
While building a web-app using Angular, my boss found that all the buttons on the app that are using ng-click directive are not working.
Now, this issue only happens on iphone 6 with IOS 8.3 and using the safari browser.
I can say that when was tested on iPhone5 (All versions), iPhone 6 (IOS 9), Safari for windows and all other browsers (Mobile and desktop), ng-click works like a charm.
The app is being build using Angular 1.4.3.
This is the code for the button, as you can see, nothing special about it:
<button class="btn calculate-button" ng-click="onCalculate()">Calculate</button>
And in the controller:
$scope.onCalculate = function () {
//Do something... And then:
$state.go('someplace');
};
I tried many changes that were suggested here, including ng-touch, ng-bind, building my own click directive as follows:
.directive('basicClick', function($parse, $rootScope) {
return {
compile: function(elem, attr) {
var fn = $parse(attr.basicClick);
return function(scope, elem) {
elem.on('click', function(e) {
fn(scope, {$event: e});
scope.$apply();
});
};
}
};
});
Couldn't find any proper solution for the problem.
Thanks.
IOS 8.4.1 Update has a known issue which stop ng-link and ng-click to work.
Using "touchstart click" can possibly solve this issue.
app.directive("ngMobileClick", [function () {
return function (scope, elem, attrs) {
elem.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply(attrs["ngMobileClick"]);
});
}
}])
HTML call: ng-mobile-click="onCalculate()"
I fixed it in the end.
The problem was in the //Do something... And then: part of the function.
At some point along the way, that function saves some data to the browser local storage.
My boss was using private browsing on safari, and apparently when using private browsing on safari, the browser wont save and data on the local storage and it throws an exception and kills the code.
Well, thanks any way.

How do I add a right button to NavigatorIOS in React Native?

Trying to get NavigatorIOS working in React Native but I'm having trouble getting a button to show up on the right. I'm calling this this block of code when the user successfully logs in using Facebook API:
this.props.navigator.replace({
title:"Agni",
component: SwipeScreen,
rightButtonTitle: 'Matches',
onRightButtonPress: () => { console.log("matches") },
passProps:{'token': {result: info}},
});
Does calling .replace intead of .push have anything to do with why it won't show up?
Thanks.
I was able to get my rightButtonTitle to appear when using this.props.navigator.push() as opposed to this.props.navigator.replace().
On the React Native's Github Issues page, this issue is exactly what you're experiencing. The last comment, from 25 days ago, also states that replace suffers from this same issue.

Resources