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

How to show ringing UI on mobile even if the app is killed and phone is locked?

$
0
0

I don't exactly know the flow of Video calling in mobile apps. The flow which I am using for video calling is as follows:

  1. User 1 taps to call User 2
  2. Your app generates a unique name for a Room. Perhaps a combination of the two user's IDs.
  3. User 1 connects to Room with generated unique name
  4. Using FCM or GCM, send message of high priority with the unique name of the Room and token to User 2
  5. User 2 to receives notification and you display a ringing UI(even when the app is killed and phone is locked)
  6. User 2 accepts and connects to the same Room

    Now I am stuck on point 5. I am sending the FCM notification(which shows up in tray (edit: now using voip notif) to user2 and now I need to show ringing UI on user2's mobile even if the app is killed and phone is locked. How can I achieve this?


react-native-push-notification doesn't work on ios DEVICE

$
0
0

I'm using react-native-push-notification, but I have a problem.
With IOS simulator or android emulator, Everything works well.
But with real iphone device, push notification doesn't work. (on release mode or on debug mode, both are not worked.

Here is my setting.

Link binary with Libraries

Set Search Header Path

I check Capabilities/Background Modes/Remote notification on XCODE

And PushNotification.configure

import React from 'react';import PushNotification from 'react-native-push-notification';import {    Auth} from '../config/router';import './ReactotronConfig';export default class App extends React.Component {    constructor(props) {        super(props);        this.PushConfigure();    }    PushConfigure() {        PushNotification.configure({            onNotification: (notification) => {                console.log('NOTIFICATION:', JSON.stringify(notification));            },            permissions: {                alert: true,                badge: true,                sound: true,            },            popInitialNotification: true,            requestPermissions: true,        });    }    render() {        return <Auth />;    }}

And when I have to push notification

    const date = new Date(Date.now());    PushNotification.localNotificationSchedule({        title: '메세지가도착했습니다.',        message: `${data.user._id}: ${data.text}`,        date,        actions: 'Yes',    });

As I said before, notification works well on all simulator (Xcode IOS, android).
But I don't know why notification doesn't work on real IOS device.

If you want more environment or settings on my project, please comment.

Update -

I didn't register on Apple Developer Program.
Is that reason why I can't use notification on real IOS device?

react native and integrated third-party payment gateway using web view is it acceptable in the apple store?

$
0
0

I want to develop an ios e-commerce app using react native and integrated third-party payment gateway using web view is it acceptable in the apple store?

I wanna reinstall expo-cli, but there is err. And can't uninstall expo-cli

$
0
0

I tried to build the app through expo but failed, and I tried to reinstall expo-cli. So, I entered the code below to remove the expo-cli.

npm -g uninstall expo-cli --save

and

(base) Bongui-MacBookPro:expo-firebase-master bong$ npm uninstall expo-cli -gup to date in 0.042s

However, if i type expo, it will run.

So if you ignore it again and try to reinstall expo-cli, The following errors occur:

npm ERR! code EEXISTnpm ERR! syscall symlinknpm ERR! path ../lib/node_modules/expo-cli/bin/expo.jsnpm ERR! dest /Users/bong/npm-global/bin/expo-clinpm ERR! errno -17npm ERR! EEXIST: file already exists, symlink '../lib/node_modules/expo-cli/bin/expo.js' -> '/Users/bong/npm-global/bin/expo-cli'npm ERR! File exists: /Users/bong/npm-global/bin/expo-clinpm ERR! Remove the existing file and try again, or run npmnpm ERR! with --force to overwrite files recklessly.npm ERR! A complete log of this run can be found in:npm ERR!     /Users/bong/.npm/_logs/2020-01-28T09_18_38_604Z-debug.log

Thank you, teachers.Please help me solve the problem.Thank you.

How can I do offline Authentication?

$
0
0

I am using Firebase Authentication with Flutter App, and as you know you can't use Firebase Authentication service without connecting to the Server.what the Community Suggest for this Problem?

why don't it displayed in ios settings

$
0
0

enter image description hereAssumptions / What you want to achieve

I want to allow location information with pemission, but the application is not displayed in the ios settings

I am writing with typescript in react native

I uninstalled the app once on ios side. After that did not appear.

I use react-native-permissions.

The problem or error message that is occurring

I can't see the app shown hereThis is a simulator image.No indication was made on the actual machine.

React-Native how to give icon focus immediately when keyboard is up, instead of having to click on icon twice

$
0
0

I have created a standard "search" component, where there is an "x" and a "cancel" icon present. The "x" is meant to clear the field quickly if you want to change what you have previously typed into the field. The "cancel" is meant to just cancel the process of searching and revert to the page's default view. Both work respectively.

the problem is when the keyboard is up/open, a user is forced to tap on the "x" or "cancel" two times to get it to work, instead of it being clickable on the first time.

Both icons are currently wrapped in TouchableWithoutFeedback independently, and those are nested down into a View within a View.

So I know my issue is ultimately tied to the TextInput having the focus, as that's what keeps the keyboard up/open. I've read something about keyboardShouldPersistTaps but it seems to be only relevant to ScrollView I tried adding it to the View that wraps everything in this scenario but that doesn't appear to do anything.

All in all, I am looking for help coming up with a solution. Or an idea of where to start, in an attempt to fix this. All I need have done is have the "x" clear the field, reset the data on the view, and close the keyboard. With a single tap rather than a tap to clear the keyboard and another tap to actually do with its doing otherwise when the keyboard is down/closed.

Which React Native library I should use to scan devices with Bluetooth Classic and BLE with both iOS and Android? [closed]

$
0
0

I am interested in scan devices and not establish connections to exchange data.

Requirements are:

  • capability to read rssi values
  • compatibility with Bluetooth Classic
  • compatibility with BLE
  • working on iOS
  • working on Android

I found these libraries:

react-native-easy-bluetooth, but it doesn't meet requirements:

  • [ ] capability to read rssi values (unclear)
  • [x] compatibility with Bluetooth Classic
  • [x] compatibility with BLE
  • [ ] working on iOS
  • [x] working on Android

react-native-bluetooth-classic, but it doesn't meet requirements:

  • [ ] capability to read rssi values
  • [x] compatibility with Bluetooth Classic
  • [x] compatibility with BLE
  • [ ] working on iOS (specifying UISupportedExternalAccessoryProtocols strings is required)
  • [x] working on Android

react-native-ble-plx, but it doesn't meet requirements:

  • [x] capability to read rssi values 🎉
  • [ ] compatibility with Bluetooth Classic 😭
  • [x] compatibility with BLE
  • [x] working on iOS
  • [x] working on Android

It is quite frustrating not to be able to find a library with the mentioned requirements. Alternatively, I am thinking of studying Objective-C, while Java I know it quite well and write the respective native codes to me. However, before going to work, I would like to know if anyone knew a library compatible with the required requirements.


Recurrent local push notifications for react-native

$
0
0

I'm making a mobile app which needs heavy use of recurring notification settings (repeat daily, monthly, hourly, every weekdays, every weekends, every 2 hours, etc ...).

I've tried react-native-push-notification (only supports repeatType: week, day, hour, minute, time), and also checked react-native-notifications. But none of them allows me to make highly customized recurring notifications like that.

Have anyone done this using react-native without writing native code?

Why cannot see internal test option in test flight when deploying Expo project

$
0
0

I am new to IOS development, I upload a build on app store. From many tutorial I found online, in the testflight tab, I am supposed to see the internal test option, but my testflight tab looks very different from others. Please anyone has any idea?

Expected:enter image description hereMine:enter image description here

is not working in react native

$
0
0

Here is my instance

var LoginPopup=React.createClass({   render:function(){            return(<View><TextInput placeholder="number" keyboardType="numeric"/><TextInput placeholder="url" keyboardType="url"/></View>            )  }})

In this component any type of keyboardType is not working(like number,url, email-address,number-pad,phone-pad etc ,)

React native gradlew assembleRelease build failed. Execution failed for task ':app:mergeReleaseResources'

$
0
0

I'm encountering with this error, when run ./gradlew assembleRelease. I've tinkering about in some hours. Help pls. It was once builded successfully but, after my attempts of clearing something and combining different folders from my git history, nothing could rescue.

FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:mergeReleaseResources'.> [raw/app] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/app.json [raw/app] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/app.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_materialcommunityicons] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_materialcommunityicons.json[raw/node_modules_reactnativevectoricons_glyphmaps_materialcommunityicons] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_materialcommunityicons.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free_meta] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free_meta.json[raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free_meta] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free_meta.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome.json[raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_fontisto] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_fontisto.json   [raw/node_modules_reactnativevectoricons_glyphmaps_fontisto] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_fontisto.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_feather] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_feather.json[raw/node_modules_reactnativevectoricons_glyphmaps_feather] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_feather.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_entypo] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_entypo.json   [raw/node_modules_reactnativevectoricons_glyphmaps_entypo] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_entypo.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_ionicons] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_ionicons.json   [raw/node_modules_reactnativevectoricons_glyphmaps_ionicons] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_ionicons.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free.json   [raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_simplelineicons] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_simplelineicons.json[raw/node_modules_reactnativevectoricons_glyphmaps_simplelineicons] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_simplelineicons.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_evilicons] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_evilicons.json [raw/node_modules_reactnativevectoricons_glyphmaps_evilicons] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_evilicons.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_materialicons] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_materialicons.json [raw/node_modules_reactnativevectoricons_glyphmaps_materialicons] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_materialicons.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_antdesign] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_antdesign.json [raw/node_modules_reactnativevectoricons_glyphmaps_antdesign] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_antdesign.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_foundation] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_foundation.json   [raw/node_modules_reactnativevectoricons_glyphmaps_foundation] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_foundation.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_octicons] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_octicons.json   [raw/node_modules_reactnativevectoricons_glyphmaps_octicons] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_octicons.json: Error: Duplicate resources  [raw/node_modules_nativebase_dist_src_basic_icon_nbicons] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_nativebase_dist_src_basic_icon_nbicons.json [raw/node_modules_nativebase_dist_src_basic_icon_nbicons] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_nativebase_dist_src_basic_icon_nbicons.json: Error: Duplicate resources  [raw/node_modules_reactnativevectoricons_glyphmaps_zocial] /home/horhi/code/projects/ankilan/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_zocial.json   [raw/node_modules_reactnativevectoricons_glyphmaps_zocial] /home/horhi/code/projects/ankilan/android/app/build/generated/res/react/release/raw/node_modules_reactnativevectoricons_glyphmaps_zocial.json: Error: Duplicate resources* Try:Run with --stacktrace option to get the stack trace. Run with --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgDeprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.Use '--warning-mode all' to show the individual deprecation warnings.See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warningsBUILD FAILED in 58s65 actionable tasks: 11 executed, 54 up-to-date

How to configure React Native Image picker styling?

$
0
0

When i'm getting an image from the gallery in react-native-image-picker, i need to:

--change the font and colour of the Cancel, Play and Choose buttons

--change color of the progress bar from blue color

--remove the 'compressing video' text here

--change the background color behind the video from the deep blackenter image description here

how do I upload Big files to Google Drive from React Native

Expo React Native App Not Loading the AppEntry.bundle

$
0
0

I am working on a react-native app using expo. The app was working just fine. I could do npm start to run the metro builder and then run my app on simulator as well as iOS devices directly.

I did 2 things.

  1. I upgraded the expo version to latest - 3.17.15
  2. I rebooted my laptop.

After these 2 changes, I could still do npm start without any issues. But, when I tried to open/ run the app in iOS simulator it got stuck at the bundle loading. In fact it could not get the bundle file only.

I thought this was a network problem where the simulator/ device was not able to reach http://127.0.0.1:19000 However, when I visited the url in the browser that was working.

The bunlde url that I saw in the error: Here's what I see after waiting for 2 minutes

Now, when I try to visit that bundle url through the simulator:

http://127.0.0.1/node_modules/expo/AppEntry.bundle

The browser never loads the thing and times out.

I have already tried:

  1. Cleaning the cache - npm start --reset-cache
  2. Deleting the .expo folders in ~/.expo as well as ~/project/.expo
  3. Changing the mode from Lan -> Tunnel.
  4. Upgrading the global expo-cli to latest version.
  5. removing the node_modules directory in the project ~/project/node_modules
  6. re installing the node_modules by doing - npm install.

IMPORTANT - After having this issue with my current app, I decided to spawn a new blank expo app and run the same. Same result. The bundle was not loaded. I also remember something like this happening to me in the past but don't remember how I fixed it.

My Network is a hotspot through my phone. The same network used to work until yesterday without any issues. So not sure if reboot has caused some setting to revert.

Any help troubleshooting this problem would be very helpful here.

Here's what I see when I visit the url : http://127.0.0.1:19000/

Here's my metro builder log:


How to get current route name in react-navigation?

$
0
0

I want the name of the current route or screen in react-navigation which I want to use inside if condition to make some changes.

Is it possible to get the line number of an error in React Native?

$
0
0

I am writing a React Native app, and I find that the error messages that the iOS emulator generates never indicate the line in my code where the error occurred. In the screenshot below, I can see that this is a problem with the map() function in the Dashboard component, but since it doesn't give a line number, if there are multiple instances of map() in Dashboard, I don't know how to isolate which one is throwing the error. So my question is:

Can anyone explain why React Native doesn't indicate the line number in this scenario? Is this an inherent property of how React Native works and it will always be impossible to identify the given line (if so, please explain why in as much detail as possible)? Or is there a way I can build my app differently in order to show the line numbers of errors?

Thanks!

enter image description here

Permission denied - geolocation in React Native

$
0
0

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!

React Native issue with state and initialRegion in MapView component

$
0
0

I have a MapView that I'm trying to have focus on a user's current location. Right now I'm logging the position, and logging the currentRegion state. My issue is the component is showing the empty array in the log, and after it cycles through render it sets the state as the position coordinates, so that the MapView shows me somewhere in the middle of the ocean. Why isn't initialRegion grabbing the changed state and rendering?

 const screen = Dimensions.get('window');    const ASPECT_RATIO = screen.width / screen.height;    var LATITUDE_DELTA = 0.3022;    var LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;    class MapScreen extends Component {      constructor(props) {        super(props)        this.state = {          currentRegion: []        }      }      componentDidMount() {        navigator.geolocation.getCurrentPosition(          (position) => {            console.log(position)            this.setState({ currentRegion: {              latitude: position.coords.latitude,              longitude: position.coords.longitude,              latitudeDelta: LATITUDE_DELTA,              longitudeDelta: LONGITUDE_DELTA            }})          },          (error) => alert(error.message),          {timeout: 20000, maximumAge: 1000}        )      }      render () {        console.log(this.state.currentRegion)        return(<View style={styles.container}><MapView              showsUserLocation = {true}              style={styles.map}              initialRegion={this.state.currentRegion}            /></View>        )      }     }

How to change user current location blue dot color or image in react native

$
0
0

enter image description here

I am using below library to show the users current location

Library using : https://github.com/react-community/react-native-maps

Above library is used to show the current location and it's showing the current location on google map. I want to change the current location blue dot icon or want to change the color of the blue dot. Can anyone here help me on how to change the blue dot color or how to change current location image ?

<MapView provider={ PROVIDER_GOOGLE } style={ styles.map } initialRegion={this.state.region} onPress={this.onMapPress} minZoomLevel={15} showsUserLocation={true} ref={ref => { this.mapView = ref } }></MapView>
Viewing all 16907 articles
Browse latest View live


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