Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all 16555 articles
Browse latest View live

Change backgroundColor BEHIND keyboard with React Native?

$
0
0

This sounds needless and crazy, but it's actually much more sane than it sounds.

I've been trying to find a way to do this and am pretty close to giving up. Currently I assume it's not possible.

What I'd like to do is change the color behind the keyboard so that the app doesn't have a big white area in the app switcher.

enter image description here


How to get the Current Date in ReactNative?

$
0
0

I am building my first ReactNative iOS and Android app. I am an iOS coder with Swift and Obj-C. How do I fetch the current date using ReactNative.

Shall I use Native Modules or is there an ReactNative API from which I can get this data ?

How can I open a webview with proxies on React Native IOS

$
0
0

I am looking to use a webview along with proxies. I have looked everywhere around and I haven't found anything significant about it, stackoverflow is my last resort. I am loooking to do this on ios though since android has banned proxies use.

react-native-viewpager issue on iOS while deleting the last item in array/view

$
0
0

I am able to delete the last view/item from viewPager on android and it would switch the view to the previous screen. But the same thing doesn't work in iOS. On iOS it would delete the last view but wouldn't switch and shows a blank page, but when you scroll old view renders again.

ViewPages.js

import React, { useState, useEffect } from "react";import { Image, ScrollView } from "react-native";import {  Container,  View,  Button,  Text,  Left,  Right,  Content,  Icon,  Header,  Fab} from "native-base";import { useTemplateState } from "../../../contexts/TemplateContext";import {  useScreenTypeState,  useScreenTypeUpdate} from "../../../contexts/ScreenTypeContext";import CardView from "./CardView";import ViewPager from "@react-native-community/viewpager";export const ScreenTypeSelection = ({ route }) => {  let { screenCount } = useTemplateState();  let dispatch = useScreenTypeUpdate();  let value = useScreenTypeState();  const [active, setActive] = useState(false);  useEffect(() => {    dispatch({ type: "screen", payload: { screenCount } });  }, []);  const [currentIndex, setCurrentIndex] = useState(0);  const [currentPage, setCurrentPage] = useState(0);  return (<ScrollView contentContainerStyle={{ flex: 1 }}><ViewPager        style={{ flex: 1 }}        initialPage={currentPage}        onPageSelected={e => setCurrentIndex(e.nativeEvent.position)}        showPageIndicator={true}>        {value.length > 0 &&          value.map((card, index) => {            return (<View style={{ alignItems: "center" }} key={index}><CardView key={card.pageNumber} card={card} /></View>            );          })}</ViewPager><Fab        active={active}        direction="up"        containerStyle={{}}        style={{ backgroundColor: "#5067FF" }}        position="bottomRight"        onPress={() => setActive(!active)}><Icon name="create" /><Button          style={{ backgroundColor: "#3B5998" }}          onPress={() => {            dispatch({              type: "delete_page",              payload: { currentIndex }            });            setCurrentPage(currentIndex - 1 < 0 ? 0 : currentIndex - 1);          }}><Icon name="remove" /></Button><Button          style={{ backgroundColor: "#34A34F" }}          onPress={() => {            dispatch({              type: "add_page",              payload: { currentIndex }            });            setCurrentPage(currentIndex + 1 )          }}><Icon name="add" /></Button></Fab></ScrollView>  );};

package: @react-native-community/react-native-viewpager

Github: https://github.com/react-native-community/react-native-viewpager

After doing some research found that it is an open issue on GitHub

Is there any solution to it or any workaround that helps to reflect the same functionality on iOS as well?

I know there are other third-party packages available as well, but I would like to see if I can do it using react-native core modules.

If there is any more detail needed, let me know.

I want to do badge increment on main app icon while receiving notification in inactive mode of app

$
0
0

I am working on a chat app in react-native iOS. I want to do badge increment on main app icon when notification is received when the app is killed or force quit by user. It works well when the app is in background mode. But didReceiveRemoteNotification method is not called when the app is inactive. Any idea on this? I added code inside didReceiveRemoteNotification method of AppDelegate.

Added the following code set in AppDelegate file

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {      [RNNotifications didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];    }- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {      [RNNotifications didFailToRegisterForRemoteNotificationsWithError:error];    }- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {    NSLog(@"APPDELEGATE: didReceiveRemoteNotification:fetchCompletionHandler %@", userInfo);  int badge = (int) application.applicationIconBadgeNumber;  if ( application.applicationState == UIApplicationStateInactive ) {    [[UIApplication sharedApplication] setApplicationIconBadgeNumber:badge+1];  }  else if(application.applicationState == UIApplicationStateBackground) {    [[UIApplication sharedApplication] setApplicationIconBadgeNumber:badge+1];  }  else if(application.applicationState == UIApplicationStateActive) {    [[UIApplication sharedApplication] setApplicationIconBadgeNumber:badge+1];  }  completionHandler(UIBackgroundFetchResultNewData);}

Getting issue of Google Mobile Vision relying on deprecated UIWebview

$
0
0

Using this plugin on a project, I'm running into an Apple testflight warning that we're using UIWebView (ITMS-90809: Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs).

Searching for UIWebview references, it seems that the GoogleMobileVision pod is still referencing UIWebview, which may be triggering the error from Apple.

Running this command:- grep -r UIWebView ios/Pods/getting:- Binary file ios/Pods//GoogleMobileVision/Detector/Frameworks/GoogleMobileVision.framework/GoogleMobileVision matches

Can anyone suggest a solution for this?

How to support WebP images in react native?

$
0
0

I have to show .WebP image extension images in my react-native app. I'm running on iOS and it's not displaying any image. I googled and found some information saying that webP images won't support on iOS and need to use a library or have to write an extension to support that. I used this react-native library to support webP. Still, I'm not getting. Can someone please advice on this? How to do that?

Note: Please don't mark this as a duplicate. I already checked StackOverflow and didn't find the answer.The issue might similar to webp images problem-stackoverflow

How can you upgrade iOS app built in React native to the latest SDK?

$
0
0

Sorry. Beginner question here. How can you upgrade iOS app built in React native to the latest SDK ? Does upgrading React Native also upgrade the SDK for IOS automatically or are there separate instructions on that?


How to install react-native-track-player

$
0
0

I tried to install the react-native-track-player in a bare (just react-native init) App.

After

yarn add react-native-track-playeryarn add react-native-swiftcd iospod instal

I got the message:

  • [!] CocoaPods could not find compatible versions for pod "react-native-track-player":In Podfile:react-native-track-player (from ../node_modules/react-native-track-player)Specs satisfying the react-native-track-player (from../node_modules/react-native-track-player) dependency were found, but they required a higher minimum deployment target.

So I changed in the podfile

platform :ios, '9.0' to: platform :ios, '10.0'

and again

pod install

This results to the message:

  • [!] Unable to determine Swift version for the following pods:react-native-track-player does not specify a Swift version and none of the targets (mist) integrating it have the SWIFT_VERSION attribute set. Please contact the author or set the SWIFT_VERSION attribute in at least one of the targets that integrate this pod.

In the next step I added s.swift_version = '4.0' to the react-native-track-player.podspec file in the node_modules.

Now the react-native-track-player pod were generated with the warnings:

  • [!] [Xcodeproj] Generated duplicate UUIDs:PBXBuildFile -- Pods.xcodeproj/targets/buildConfigurationList:buildConfigurations:baseConfigurationReference:|,buildSettings:|,displayName:|,isa:|,name:|,,baseConfigurationReference:|,buildSettings:|,displayName:|,isa:|,name:|,,defaultConfigurationIsVisible:0,defaultConfigurationName:Release,displayName:ConfigurationList,isa:XCConfigurationList,,buildPhases:buildActionMask:2147483647,displayName:Headers,files:|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,isa:PBXHeadersBuildPhase,runOnlyForDeploymentPostprocessing:0,,buildActionMask:2147483647,displayName:Sources,files:|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,|,isa:PBXSourcesBuildPhase,runOnlyForDeploymentPostprocessing:0,,buildActionMask:2147483647,displayName:Frameworks,files:,isa:PBXFrameworksBuildPhase,runOnlyForDeploymentPostprocessing:0,,buildActionMask:2147483647,displayName:Copy generated compatibility header,files:,inputFileListPaths:,inputPaths:|,|,|,isa:PBXShellScriptBuildPhase,name:Copy generated compatibility header,outputFileListPaths:,outputPaths:|,|,|,runOnlyForDeploymentPostprocessing:0,shellPath:/bin/sh,shellScript:COMPATIBILITY_HEADER_PATH="${BUILT_PRODUCTS_DIR}/Swift Compatibility Header/${PRODUCT_MODULE_NAME}-Swift.h"MODULE_MAP_PATH="${BUILT_PRODUCTS_DIR}/${PRODUCT_MODULE_NAME}.modulemap"ditto "${DERIVED_SOURCES_DIR}/${PRODUCT_MODULE_NAME}-Swift.h""${COMPATIBILITY_HEADER_PATH}"ditto "${PODS_ROOT}/Headers/Public/react_native_track_player/react-native-track-player.modulemap""${MODULE_MAP_PATH}"ditto "${PODS_ROOT}/Headers/Public/react_native_track_player/react-native-track-player-umbrella.h""${BUILT_PRODUCTS_DIR}"printf "\n\nmodule ${PRODUCT_MODULE_NAME}.Swift {\n header \"${COMPATIBILITY_HEADER_PATH}\"\n requires objc\n}\n">>"${MODULE_MAP_PATH}",,buildRules:,dependencies:displayName:React,isa:PBXTargetDependency,,displayName:react-native-track-player,isa:PBXNativeTarget,name:react-native-track-player,packageProductDependencies:,productName:react-native-track-player,productReference:displayName:libreact-native-track-player.a,explicitFileType:archive.ar,includeInIndex:0,isa:PBXFileReference,name:libreact-native-track-player.a,path:libreact-native-track-player.a,sourceTree:BUILT_PRODUCTS_DIR,,productType:com.apple.product-type.l ............

So I added "install! 'cocoapods', :deterministic_uuids => false" to the podfile

Now pod install runs without warnings, but the build in xcode or react-native run-ios crashes with the error

  • Command CompileSwiftSources failed with a nonzero exit code

This is my configuration:

System:OS: macOS 10.15.3CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHzMemory: 68.81 MB / 8.00 GBShell: 5.7.1 - /bin/zshBinaries:Node: 13.8.0 - /usr/local/bin/nodeYarn: 1.22.0 - /usr/local/bin/yarnnpm: 6.13.7 - /usr/local/bin/npmWatchman: 4.9.0 - /usr/local/bin/watchmanSDKs:iOS SDK:Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1Android SDK:API Levels: 28, 29Build Tools: 28.0.3, 29.0.3System Images: android-28 | Intel x86 Atom_64, android-29 | Google Play Intel x86 AtomIDEs:Android Studio: 3.6 AI-192.7142.36.36.6200805Xcode: 11.3.1/11C504 - /usr/bin/xcodebuildnpmPackages:react: ^16.12.0 => 16.12.0react-native: 0.61.5 => 0.61.5npmGlobalPackages:react-native-cli: 2.0.1

and the packages.json file

{"name": "first","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ."  },"dependencies": {"react": "16.9.0","react-native": "0.61.5","react-native-swift": "^1.2.2","react-native-track-player": "^1.2.2"  },"devDependencies": {"@babel/core": "^7.8.4","@babel/runtime": "^7.8.4","@react-native-community/eslint-config": "^0.0.7","babel-jest": "^25.1.0","eslint": "^6.8.0","jest": "^25.1.0","metro-react-native-babel-preset": "^0.58.0","react-test-renderer": "16.9.0"  },"jest": {"preset": "react-native"  }}

and the ios/podfile

platform :ios, '10.0'require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'install! 'cocoapods', :deterministic_uuids => falseuse_frameworks!target 'neu' do  # Pods for neu  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"  pod 'React', :path => '../node_modules/react-native/'  pod 'React-Core', :path => '../node_modules/react-native/'  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'  target 'neuTests' do    inherit! :search_paths    # Pods for testing  end  use_native_modules!endtarget 'neu-tvOS' do  # Pods for neu-tvOS  target 'neu-tvOSTests' do    inherit! :search_paths    # Pods for testing  endend

I am stranded! Any ideas what's wrong?

How to Implement the openURL in react-native-community Google Signin for ios?

$
0
0

Following the GoogleSignin docs openURL part, the block of code is inserted in the AppDelegate.m file.enter image description hereenter image description here

Resulted to this issue.

** BUILD FAILED **The following build commands failed:        CompileC Library/Developer/Xcode/DerivedData/client-fjhdzotydjguqzewjniwgbnbrzdo/Build/Intermediates.noindex/client.build/Debug-iphonesimulator/client.build/Objects-normal/x86_64/AppDelegate.o /Desktop/theapp/client/ios/client/AppDelegate.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler(1 failure)

Is it necessary to insert the above block of openURL code if I have multiple OAuth providers Facebook, Google in the Login Flow?

enter image description here

Or does the latest version automatically configure the openURL for multiple listeners?

react-native-share on iOS get cannot read property 'FACEBOOK' of undefined

$
0
0

I get this error in iOS simulator when I started using react-native-share

enter image description here

cannot read property 'FACEBOOK' of undefinedRNShareindex.js:208:36...

after run npm installI run cd ios/ && pod install

this is a package.json part

"dependencies": {"@react-native-community/datetimepicker": "2.2.2","jetifier": "^1.6.5","react": "16.12.0","react-native": "0.61.5","react-native-base64": "0.0.2","react-native-device-info": "3.1.4","react-native-gesture-handler": "1.4.1","react-native-modal-datetime-picker": "8.5.1","react-native-screens": "^2.7.0","react-native-share": "^3.3.0","react-native-vector-icons": "6.6.0",

and this is a Podfile part

platform :ios, '9.0'require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'target 'mobile' do  ...  pod 'React', :path => '../node_modules/react-native/'  pod 'React-Core', :path => '../node_modules/react-native/'  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'  ...  pod 'RNShare', :path => '../node_modules/react-native-share'

Create Native SDKs with React Native

$
0
0

I want to create client libraries for my backend for iOS and Android. They will be using native services like location services.

Instead of creating a separate SDK for each, I was wondering if I would use React Native to create the SDK, and then compile(eject) it to a native iOS pod or Android aar library. Is this possible to achieve with React Native? If yes, how can this be achieved?

React Native deep linking does not work when app is killed

$
0
0

Possible solution

I found a solution myself in the meanwhile, probably not so 'clean'.

In App.js I specify my initialRouteName like this:

import {createAppContainer} from 'react-navigation';import {createStackNavigator} from 'react-navigation-stack';import Home from './screens/Home';import Form from './screens/Form';import {Linking, Platform} from 'react-native';import React from 'react';function getRoute() {  let route = "";  Linking.getInitialURL().then(url => {    route = url;  })  if (route === 'playgroundapp://form') {    return 'Form';  } else {    return "Home"  }}const AppNavigator = createStackNavigator(    {  Home: { screen: Home },  Form: { screen: Form },}, {      initialRouteName: getRoute()    });export default createAppContainer(AppNavigator);

Question

I want to be able to deep link to my React Native application from my iOS widget.
Linking works fine when the app is running in the background, it navigates to the correct page. But when the app is killed, it only opens the app, but does not navigate to the correct page anymore.

I followed this tutorial: https://medium.com/react-native-training/deep-linking-your-react-native-app-d87c39a1ad5e

With a few adjustments from the official documentation: https://facebook.github.io/react-native/docs/linking

AppDelegate.m

#import "AppDelegate.h"#import <React/RCTBridge.h>#import <React/RCTBundleURLProvider.h>#import <React/RCTRootView.h>#import <React/RCTLinkingManager.h>@implementation AppDelegate- (BOOL)application:(UIApplication *)application   openURL:(NSURL *)url   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options{  return [RCTLinkingManager application:application openURL:url options:options];}- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler{ return [RCTLinkingManager application:application                  continueUserActivity:userActivity                    restorationHandler:restorationHandler];}- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge{#if DEBUG  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];#else  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];#endif}@end

App.js

import {createAppContainer} from 'react-navigation';import {createStackNavigator} from 'react-navigation-stack';import Home from './screens/Home';import Form from './screens/Form';const AppNavigator = createStackNavigator({  Home: { screen: Home },  Form: { screen: Form },});export default createAppContainer(AppNavigator);

Home.js

import React, {Component} from 'react';import {  Linking,  Platform,  Text,  View,} from 'react-native';import Form from './Form';export default class Home extends Component {  componentDidMount() {    if (Platform.OS === 'android') {      Linking.getInitialURL().then(url => {        this.navigate(url);      });    } else {      Linking.addEventListener('url', this.handleOpenURL);    }  }  componentWillUnmount() {    Linking.removeEventListener('url', this.handleOpenURL);  }  handleOpenURL = event => {    console.log(event.url)    this.navigate(event.url);  };  navigate = url => {    const {navigate} = this.props.navigation;    const route = url.replace(/.*?:\/\//g, '');    const routeName = route.split('/')[0];    if (routeName === 'form') {      navigate('Form');    }  };  }  render() {    return (<View style={styles.container}><Text style={styles.h1}>Playground</Text></View>    );  }}

So from my widget I link to the app like this:extensionContext?.open(URL(string: "playgroundapp://form")! , completionHandler: nil)

Why doesn't it work when the app is not running in the background? I found a few similar questions, but no answers that worked for me or which were outdated.

How to save changes in info.plist in react-native project

$
0
0

I use react-native '0.62.2' and i have some changes that i need to save in 'info.plist'.

My problem is when i do pod install all the changes are discard.

I would like to know if there some solution for this situation.

I know that with 'node_modules' this npm package can help so i wonder if there is some thing for info.plist too.

Thank you in advance.

React Native - Why we use the tintColor property for Image component?

$
0
0

When i use tintColor property it fills the whole image to the color i specified to the tintColor property. Is i am using it wrong or its job is the same what i get? Can anyone tell for what purpose this property is used for <Image/> component and what is the proper use of this property? A little example will be more appreciated. Thanks !!!

Reference link


How to get iOS 12 Autofill to ask to save password in React Native app?

$
0
0

PROBLEM

I'm on React Native 0.59.9 (latest at the time of this post), and have a login screen in my mobile app that I would like iOS 12's autofill feature to pick up and save the password for a new user. With what I've set up, the app shows the keyboard with the autofill option but never pop's up the 'Save Password' for a new user's credentials.

What the keyboard autofill looks like right now:https://imgur.com/6gVpGbU

SOME BACKGROUND INFO

In React Native's documentation, they now expose textContentType in the TextInput component. To set it up for iOS 11 autofill, the username textContentType would be set to 'username' and the password textContentType would be set to 'password'.

RN textContentType documentation:https://facebook.github.io/react-native/docs/textinput#textcontenttype

For iOS 12 autofill, which is supposed to introduce the 'Save Password' feature to mobile app's as well now (previously was websites only) the configuration is different for the password.

The password textContentType would be set to 'newPassword' instead. This isn't working though, in fact it seems to be buggy and breaks the app as it suggests username's for the password field with this set...

Implementation

What I've tried to do to implement iOS 12's autofill feature in React Native:

<TextInput  placeholder={'Enter username'}  autoCapitalize={'none'}  autoCorrect={false}  textContentType={'username'}/><TextInput  placeholder={'Enter password'}  autoCapitalize={'none'}  autoCorrect={false}  secureTextEntry={true}  textContentType={'newPassword'}/>

In the mobile provision, I've made sure to enable Associated Domains as an entitlement. (Done through Apple Developer website).

In my domain (for example www.mydomain.com), the file apple-app-site-association (with no extension) that has the following has been put into the root directory and is publicly available (https supported).

{"webcredentials": {"apps": [“ZT978FY6AB.com.company.my.app”,        ]    }}

In XCode, I've set up the Associated Domains to point to that domain.Example:

webcredentials:www.mydomain.com

OUTPUT

The expected output of implementing this is that iOS pops up the 'Save Password' dialog when a new user enter's their credentials.

What the pop up dialog should look like:https://imgur.com/GH4hfP8

Instead, it never pops up. The user just heads straight into the app upon successful login without the dialog ever appearing for saving the password. This essentially means that none of my users can save their credentials to the password manager of their choice (not even iCloud keychain).

Since this feature does not seem to be testable on a simulator, I've been testing it on an iPhone 7 Plus with iOS 12.3.1 installed and autofill enabled in the settings as can be seen in the below image.

https://imgur.com/nSEmy7V

Any ideas what I'm doing wrong, or if I'm missing a step?

React Native Rendering Image borderRadius in iOS

$
0
0

Images are rendered in different aspects in ios and android using image component from react-native. I’m trying to display image with 45 degree angle cutoff every corner.

I have tried to use cover, contain and center of the resizeMode prop cover fills the image inside the view giving the 45 degree cut but crops either width or height.

Center does not crop the image but if the image isn’t similar ratio as the view the 45 degree angles aren’t cut of the image, Android does this well though.

<View style={(this.state.controlsDisplayed) ? styles.flexLR : styles.flexLRBlack}><View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} /><View style={styles.imageWrapView}><Image source={{uri: ‘file://’+ item.photoLeft}} key={“TDVIEW”} resizeMode={(Platform.OS == ‘ios’) ? ‘cover’ : ‘center’} style={styles.floatingImagePartView} /></View><View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} /></View>

Want to get uncropped images on ios that have corners cut of by 45 degrees. Same as is in the android images. Here are images from android device that are rendered correctly.

android1 cutoff

android1 image

Here are the images rendered on ios using center and cover

android1 cutoff

This is rendered using contain on ios

android1 cutoff

android1 image

How can I get the images rendered with 45 degree cutoff on ios device as it is on an android device?

React Native open file from iCloud "Files" app not working

$
0
0

I have a react native app that allows users to share their content by creating a zip file (I use a different extension, .ssc but it's really just a zip file). The zip file can then be opened by another user with the app and the zip is processed and the data is imported. This functionality works great if I open the file from an email or the dropbox app but when I store it in iCloud Drive and open it from the Files app on iOS, it opens the app but doesn't import the zip file into the /Documents/Inbox folder.

Any idea why the file is not being copied into the /Documents/Inbox when it's opened from the Files app?

TouchableOpacity not working on expo for react native not working

$
0
0

Am working on this login page where I had to use TouchableOpacity on a this text "Already have an account? Sign in instead!" to send me to the singin screen and for some reason it didn't work so naturally I thought I had an error in my code and after hours of debugging I had the idea to make a simple button with the same functionality and it works for am wondering is there something wrong with TouchableOpacity on expo or there is somekind of logic error i missed.

here is the code i used :

From my signup screen :

return (<View style={styles.container}><NavigationEvents onWillBlur={clearErrorMessage} /><AuthForm        headerText="Sign Up for Tracker"        errorMessage={state.errorMessage}        submitButtonText="Sign Up"        onSubmit={signup}      /><NavLink        routeName="Signin"        text="Already have an account? Sign in instead!"      /></View>  );

from the Navlink component :

return (<><TouchableOpacity onPress={() => navigation.navigate(routeName)}><Spacer><Text style={styles.link}>{text}</Text></Spacer></TouchableOpacity><Button        title="go to sing in"        onPress={() => {          navigation.navigate("Singin");        }}      /></>  );

Disable Screen Capture/ScreenShot in React Native App

$
0
0

I have came across few solutions specific for ios and Android to prevent screen-capturing and taking screenshots. But how do i disable screen-capturing in react native?

Viewing all 16555 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>