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

How do I receive query parameters from Firebase Dynamic Links using react-native-firebase?

$
0
0

I've followed the instructions from the official react-native-firebase documentation and everything, as per the instructions, works fine.

It is my understanding that I should be able to create a link like the following in the Firebase Dynamic Links console: https://myapp.page.link/offer?offerid=123456 and be able to receive the offerid parameter in my app. However, when I click that link (in the iOS simulator, Android emulator, and on a real device) the app opens, but I just get a link with the following data:

Received initial link {"minimumAppVersion": null, "url": "https://mysite.co/offers"}

There are no query string parameters attached. Am I missing something in the Firebase Dynamic Link configuration? Or in my implementation of react-native-firebase that was not covered in the documentation linked above? Or is this actually just not possible?


How to implement checkbox in FlatList React Native

$
0
0

I'm trying to implement checkbox while fetching the data API from the backend but the issue that i encountered is that all the checkbox are checked and i'm unable to uncheck it and also how can i pass the selected checked checkbox as a params to the next component.Hope I could get some help.

This is what i have in my current codes;

 class Gifts extends Component {    constructor(props){      super(props);      this.state={        users:'',        checked: {},        selected: 0      }    }

//api codes//handle checkbox

  handleChange = (index) => {    let { checked } = this.state;    checked[index] = !checked[index];    this.setState({ checked });  }  onPress(value) {    this.setState({ selected: value });}  render() {    let { navigation } = this.props        return (<SafeAreaView style={{flex:1 }}><View style={{ flex:1,justifyContent: 'center'}}>               //...codes..//<View style={styles.userlist}><FlatList                            data={this.state.users}                            keyExtractor={(item ,index) => index.toString()}                            renderItem={({ item }) => (<FlatList                                  data={item.friendList}                                  renderItem={({ item }) => <View style= {{flexDirection:'row', justifyContent:'space-between'}}><Text style={{marginTop:20, marginLeft:10, fontSize: 20}}>{item.name}</Text><CheckBox                                      center                                      checkedIcon='dot-circle-o'                                      uncheckedIcon='circle-o'                                      checked={this.state.checked}                                      value={ this.state.checked[item.flag]}                                      onPress={this.onPress}                                    /> </View>                                }                                  keyExtractor={(item ,index) => index.toString()}                                  ItemSeparatorComponent ={this.ItemSeparator}                                />                            )}                    /></View><Button                   rounded                  // disabled={true}                    //onPress={}                  style={{width: 100, justifyContent: 'center',marginLeft:150}}><Text>Send</Text></Button></View></SafeAreaView>    );  }}

React Native video upload using rn-fetch-blog error on iOS only

$
0
0

I'm using rn-fetch-blob to upload a video to a remote server. Everything works well in Android (camera and library).

In iOS, if I shot the video directly in the app it works and sends the video, but if I select the video in camera roll it sends a "corrupted" file - the upload works but when I try to watch the video I have a player with "Media not found" screen from the service.

I am using response.uri to get the path (found that path doesn't work for iOS) and replaced file: with '' too...

I get the response.uri from react-native-image-picker

Is there something I am missing?

Using environment variable in react-native swift

$
0
0

I am working on React-Native App and want to configure env variables which I can share with iOS app and Android.

The documentation requires me to add this line in AppDelegate.m

[GMSServices provideAPIKey:@"Azzz8"];`

Here Azzz8 would be my api key. Now I want to pass this to be in an environment file and pass it from there (to ios and android). Any idea how I can do it?

This is how my code for AppDelegate.m kinda looks like

/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */#import "AppDelegate.h"#import <Firebase.h>#import <React/RCTBridge.h>#import <React/RCTBundleURLProvider.h>#import <React/RCTRootView.h>#import <React/RCTLinkingManager.h>#import <UMCore/UMModuleRegistry.h>#import <UMReactNativeAdapter/UMNativeModulesProxy.h>#import <UMReactNativeAdapter/UMModuleRegistryAdapter.h>#import <GoogleMaps/GoogleMaps.h>@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{  /* Firebasee App Config */  [FIRApp configure];  [GMSServices provideAPIKey:@"1234"];

How can I solve this " Invalid `Podfile` " error?

$
0
0

I'm new to ios development and I got a zip file from another developer for an ios project. When I ran pod install, the terminal shows this error:

[!] Invalid `Podfile` file: cannot load such file -- /Users/abc/Desktop/node_modules/@react-native-community/cli-platform-ios/native_modules. #  from /Users/abc/Desktop/ios/Podfile:2 #  ----------------------------------------- #  platform :ios, '9.0'>  require_relative '../node_modules/@react-  native-community/cli-platform-  ios/native_modules' #   #  ----------------------------------------- 

The directory is like this
~/Desktop/ios
ls

GoogleService-Info.plist ISApp.xcodeproj          Podfile.lockISApp                    ISApp.xcworkspace        PodsISApp-tvOS               ISAppTests               instrumentscli0.traceISApp-tvOSTests          Podfile

I have looked at the thread below but it doesn't help at all. Any input is appreciated.
react-native ios Podfile issue with "use_native_modules!"

How can I use AEM (Adobe Experience Manager) with react native [closed]

$
0
0

I want to use AEM (Adobe Experience Manager) with react native. But I could not find any documentation or guidelines.

Could anyone let me know if it's possible to use AEM with react native and how to use it?Thank you.

How to properly highlight text in React Native?

$
0
0

I would like to highlight a multiline text in a React Native app by changing the text's background color. The problem is that the background color changes in the whole text area, not just under the words.

class Example extends Component {  render() {    const text = '...';    return (<View style={styles.textContainer}><Text style={styles.textStyle}>          {text}</Text></View>    );  }}const styles = StyleSheet.create({  textContainer: {    flexDirection: 'row',    flexWrap: 'wrap',    width: 200,  },  textStyle: {    backgroundColor: 'red',  },});

The code above results in something that looks like this: current output

But I would like it to look like this: expected output

I can get that result by splitting the text and adding the background color to the individual words:

class Example extends Component {  render() {    const text = '...';    const brokenText = text.split('').map(word => (<Text style={styles.textStyle}>{word} </Text>    ));    return (<View style={styles.textContainer}>        {brokenText}</View>    );  }}

But splitting the text into individual words doesn't seem like the best solution, and has a huge performance cost. Is there any cleaner way to do it?

Is there a way to change keyboard decimal separator programmatically with react-native on ios?

$
0
0

Ios show decimal separator ("." od ",") on keyboard by device language (General > Language & Region), but I would like to show decimal separator according to language selected in the application. Is it even possible? How could I achieve this?


How to implement Wallet feature in react native app

$
0
0

I'm trying to integrate wallet in my react-native app using paypal/Braintree in which i can able to load amount to my wallet.

  According to Paypal SDK In native they are deprecated and braintree is handling that for Paypal. But i cant able to get any information anywhere for wallet integration. 

Any suggestions will be a great help

Solved - React Native video upload using rn-fetch-blog error on iOS only

$
0
0

I'm using rn-fetch-blob to upload a video to a remote server. Everything works well in Android (camera and library).

In iOS, if I shot the video directly in the app it works and sends the video, but if I select the video in camera roll it sends a "corrupted" file - the upload works but when I try to watch the video I have a player with "Media not found" screen from the service.

I am using response.uri to get the path (found that path doesn't work for iOS) and replaced file: with '' too...

I get the response.uri from react-native-image-picker

Is there something I am missing?

Build Failing for React Native iOS, "Multiple commands produce" Error

$
0
0

We were working on a react native project. One of my team members added some native modules on Linux and linked android. By then I am trying to link things in iOS but the build is always failing with this kind of error trace. The Android project is building normally.

I deleted xyz.xcworkspace and Podfile.lock then tried pod install.
Also, I tried to delete my node_modules and then yarn install followed by yarn link.

react-native-cli: 2.0.1  react-native: 0.61.4  yarn 1.19.1Pod 1.8.4XCode Version 11.2.1 (11B500)macOS Catalina 10.15.1 (19B88)

xyz warning

duplicate output file '/Users/user/Library/Developer/Xcode/DerivedData/xyz-hhesslamjsqmbobykhskliclusph/Build/Products/Debug-iphonesimulator/xyz.app/AntDesign.ttf' on task: PhaseScriptExecution [CP] Copy Pods Resources /Users/faisal/Library/Developer/Xcode/DerivedData/xyz-hhesslamjsqmbobykhskliclusph/Build/Intermediates.noindex/xyz.build/Debug-iphonesimulator/xyz.build/Script-47F818C57EEC47EA3303EA1B.sh

xyz workspace errors

Multiple commands produce '/Users/user/Library/Developer/Xcode/DerivedData/xyz-hhesslamjsqmbobykhskliclusph/Build/Products/Debug-iphonesimulator/xyz.app/Zocial.ttf':1) Target 'xyz' (project 'xyz') has copy command from '/Users/user/Desktop/xyz/native/node_modules/react-native-vector-icons/Fonts/Zocial.ttf' to '/Users/user/Library/Developer/Xcode/DerivedData/xyz-hhesslamjsqmbobykhskliclusph/Build/Products/Debug-iphonesimulator/xyz.app/Zocial.ttf'2) That command depends on command in Target 'xyz' (project 'xyz'): script phase “[CP] Copy Pods Resources”

There are multiple errors and warnings like this but have same format with different file names.

Open app that is running on background! React native

$
0
0

Hi i am developing an application and in this moment i need open the app if the same is running on background, i am thinking in open i when specific push notification arrive to the phone.

I don't know is this is posible

I am developing the app using react native

Thanks

App Store Connect Operation Error Invalid Info.plist key

$
0
0

I recently took over a task of pushing React-native app to App Store iOS. After clearing some of the initial hurdles, I was able to run it in simulator and test them fine.

When I am trying to validate the app before pushing to the App Store from XCode I am getting bunch of Invalid Info.plist errors, Something like:

App Store Connect Operation Error

  1. Bunch of : Invalid Info.plist key. The key 'NSUserNotificationAlertStyle' in bundle XXXX.app/node_modules/node-notifier/vendor/mac.noindex/terminal-notifier.app is invalid.
  2. Bunch of does not have proper segment alignment. Try rebuilding the app with the latest Xcode version.

I am using XCode Version 11.5 (11E608c), react-native 0.61.5

Initially thought that the pods were the cause for these errors, I removed them and reinstalled them. Nothing has helped so far. Can someone please point me in right direction so I can investigate more and get it across the line. Being new to this whole arena just not sure where to start.

SQLite React-Native (react-native-sqlite-storage): no such table

$
0
0

I followed the react-native-sqlite-storage instructions on setting up the database but I'm encountering an error where it says there is SQL ERROR: {"no such table: users", code 5}

I've tried multiple styles where I have it in the "www" folder but to no avail.

import SQLite from 'react-native-sqlite-storage';...const database_name = "./users.db";const database_version = "1.0";const database_displayname = "Test";const database_size = 200000;...function loadAndQueryDB() {   //db = SQLite.openDatabase(database_name, database_version, database_displayname,      database_size, openCB, errorCB);   //db = SQLite.openDatabase({ name: './users.db', createFromLocation: 1,}, openCB, errorCB);   //db = SQLite.openDatabase({ name: 'users.db', createFromLocation: 1,}, openCB, errorCB);   //db = SQLite.openDatabase({ name: 'users', createFromLocation: 1,}, openCB, errorCB);    queryUsers(db);}function queryUsers(db) {    db.transaction((tx) => {      tx.executeSql('SELECT * FROM users', [], queryUsersSuccess, errorCB);    });  }

Linking React Native (or any other framework) with Unity

$
0
0

So, I'm developing a mobile application in Unity and was wondering if it is possible to use it alongside React Native or any other framework in order to use UI elements for both iOS and Android with ease.

  • What I mean here is to develop the entire UI within the framework and when I click a button, it opens the Unity application.

If the above question is possible, I would like to go even further and ask if I can "mix" the unity app with the UI from the framework and make them switch information

  • Input form is inserted with the framework, the user types somethingand then unity gets that input and does something with it

Anxiously waiting for an answer. Thanks!!


To build my react native app with the iOS 13 SDK, I upgrade xcode from 10.3 to 11.5, so why my app doesn't work?

$
0
0

We received, me and my team at work, a message from the App Store Team which contains:

Dear Developer,We identified one or more issues with a recent delivery for your app, "XXXX" version. Your delivery was successful, but you may wish to correct the following issues in your next delivery:ITMS-90725: SDK Version Issue - This app update was built with the iOS 12.4 SDK. As of June 30, 2020, updates to apps for iPhone or iPad must be built with the iOS 13 SDK or later.ITMS-90809: Deprecated API Usage - App updates that use UIWebView will no longer be accepted as of December 2020.Instead, use WKWebView for improved security and reliability.
  • So I started by ITMS-90725 which seems to be the first one we should fix. To build the react native app in the iOS 13 SDK, i needed to upgrade the xcode version from 10.3 to 11.5.

  • I did the upgrade thing Then built the app in the iOS 13 SDK, the build succeeded but the app couldn't run and after some debugging stuff i found this problem:


Thread 1: Exception: "App called -statusBar or -statusBarWindow on UIApplication: this code must be changed as there's no longer a status bar or status bar window.Use the statusBarManager object on the window scene instead."

  • Then I tried a lot to search about that and until now i can't find any solution according to react native.

my config after running the command react-native info =>

System:    OS: macOS 10.15.5    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz    Memory: 273.72 MB / 16.00 GB    Shell: 5.7.1 - /bin/zsh  Binaries:    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node    Yarn: 1.22.4 - ~/.yarn/bin/yarn    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm    Watchman: 4.9.0 - /usr/local/bin/watchman  SDKs:    iOS SDK:      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2  IDEs:    Android Studio: 3.6 AI-192.7142.36.36.6200805    Xcode: 11.5/11E608c - /usr/bin/xcodebuild  npmPackages:    react: 16.9.0 => 16.9.0     react-native: 0.61.5 => 0.61.5

The dependancies we use =>

"dependencies": {"@microsoft/applicationinsights-react-native": "^2.1.0","@microsoft/applicationinsights-web": "^2.3.1","@react-native-community/async-storage": "1.6.2","@react-native-community/datetimepicker": "2.1.0","@react-native-community/netinfo": "3.2.1","@react-native-community/viewpager": "^1.1.7","@react-navigation/core": "3.5.1","@react-navigation/native": "3.6.2","appcenter": "^3.0.3","appcenter-analytics": "^3.0.3","appcenter-crashes": "^3.0.3","deepmerge": "^4.0.0","geolib": "^3.0.4","i18n-js": "^3.3.0","lodash": "^4.17.15","moment": "^2.24.0","moment-range": "^4.0.2","moment-timezone": "^0.5.26","normalize-strings": "^1.1.0","prop-types": "^15.7.2","qs": "^6.9.0","ramda": "^0.26.1","react": "16.9.0","react-is": "^16.10.1","react-native": "0.61.5","react-native-adjust": "4.18.1","react-native-awesome-card-io": "^0.8.2","react-native-calendars": "https://github.com/freework-gmbh/react-native-calendars.git#20dc9a8","react-native-config": "0.11.7","react-native-country-picker-modal": "0.8.0","react-native-deep-link": "0.2.9","react-native-device-info": "3.1.4","react-native-email-link": "1.4.0","react-native-gesture-handler": "^1.4.1","react-native-idfa": "^4.1.0","react-native-indicators": "0.13.0","react-native-iphone-x-helper": "1.2.1","react-native-joi": "0.0.5","react-native-keyboard-aware-scroll-view": "0.9.1","react-native-localize": "^1.4.0","react-native-masked-text": "1.13.0","react-native-material-dropdown": "https://github.com/Squirel-SI/react-native-material-dropdown.git","react-native-phone-input": "0.2.4","react-native-reanimated": "1.3.0","react-native-render-html": "4.1.2","react-native-screen-brightness": "2.0.0-alpha","react-native-screens": "^2.0.0-alpha.3","react-native-sensitive-info": "^5.5.3","react-native-webview": "7.4.1","react-navigation": "4.0.10","react-navigation-drawer": "2.2.2","react-navigation-redux-helpers": "4.0.0","react-navigation-stack": "1.9.3","react-navigation-tabs": "2.5.5","react-redux": "7.0.2","recompose": "^0.30.0","redux": "^4.0.4","redux-saga": "^1.1.1","rn-viewpager": "https://github.com/Squirel-SI/React-Native-ViewPager.git","striptags": "^3.1.1","styled-components": "^4.4.0","url-join": "^4.0.1"  },

Can anyone of you help me to fix that ? Please !

OS pod install error. Module glog cannot be installed

$
0
0

I'am trying to upgrade "react-native" from "0.50.4" to "0.55".

When I run pod install, i receive an error

checking for a BSD-compatible install... /usr/local/bin/ginstall -cchecking whether build environment is sane... yeschecking for arm-apple-darwin-strip... nochecking for strip... stripchecking for a thread-safe mkdir -p... /usr/local/bin/gmkdir -pchecking for gawk... nochecking for mawk... nochecking for nawk... nochecking for awk... awkchecking whether make sets $(MAKE)... nochecking whether make supports nested variables... nochecking for arm-apple-darwin-gcc...  -arch armv7 -isysroot checking whether the C compiler works... noxcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrunxcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun/Users/MacBook/Library/Caches/CocoaPods/Pods/Release/glog/0.3.4-1de0b/missing: Unknown `--is-lightweight' optionTry `/Users/MacBook/Library/Caches/CocoaPods/Pods/Release/glog/0.3.4-1de0b/missing --help' for more informationconfigure: WARNING: 'missing' script is too old or missingconfigure: error: in `/Users/MacBook/Library/Caches/CocoaPods/Pods/Release/glog/0.3.4-1de0b':configure: error: C compiler cannot create executablesSee `config.log' for more details[!] Automatically assigning platform `ios` with version `8.0` on target `quanta_react` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

I am a beginner in react-native and I can not make a pod install in my iOS project.Thank you in advance.

When I press back on my modal class, and click on a new item in my Flat List, the data remains the same from the first item I have pressed

$
0
0

Parent component:Constructor:

constructor(props) {    super(props);    this.state = {      isLoading: true,      dataSource: null,      show: false,      varFoodId: null,    };  }

This is the function where I fetch the data with an API request

fetchData = (item) => {    fetch(      `https://api.edamam.com/api/food-database/parser?ingr=${item}&app_id=${APP_ID}&app_key=${APP_KEY}`    )      .then((response) => response.json())      .then((responseJson) => {        this.setState({          itemArray: responseJson.hints,        });      })      .catch((error) => {        console.log(error);      });    Keyboard.dismiss();  };

The button I press to fetch the data and return a Flat List with info regarding the individual items. Which are all touchable.

<Button              title="Search"              onPress={() => this.fetchData(this.state.item)}            /><View style={styles.paddingForResultsContainer}><FlatList                style={styles.resultsBackground}                data={this.state.itemArray}                renderItem={({ item, index }) => (<TouchableOpacity                    onPress={() =>                      this.setState({                        show: true,                      })                    }>

The modal component at the bottom of the parent component

<NewModal                  showUs={this.state.show}                  toggleShow={() => this.setState({ show: false })}                  foodInfo={item}></NewModal></TouchableOpacity>            )}

My child component for the modal:

const NewModal = (props) => {  return (<Modal  visible={props.showUs}/*visible={props.show} */><View style={styles.modalView}><View><Text>{props.foodInfo.food.nutrients.CHOCDF}</Text><Button title="props" onPress={() => console.log({props})} /><Button title="Back" onPress={() => props.toggleShow()}></Button></View></View></Modal>  );};

Xcode project empty after create-react-native-module

$
0
0

I'm wondering why Xcode shows a empty project after creating a native react-native module using create-react-native-module.

I issued the following command:

create-react-native-module test

The folder contents of ios/ are then:

Test.hTest.mTest.xcodeprojTest.xcworkspace

Now I think it's a good idea to write iOS specific code in Xcode, but when opening either Test.xcodeproj or Test.xcworkspace, it doesn't show Test.m or Test.h on the left:enter image description here

Also, when opening it using the xcworkspace file, the libTest.a is red.

Question: Why does Xcode not show these 2 files? Do they have to be linked to the target or something like that? How would I go about adding new files? From which file I am supposed to open this project in Xcode?

SVG loading issue in react native WebView (iOS)

$
0
0

Tools used

D3 js: v4.11.0react-native: v0.60.3react-native-webview: v9.3.0

Previously I was using react-native 0.59.8 and I was using WebView from react-native, in this version WebView was working fine, SVG was also loading perfectly, but after upgrading react native to 0.60.3, I also have to take WebView from react-native-webview,

React Native WebView :-

<WebViewscrollEnabled = {true}originWhitelist={["*"]}javaScriptEnabled={true}source={{ uri: isAndroid ? "file:///android_asset/widget/index.html" : "./widget/index.html" }}// useWebKit={false}allowUniversalAccessFromFileURLs={true}allowFileAccess={true}scalesPageToFit={true}onMessage={this.getSelectedSeat}ref={component => (this.webview = component)}style={{ width: deviceWidth, height: deviceHeight }}/>

Calling:

this.webview.postMessage("data");

Capturing in HTML:

this.window.addEventListener("message", data => {}

Loading SVG in HTML :-

function loadSVG(svgURL) {      d3.xml(        svgURL,        function (xml) {          if (xml != null) {            var importedFile = document.importNode(xml.documentElement, true);            d3.select("#layout")              .node()              .append(importedFile);          }        },        err => {          alert('error')        }      );    }

In android same code is working fine, but not in iOS, every time xml is null, but it was fine in the older version of WebView where I was taking WebView from react-native, I don't know what I'm missing, may be some property. Please Help.

Update:I'm getting error message: {"isTrusted":true}, I think this is Cross-Origin related issue, is there any way to disable this in iOS WKWebView?

Viewing all 16566 articles
Browse latest View live


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