Currently we are using expo camera, we have to use our own buttons to take picture. I already saw android applications that were using my built in camera application. Is it possible to achieve that in react native with expo ?

I have built an android app using fingerprint authentication in Android Studio. I need to build the same thing but using React Native for android and iOS. How to go for it?

Following https://reactnative.dev/docs/native-modules-ios, I'm unable to get NativeModules to contain anything. It's just an empty object (i.e. {}), but it should have the CalendarManager object and associated addEvent() method attached. This is true both for the simulator and my physical device. I was able to get an Android NativeModule working, so it appears to just be an iOS issue.

React Native version: 0.61.5

Podfile

platform :ios, '11.0'require_relative '../node_modules/react-native-unimodules/cocoapods'require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'target 'native' do  rnPrefix = "../node_modules/react-native"  # React Native and its dependencies  pod 'FBLazyVector', :path => "#{rnPrefix}/Libraries/FBLazyVector"  pod 'FBReactNativeSpec', :path => "#{rnPrefix}/Libraries/FBReactNativeSpec"  pod 'RCTRequired', :path => "#{rnPrefix}/Libraries/RCTRequired"  pod 'RCTTypeSafety', :path => "#{rnPrefix}/Libraries/TypeSafety"  pod 'React', :path => "#{rnPrefix}/"  pod 'React-Core', :path => "#{rnPrefix}/"  pod 'React-CoreModules', :path => "#{rnPrefix}/React/CoreModules"  pod 'React-RCTActionSheet', :path => "#{rnPrefix}/Libraries/ActionSheetIOS"  pod 'React-RCTAnimation', :path => "#{rnPrefix}/Libraries/NativeAnimation"  pod 'React-RCTBlob', :path => "#{rnPrefix}/Libraries/Blob"  pod 'React-RCTImage', :path => "#{rnPrefix}/Libraries/Image"  pod 'React-RCTLinking', :path => "#{rnPrefix}/Libraries/LinkingIOS"  pod 'React-RCTNetwork', :path => "#{rnPrefix}/Libraries/Network"  pod 'React-RCTSettings', :path => "#{rnPrefix}/Libraries/Settings"  pod 'React-RCTText', :path => "#{rnPrefix}/Libraries/Text"  pod 'React-RCTVibration', :path => "#{rnPrefix}/Libraries/Vibration"  pod 'React-Core/RCTWebSocket', :path => "#{rnPrefix}/"  pod 'React-Core/DevSupport', :path => "#{rnPrefix}/"  pod 'React-cxxreact', :path => "#{rnPrefix}/ReactCommon/cxxreact"  pod 'React-jsi', :path => "#{rnPrefix}/ReactCommon/jsi"  pod 'React-jsiexecutor', :path => "#{rnPrefix}/ReactCommon/jsiexecutor"  pod 'React-jsinspector', :path => "#{rnPrefix}/ReactCommon/jsinspector"  pod 'ReactCommon/jscallinvoker', :path => "#{rnPrefix}/ReactCommon"  pod 'ReactCommon/turbomodule/core', :path => "#{rnPrefix}/ReactCommon"  pod 'Yoga', :path => "#{rnPrefix}/ReactCommon/yoga"  pod 'DoubleConversion', :podspec => "#{rnPrefix}/third-party-podspecs/DoubleConversion.podspec"  pod 'glog', :podspec => "#{rnPrefix}/third-party-podspecs/glog.podspec"  pod 'Folly', :podspec => "#{rnPrefix}/third-party-podspecs/Folly.podspec"  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'  # Other native modules  # Automatically detect installed unimodules  use_unimodules!  # react-native-cli autolinking  use_native_modules!  # https://stackoverflow.com/a/59564933  use_frameworks!end

Native.js

import { NativeModules } from "react-native";...console.log(NativeModules); // {}

CalendarManager.h

#import <React/RCTBridgeModule.h>@interface CalendarManager : NSObject <RCTBridgeModule>@end

CalendarManager.m

#import "CalendarManager.h"#import <React/RCTBridgeModule.h>@implementation CalendarManagerRCT_EXPORT_MODULE();RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){  RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);}@end

The question is simple. I have a View with a Text component in it. I just want this text to be blurred initially.The only solution I saw to blur something in React Native is for an Image via this "react-native-blur".

How can we blur a Text component in React Native?

Info: I just want to make an app where the user does not see the answer directly (via blurring).

I want to paste into a react native input, but do something based on the pasted content (i.e. if the pasted content is a link, style it accordingly). However, in order to do this I need to know when something has been pasted into the text input. I am not sure how to listen for a paste event. The Clipboard does not really help here because all it does it set/get content, not tell me if some arbitrary content has been pasted.

I am trying to add a side menu to my react-native application using react-native-navigation. The goal is to have a hamburger menu that when activated shows the side menu. I searched the official component documentation https://wix.github.io/react-native-navigation/docs/sideMenu/, but the information was not enough. Can someone help me by showing a practical step-by-step how to set up this side menu and when clicking on the options, rederize the desired screen?

my index.js

import { Navigation } from "react-native-navigation";import Login from './src/screen/Login';import Main from './src/screen/Main';import UserAccount from './src/screen/UserAccount';Navigation.registerComponent('Login', () => Login);Navigation.registerComponent('Main', () => Main);Navigation.registerComponent('UserAccount', () => UserAccount);Navigation.setDefaultOptions({    topBar: {        leftButtons: {            id: 'sideMenu',            icon: require('./resource/img/menuIcon.png')        },        title: {            alignment: 'left'        }    }});Navigation.events().registerAppLaunchedListener(async () => {   //code for the side menu});

I'm trying to setup a new react-native project but I ran into this error when I tried react-native run-android:

What went wrong:Execution failed for task ':app:validateSigningDebug'.> Keystore file 'C:\Users\Ahers\Downloads\reactnative-beautiful-ui-master (1)\reactnative-beautiful-ui-master\android\app\debug.keystore' not found for signing config 'debug'. error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081Note: C:\Users\Ahers\Downloads\reactnative-beautiful-ui-master (1)\reactnative-beautiful-ui-master\node_modules\react-native-gesture-handler\android\src\main\java\com\swmansion\gesturehandler\react\RNGestureHandlerButtonViewManager.java uses or overrides a deprecated API.

Here's my build.grade code:

// Top-level build file where you can add configuration options common to all sub-projects/modules.buildscript {    ext {        buildToolsVersion = "28.0.3"        minSdkVersion = 16        compileSdkVersion = 28        targetSdkVersion = 28        supportLibVersion = "28.0.0"    }    repositories {        google()        jcenter()    }    dependencies {        classpath("com.android.tools.build:gradle:3.4.1")        // NOTE: Do not place your application dependencies here; they belong        // in the individual module build.gradle files    }}allprojects {    repositories {        mavenLocal()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url("$rootDir/../node_modules/react-native/android")        }        maven {            // Android JSC is installed from npm            url("$rootDir/../node_modules/jsc-android/dist")        }        google()        jcenter()    }}

I tried running this command in order to fix it but it didn't work:

keytool -genkey -v -keystore debug.keystore  -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000

I'm honestly not sure what to do so I would appreciate any suggestions.

I have a React Native project using react-native-maps:

    getRegionForCoordinates(points) {        // points should be an array of { latitude: X, longitude: Y }        let minX, maxX, minY, maxY;        var arr = [];        Object.keys(points).map(key => {            var point = points[key];            arr.push([{latitude: point.latitude, longitude: point.longitude}])        })        points = arr;        var first = points[0];        minX = first[0].latitude;        maxX = first[0].latitude;        minY = first[0].longitude;        maxY = first[0].longitude;        // calculate rect        points.map((point) => {            minX = Math.min(minX, point[0].latitude);            maxX = Math.max(maxX, point[0].latitude);            minY = Math.min(minY, point[0].longitude);            maxY = Math.max(maxY, point[0].longitude);        });        const midX   = (minX + maxX) / 2;        const midY   = (minY + maxY) / 2;        const deltaX = (maxX - minX);        const deltaY = (maxY - minY);        return {            latitude       : midX,            longitude      : midY,            latitudeDelta  : deltaX,            longitudeDelta : deltaY        };    }   componentDidMount() {      var event     = this.props.event;      var mapData   = JSON.parse(event.map);      var map       = mapData[0];      var markers = [];      Object.keys(map.markers).map(key => {         var marker = map.markers[key];         var obj = [{ latitude: parseFloat(marker.lat), longitude: parseFloat(marker.lng) }];         markers.push(obj[0]);      });      var region = this.getRegionForCoordinates(markers);      setTimeout(() => {         this.ref.animateToRegion(region, 1);      }, 5000)   }    renderMap() {      var event     = this.props.event;      var mapData   = JSON.parse(event.map);      var map       = mapData[0];        return (<View><MapView                    provider={PROVIDER_GOOGLE}                    style={mapStyles.map}               ref={(map) => {                  this.ref = map               }}                    customMapStyle={customMapStyle}                      key={ `${Date.now()}` }>                    {                        map.markers.map(marker => {                            return (<EventMapMarker marker={marker} navigation={this.props.navigation} />                            )                        })                    }</MapView></View>        )    }

In this code I am trying to animate to a region based on the markers that will be displayed on the map. The latitude, longitude, latitudeDelta and longitudeDelta are correct as they work for Android.

However, on iOS it animates to a completely wrong region, both in the simulator and on the device.

Setting initialRegion or region doesn't seem to make any difference.

I have tried a bunch of different things, like animating in the onMapReady function, using a setTimeout to delay the animate, updating/downgrading react-native-maps, etc.. I don't know if this is a bug or something I have set incorrectly in my project.

React Native version is 0.59.0.

react-native-maps version is 0.27.1.

So following this .... https://facebook.github.io/react-native/docs/running-on-device.html#building-your-app-for-production

Why does metro still open for release?

I'm stuck on this issue:When I try to submit this subscription, I got an error of "subscription_payment_intent_requires_action", should I handle it on client-side or there is another way to do it?

For information: I already created setupIntent (verify 3D Secure) and return payment_method

Steps:1 - create setupIntent2 - generate payment_method ( verify 3D Secure)3 - create Customer and attach payment_method to it4 - create Subscription (on back_end) => error: "subscription_payment_intent_requires_action" shows up!

Thank you all!

// Create Subscription With Payment Method + Customer IDrouter.post('/createSubscription', function (req, res){  const {payment_method, customerId} = req.body;  var stripe = require("stripe")(stripe_sk);  try{  stripe.subscriptions  .create({    customer: customerId,    items: [{      plan: 'plan_HTGCI8ljPYFTHQ'    }],    default_payment_method: payment_method,    expand: ["latest_invoice.payment_intent"],    // enable_incomplete_payments: true  }).then(subscription => {    res.send({      subscription : subscription    })  }).catch(err => {    res.send({      err    })  })} catch (error) {  res.send("Error : ", error);}});```

I dont have any errors but I still cant open screen that I want. Here is my FlatList item:

let categories = [         {            screenName : Player,            name : "Category 1",            img : require("../Assets/Slika.jpg"),        },

Here is TouchableOpacity with onPress

return (<View style={styles.container}><FlatList                    data={categories}                    showsHorizontalScrollIndicator={false}                    numColumns={categories.length / 5}                    showsVerticalScrollIndicator={false}                    keyExtractor={(item, index) => index.toString()}                    renderItem = {({item, index}) => {                        return (<TouchableOpacity onPress={() => item.screenName}><Surface style={styles.surface}><ImageBackground                            source={item.img}                             style={styles.img}                            blurRadius={0.5}><Icon name="music" color="#fff" size={22}/><Text style={styles.name}>{item.name}</Text></ImageBackground></Surface></TouchableOpacity>                        );                    }}                /></View>

I am having a strange issue, the app (iOS and Android) works fine when being used in a Simulator under Remote Debug mode.

However, when I turn the Remote Debug mode off for iOS development, I am unable to receive data back from the server. This is not the case with Android it works fine as expected outside Remote Debug mode.

Wonder what might the case with iOS when I turn the Remote Debug mode off?

I have also attached a screenshot of Network requests from iOS simulator if it is helpful in narrowing down the issue here.

In the firebase database, I have only one object. And it has only one value.

In android, everything is working fine. In iOS, the app crashes on 'on' method.

Below message appears in the red screen in iOS:

undefined is not a function (this._database.native.on...)

Here is the code that I am using in componentDidMount.

componentDidMount() {        database()            .ref('/checkPlatform')            .on('value', snapshot => {                let firebaseData = snapshot.val()                this.setState({ isAndroidDisable: firebaseData.isPlatformEnabled })            }); }

Instead of the on method, I've also tried once(). But no luck.

Any help will be appreciated.

I am trying deeplinking in React-Native. The code works properly when the app is in the background. But once I remove the app from background and try to launch it using the link in safari. The app is launched with details screen. But I could not find previous (Home) screens in the Navigation Stack. Please find the code below:

/* eslint-disable react-native/no-inline-styles */import 'react-native-gesture-handler';import React from 'react';import {TouchableOpacity, Text, View} from 'react-native';import {useLinking, NavigationContainer} from '@react-navigation/native';import {createStackNavigator} from '@react-navigation/stack';const HomeScreen = ({navigation}) => {  return (<View      style={{        flex: 1,        alignItems: 'center',        justifyContent: 'center',      }}><Text>Home Screen</Text><TouchableOpacity        onPress={() => {          navigation.navigate('Details', {itemId: 40});        }}><Text>Go to Details</Text></TouchableOpacity></View>  );};const DetailScreen = ({route, navigation}) => {  return (<View      style={{        flex: 1,        alignItems: 'center',        justifyContent: 'center',      }}><Text>Details Screen</Text><Text>Item Id: {route.params.itemId}</Text><TouchableOpacity onPress={() => navigation.goBack()}><Text>Go Back</Text></TouchableOpacity></View>  );};const Stack = createStackNavigator();const App = () => {  const ref = React.useRef();  const {getInitialState} = useLinking(ref, {    prefixes: ['deeplink://'],    config: {      initialRouteName: 'Home',      Home: 'Home',      Details: {        path: 'Details/:itemId',        parse: {          itemId: null,        },      },    },    getPathFromState(state, config) {      console.log(state);    },  });  const [isReady, setIsReady] = React.useState(false);  const [initialState, setInitialState] = React.useState();  React.useEffect(() => {    Promise.race([      getInitialState(),      new Promise((resolve) => setTimeout(resolve, 150)),    ])      .catch((e) => {        console.error(e);      })      .then((state) => {        if (state !== undefined) {          setInitialState(state);        }        setIsReady(true);      });  }, [getInitialState]);  if (!isReady) {    return null;  }  return (<NavigationContainer      fallback={<Text>Loading...</Text>}      initialState={initialState}      ref={ref}><Stack.Navigator initialRouteName="Home"><Stack.Screen name="Home" component={HomeScreen} /><Stack.Screen name="Details" component={DetailScreen} /></Stack.Navigator></NavigationContainer>  );};export default App;

Launched the app using "deeplink://Details/86" in Safari.

Does anyone use grpc with react native? I found some solutions with limitations. It is possible to make full grpc to be used on android an iOS with streaming and all features but as react native module?

I'm trying to use a SwiftUI component with my React Native app, which appears to be a little complicated since I haven't found any documentation or tutorials for doing this online. Here are the files I'm using:

CategoryCardView.swift

import UIKitimport SwiftUIstruct CategoryCard: View {  var name: String  var body: some View {      Text(name)  }}@objc(RCTCategoryCardViewManager)class RCTCategoryCardViewManager: RCTViewManager {  override static func requiresMainQueueSetup() -> Bool {    return true  }  @objc var name: String = "Default text"  override func view() -> UIView! {    let swiftUIView = CategoryCard(name: name)    let viewController = UIHostingController(rootView: swiftUIView)    return viewController.view  }}

CategoryCardView.m

#import <React/RCTViewManager.h>@interface RCT_EXTERN_MODULE(RCTCategoryCardViewManager, RCTViewManager)RCT_EXPORT_VIEW_PROPERTY(name, NSString)@end

NativeCategoryCard.tsx (in React Native):

import {requireNativeComponent} from "react-native";import React from "react";const NativeCategoryCard = requireNativeComponent('RCTCategoryCardView');export interface CategoryCardProps{    name: string;}function CategoryCard(props: CategoryCardProps) {    return <NativeCategoryCard        style={[{            height: 100,            width: 100        }]}        {...props}    />}export default CategoryCard;

And then somewhere in my React Native code:

<CategoryCard text='hello' />

My app throws the following error when it tries rendering <CategoryCard>:

Exception thrown while executing UI block: -[_TtGC7SwiftUI14_UIHostingViewV7PalChat12CategoryCard_ setName:]: unrecognized selector sent to instance 0x7fc8718c7830

I don't really understand Swift and SwiftUI thoroughly, especially in terms of integrating it with React Native, so I apologise if I'm making an obvious mistake.

I'm developing an app with react native(0.61.5) and I'm trying to implement several log in using react-native-firebase/auth(6.3.4)

For the log in with apple I use react-native-apple-authentication it's working like a charm following this example : https://github.com/invertase/react-native-apple-authentication/blob/master/docs/FIREBASE.md

const _signInUserWithCredential = (credential: FirebaseAuthTypes.AuthCredential) => {  firebase       .auth()       .signInWithCredential(credential)       .then(data => {               //success         })          .catch(error => {                console.warn(error);         });};

My user can logIn with several credential (Google, Apple, Facebook...). If my user is already loged with a credential I use _linkUserWithCredential to link the new credential to the existing account :

const _linkUserWithCredential = (credential: FirebaseAuthTypes.AuthCredential) => {    if (user !== null) {        user.linkWithCredential(credential)            .then(data => {              //success            })            .catch(error => {                console.warn(error.code);            });    }};

It works too.

I have an issue when I try to merge an Apple account with an existing one.

As explained in the doc :https://firebase.google.com/docs/auth/web/account-linking

Account linking will fail if the credentials are already linked to another user account. In this situation, you must handle merging the accounts and associated data as appropriate for your app

var prevUser = auth.currentUser;// Sign in user with another accountauth.signInWithCredential(credential).then(function(user) {  console.log("Sign In Success", user);  var currentUser = user;  // Merge prevUser and currentUser data stored in Firebase.  // Note: How you handle this is specific to your application  // After data is migrated delete the duplicate user  return user.delete().then(function() {    // Link the OAuth Credential to original account    return prevUser.linkWithCredential(credential);  }).then(function() {    // Sign in with the newly linked credential    return auth.signInWithCredential(credential);  });}).catch(function(error) {  console.log("Sign In Error", error);});

and again it's working except with Apple

Apple credential can only be use once so if linkWithCredential fails I can't merge the account as I need a new credential to perform signInWithCredential.

In the iOS firebase doc you can retrieve new credential from the error fired by linkWithCredential in the userInfo key FIRAuthErrorUserInfoUpdatedCredentialKey as explain here : https://firebase.google.com/docs/auth/ios/apple

Unfortunately I think that FIRAuthErrorUserInfoUpdatedCredentialKey is not implemented for react native.

So my questions are :

• How can I get a new apple credential without having my user to prompt again his password?
• How can I reuse an apple credential ?
• Do you have any idea to merge an apple user to an existing one?

A work around would be to use firebase admin to test if a user exists with the current credential and then merge the accounts but I'd rather not install firebase admin just for that

I am running to this error for a couple of days while I am trying to find some solution for it

I am applying a Facebook authentication to my Expo app . Android everything is working as expected while is ios ONLY getting this error

[Error: Unsuccessful debug_token response from Facebook:{"error":{"message":"(#100) The App_id in the input_token did notmatch the ViewingApp","type":"OAuthException","code":100,"fbtrace_id":"AatQy0aKnSRI8b_pOTa4txS"}}]

While I am searching everybody is pointing that means the AppID or AppSecret provided to firebase is wrong but I am 100% sure it's right as it's working well with android and the user is being authenticated and added to users so my expectations there is something wrong with ios config

Notes

App is directing to FB successfully and return token through ios

Again I am 100% sure of my AppID and AppSecret is correct as I copied paste them

Expo CLI 3.21.9 environment info:    System:      OS: Windows 10 10.0.18363    Binaries:      Node: 12.18.0 - C:\Program Files\nodejs\node.EXE      npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD    IDEs:      Android Studio: Version  4.0.0.0 AI-193.6911.18.40.6514223    npmPackages:      expo: ~37.0.3 => 37.0.12      react: ~16.9.0 => 16.9.0      react-dom: ~16.9.0 => 16.9.0      react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4      react-native-web: ~0.11.7 => 0.11.7      react-navigation: ^4.3.9 => 4.3.9

I will be very grateful if someone is willing to help me with this

Thanks in advance

I am running a react-native application on Mac. but I am getting "RNCSafeAreaView" was not found in the UIManager.

I can't get the badge count on ios when the app is in the background and closed.I have referred this issue #1824. But it has closed, I didn't get any solution from that.

I am sharing a piece of code what I have used to get notifications

this.notificationListener = firebase      .notifications()      .onNotification(async (notification) => {        const localNotification = new firebase.notifications.Notification({ show_in_foreground: false })          .setNotificationId(notification.notificationId)          .setTitle(notification.title)          .setBody(notification.body)          .setData(notification.data)          .android.setChannelId("fcm_default_channel")          .android.setSmallIcon("@drawable/wasfat")          .android.setAutoCancel(true)          .android.setColor("#b61b33")          .android.setPriority(firebase.notifications.Android.Priority.High);        let badgeCount = await firebase.notifications().getBadge();        firebase.notifications().setBadge(badgeCount + 1);        firebase.notifications().displayNotification(localNotification).catch(err => { });      });

from the above code, I'm getting notification very fine in all cases. But I'm able to get badge count, only app is in the foreground.

Please suggest, If anything I have missed to get badge count when the app is in the background and closed.

I am facing this only on ios. For android, it is working fine without the setBadge() method.

Platform: iOS react-native: 0.61.5react-native-firebase: 5.5.6

Thanks for any help.