React native fbsdk is not working if facebook own app is installed on the device. i am using

import { LoginButton, AccessToken, GraphRequest, GraphRequestManager, LoginManager } from 'react-native-fbsdk';

for facebook login. It is working fine but as there is a facebook default app in the device. facebook login not works. how can i resolve this. so if facebook app will be installed still my app facebook will still work.

I would like to ask how react native handle or do the responsive font. For example in iphone 4s i Have fontSize: 14, while in iphone 6 I have fontSize: 18.

I want to display a custom flatlist as a dropdown on click of a touchable. I have given position as absolute as well as zIndex etc to display the list on the top of other views. It works fine on Android, but on iOS, it does not overlap the views on the back, it shows as in the image provided here.

Any suggestions please!!??

import React, {Component} from 'react';
import {
  View,
  FlatList,
  Text, 
  StyleSheet,
  Image, 
  TextInput, 
  TouchableOpacity,
  TouchableWithoutFeedback, 
  Keyboard,
} from 'react-native';

class SearchableDropdownInput extends Component {

  state = {
    showItemList: false,
    selectedItem: {item: {name: ''}},
    destinationName: '',
    validation: '',
  };

  renderListItems = () => {
      return (
        <View style={{position: 'relative'}}>
          <FlatList
            keyboardShouldPersistTaps="handled"
            style={styles.itemsContainerStyle}
            data={this.props.destinationList}
            nestedScrollEnabled={true}
            keyExtractor={(item, index) => item.id}
            renderItem={item => (
              <TouchableOpacity
                key={item.item.key}
                style={styles.itemStyle}
                onPress={() => {
                  Keyboard.dismiss();
                  this.setState(
                    {
                      showItemList: false,
                      selectedItem: item,
                      destinationName: item.item.key,
                      validation: false,
                    },
                    () => {
                      this.props.onChange(item.item.key);
                      this.props.clearValidation();
                    },
                  );
                }}>
                {typeof item.item !== 'string' ? (
                  <Text key={item.id} style={styles.textField}>
                    {item.item.key} 
                  </Text>
                ) : (
                  <Text key={item.id} style={styles.textHeading}>
                    {item.item}
                  </Text>
                )}
              </TouchableOpacity>
            )}

          />
        </View>
      );
  };
  render() {
    return (
      <View>
        <View
          style={
            this.props.validationMsg !== ''
              ? styles.inActiveInputContainerStyle
              : styles.inputContainerStyle
          }
          >
          <TouchableWithoutFeedback
            onPress={() => this.refs['textInput'].focus()}
            style={{marginTop: 10}}>
            <Image source={this.props.icon} style={styles.imageStyle} 
            />
          </TouchableWithoutFeedback>
          <TextInput
            onFocus={() => {
              this.setState({showItemList: true});
              this.onChangeText(this.state.destinationName);
            }}
            ref="textInput"
            onBlur={() => this.setState({showItemList: false})}
            style={styles.inputStyle}
            placeholder={this.props.placeholder}
            placeholderTextColor="grey"
            value={this.state.destinationName}
            onChangeText={text => this.onChangeText(text)}
            testID={'Start_Planning_To_TextInput'}
            accessibilityLabel={'Start_Planning_To_TextInput'}
          />
        </View>
        {
            this.state.showItemList &&
            this.renderListItems()
        }
      </View>
    );
  }
}

export default SearchableDropdownInput;

const styles = StyleSheet.create({
  inputContainerStyle: {
    flexDirection: 'row',
    borderWidth: 1,
    height: 50,
    borderRadius:2,
    borderColor: '#b2b2b2',
    // elevation: 5,
    // shadowColor:"#15000000",
    // shadowOffset:{height:0,width:0},
    // elevation:10,
    // backgroundColor: 'white',
  },
  inActiveInputContainerStyle: {
    flexDirection: 'row',
    borderWidth: 1,
    borderRadius:2,
    height: 50, 
    borderColor: '#fe5246',
  },
  itemsContainerStyle: {
    maxHeight: 280,
    position: 'absolute',
    width: '100%',
    alignSelf: 'center',
    zIndex: 100,
    borderTopWidth: 0,
    borderColor: '#ccc',
    borderWidth: 1,
    backgroundColor: 'white',
    borderBottomWidth: 1,
  },
  itemStyle: {
    backgroundColor: 'white',
    width: '100%',
    alignSelf: 'center',
  },
  textField: {
    paddingLeft: 20,
    height: 42,
    paddingTop: 12, 
    color:"#3e3e3e"
    // justifyContent:"center",
  },
  textHeading: {
    color: '#999999',
    padding: 10,
    backgroundColor: '#efefef',
    marginBottom: 3,
  },
  imageStyle: {
    height: 25,
    width: 25,
    alignSelf: 'center',
    marginLeft: 15,
  },
  inputStyle: {
    height: 55,
    padding: 15,
    fontSize: 16,
    color:"#3e3e3e",
    width: '90%',
    alignSelf: 'center',
    borderRadius: 3, 
  },
});

I have seen already a number of border cases and strange developer interface.

From the "shake your device", which is really impractical, specially with a tablet

To working around Android studio to simulate a button press.

Is there a consistent way to do it? Can't we use a intern API to have a debug button within our app to launch such menu as navigator.popUpDevMenu()?

And if not, how do you shake your tablet to get it working. This is intended to solve How To configure HMR on a real device, too. React native does improve the development experience, but I'd say that particular thing slows it a little bit.

Your app crashed on iPad running iOS 13.3 on WiFi when we entered the provided credentials and tapped “Next.”

crash report

I couldn't find any clues for what's causing this

I saw Apple itself has a tool for swift to access external hardware trough the lighting cable. Is there a way in React Native to do the same and access external hardware data through a cable connection?

I use React Navigation to do my Navigation in my mobile app and I have a structure navigation like this:

const AccountStack = createStackNavigator(
    {
        Account: AccountView,
        ...

    },
    {
        initialRouteName: 'Account',
        headerMode: 'screen',
        ....
    }
)

const SearchUsersStack = createStackNavigator(
    {
        SearchUsers: SearchUsersView,
        UserProfile: UserProfileView,
        FriendsOfUser: FriendsOfUserView
    },
    {
        ...
    }
)

const AccountModalStack = createStackNavigator(
    {
        AccountStack: AccountStack,
        SearchUsersStack: SearchUsersStack,
    },
    {
        initialRouteName: 'AccountStack',
        headerMode: 'none',
        mode: 'modal',

    }
)

const MainApp = createBottomTabNavigator(
    {
        MainHome: HomeStack,
        MainPlay: PlayStack,
        MainAccount: AccountModalStack
    },
    {
        ...
    }
)

If I'm in the "search User" stack (for example, in SearchUserView) and I click on the "Account" icon in the bottom tab navigator, the stack will dismiss correctly and I will return to my "account" view.

However, if I am in one of the routes of my AccountStack and I click on the "Account" icon in the bottom tab navigator, the stack does not dismiss. So if I'm very far in the account stack, I have to go back with the back arrow.

Why does it work when I'm in the SearchUserStack but not when I'm in my AccountStack ?

I hope to find help!

Thank you !

Viktor

I'm trying to debug a React Native app which is already published in to the AppStore and while the app has a bunch of console.info / console.warn calls — seems that no log messages reach the device log (which I access through Xcode > Device & Simulators > some device > Open Console).

Also, I've just created a test app and added a bunch of console calls there, and while I see them all in Chrome Inspector it seems that they never reach device logs.

So the question is — am I doing something wrong or the console calls are actually not logged into the device log? If so, is there any other solution to do it? Something as simple as NSLog preferred.

Thanks a lot

I'm trying to access and copy a file from "/Documents" folder (on ios simulator) with RNFS but while .exists() can find the file, .copyFile() returns error as "The file 'temp.jpg' doesn't exists"

Why that can happen?

Here is my source file path (and also I can access it with image components):

Also adding "file://" to path doesn't work too.

/Users/myusername/Library/Developer/CoreSimulator/Devices/D305Z9A4-6C67-4DFE-A07D-1EF4D0302B87/data/Containers/Data/Application/B933EF45-391F-4882-986F-92B5430823D0/Documents/temp.jpg

Here is my code snippet, newlyCroppedImagePath is the path above. exists() returns correct result but .copyFile() returns "doesn't exists"

    RNFS.exists(newlyCroppedImagePath)
    .then((success) => {
        console.log('File Exists!'); // <--- here RNFS can read the file and returns this
    })
    .catch((err) => {
      console.log("Exists Error: " + err.message);
    });

    RNFS.copyFile(newlyCroppedImagePath, tmpFilePath)
    .then((success) => {
        console.log('file moved!');

    })
    .catch((err) => {
      console.log("Error: " + err.message); // <--- but copyFile returns "doesn't exists" error for temp.jpg
    });

I have build an ipa with expo build:ios --apple-id ${EXPO_APPLE_ID} -t simulator --release-channel staging --non-interactive.

I have downloaded the ipa using curl -o ${CI_BUILD_TAG}-staging.ipa "$(npx expo url:ipa --non-interactive)" and I want to install it with XCode on an iPhone 6.

Within xcode, I go on Window > Devices and Simulator, on the left panel I see my iPhone, where I can drag and drop .ipa into Installed Apps list.

I expect the ipa to install, instead I have the following error:

I have never published on the app store and this is my first native app.

Is it xcode or the ipa, is there a way to solve this?

Does that mean my app is broken and won't work on iOS because locally it works and I do not want to be fooled?

Thanks in advance for advice,

I implemented Apple Sign in through a Webview for my react-native app. It works ok except for Face ID enabled phones. If the phone has Face ID the dialog where the user selects if he/she wants to use his/her email or hide it is not shown, but a Face ID prompt is shown instead. When the user uses Face ID no email is returned to the web application. I attach some images below explaining the flow:

App's main screen

Prompt to open webview

Login screen

Face ID prompt once the user clicks on Continue

Once the prompt above is shown and the user clicks on Continue, Face ID is used to authenticate the user and the sign-in flow finally returns the email as nil. As I said before, this only happens to iPhones with Face ID enabled. How can I solve this issue and get the user's email?

Thanks,

I have implemented all the steps depicted in firebase official document for Firebase Crashlytics. I have cross-checked few times to make sure I don't miss any step.I referred this doc for implementation [;lsteps for implementation Also I uploaded DSYM files in firebase console assuming if dSYM files are not generating automatically. Still no crash is appearing in firebase console. I forced a crash for testing as mentioned in this docenter link description herebut no luck. Can someone please help me get crash logs in my firebase console?

Note: It is working perfectly in Android and logging crashes in console for Android.

I have gone through both the technology, react and flutter, react looks a huge community over different plateform and flutter looks quite new for that, so could some one share their experience which should to pick.

InsertDataToServer = () => {
const { pinValue1 } = this.state;
const { pinValue2 } = this.state;
const { pinValue3 } = this.state;
const { pinValue4 } = this.state;
var String_3 = pinValue1.concat("" , pinValue2);
var String_4 = String_3.concat("" ,  pinValue3);
var String_5 = String_4.concat("" ,  pinValue4);

fetch("http://www.aonde.biz/mobile/doLogin.php", {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "pin":212,

  })
})
  .then(response => response.json())
  .then(responseJson => {
    // Showing response message coming from server after inserting records.
    Alert.alert(responseJson);
  })
  .catch(error => {
    console.error(error);
  });

In the above code when I pass pin parameter API then show this error. Thank you please give some idea how to resolve this issue.

I'm using the react-native-image-picker package in my app. The post installation instructions for iOS say to add these keys inside info.plist.

<key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your microphone (for videos)</string>

I am able to edit info.plist and "save" it but after running react-native run-ios info.plist reverts back to the original. I checked the file permissions and I have both Read & Write.

Hello and thank you for your interest in my problem.

I spent 3 days trying to use the react-native-image-picker library without success. This is why I write here in search of help.

Here is the error I encounter : Error: react-native-image-picker: NativeModule.ImagePickerManager is null.

I start my project on : React Native CLI Quickstart& currently working on IOS (simulator: Iphone 11 / IOS 13.2)

Here is my dependencies :

"dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.2",
    "react-native-image-picker": "^1.1.0",
    ...
  },

Here is the error I encounter when I downgrade the image-picker dependency to "^0.24.0" : TypeError: null is not an object (evaluating 'ImagePickerManager.showImagePicker')

I follow this install guide for IOS : https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Install.md

My steps:

1- npm install react-native-image-picker

2- cd ios/ && pod install

3- To ios/myapp/Info.plist I add :

    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    ...

4- I open the IOS folder on my project into Xcode and select RNImagePicker.xcodeproj from node_modules like the guide say.

5- I click on RNImagePicker.xcodeproj => Build Phases => Link Binary With Libraries

6- I drag and drop libRNImagePicker.a from RNImagePicker.xcodeproj / Products / libRNImagePicker.a into Link Binary With Libraries

7- npx react-native run-ios

Before compile I got this : (I never never run the npx react-native link react-native-image-picker because Im over 0.60..)

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - react-native-image-picker (to unlink run: "react-native unlink react-native-image-picker")

After compile I got this warning :

warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 7.0, but the range of supported deployment target versions is 8.0 to 13.2.99. (in target 'react-native-image-picker' from project 'Pods')

but my current target version is 9.0

Here is my code :

import React, { useState } from 'react';
import { SafeAreaView, View, Image, StyleSheet, Button } from 'react-native';
import ImagePicker from 'react-native-image-picker';

export default function EditPhotoScreen() {
  const [state, setState] = useState({
    avatarSource: null,
  });

  const handlePhotoPicker = () => {
    ImagePicker.launchImageLibrary({ noData: true, mediaType: 'photo' }, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = { uri: response.uri };

        setState({ avatarSource: source });
      }
    });
  };
  return (
    <SafeAreaView>
      <View>
        <Button title="Im so tired please render something" onPress={() => handlePhotoPicker()} />
        {state ?
          <Image source={state.avatarSource} />
          : null
        }
      </View>
    </SafeAreaView>
  );
}

I built and deployed an app using react-native 0.61.4 The app makes calls to a node API for authentication and data. I archived the app for iphone usage, it works great, on wifi. The app seems to loose all knowledge of the api calls once on cellular data. I am using apisause to make the request, I have checked on the phones and all give permission to the app to use cell data, I also change the build scheme from debug to release.

I have request logging enabled on the node server. I see the request coming from the app when wifi is on but nothing when the app attempts to do so on cell signal.

I am stumped, any insights into this would help.

thanks!

I am trying to get a notification when a user enters a certain geofence. I am using react-native-push-notification for handling notifications the notification pops if the app is in the background (not removed from the recent apps).

I can see the app starting in the background when the app is dead and geofence is entered but none of my code inside the BackgroundGeolocation.onGeofence is getting executed

I tried turning on degub:true in the config and i get the default debug notification ENTER Geofence: geofence_id even when the app is dead

but my custom notification is not getting fired.

I also have Headless task registered for Android and everything works fine on Android

I am using thislibrary for geofencing

I also submitted an issue sample code can be found there

Requirement is such that User goes to Login Screen (Built on React Native) -> PIN Screen (Native Screen) -> Device Registration Screen (Built on React Native)

I was able to go from Login Screen -> PIN Screen, but not able to go from PIN Screen to Device Registration Screen.

It goes without a doubt that the state should be preserved. i.e. if we click back from Device Registration Screen we should land on PIN Screen and again back is clicked from PIN Screen, we should land on Login Screen.

Navigation Implementation

const MainNavigator = createStackNavigator(
  {
    Login: {
      screen: Login,
      navigationOptions: {
        title: 'Login',
        header: null
      }
    },
    DeviceRegistration: {
      screen : DeviceRegistration,
      navigationOptions: {
        title: 'Device Registration',
        header: null
      }
    },
   {
    initialRouteName: 'Login'
   }
);

const Navigation = createAppContainer(MainNavigator);

LoginScreen Implementation

import React, { Component } from 'react';
import { StyleSheet, View, Text, Button, NativeModules, AppRegistry } from 'react-native';
import { SafeAreaView } from 'react-navigation';

class LoginScreen extends Component {

    _goToNativePinPage(){
        NativeModules.ChangeViewBridge.changeToNativeView();
    }

    render() {
        const { navigate } = this.props.navigation;
        var s = require('../../styles/style');
        return (
            <SafeAreaView>
                <View style={s.container}>
                    <Text>This is Login page</Text>
                    <Button onPress={() => this._goToNativePinPage()} title="PIN PAGE"></Button>
                </View >
            </SafeAreaView>
        );
    }
}

AppRegistry.registerComponent('LoginScreen',() => LoginScreen);

export default Login;

Bridge implementation from React Native to Native

#import <React/RCTBridgeModule.h>

@interface ChangeViewBridge : NSObject <RCTBridgeModule>
- (void) changeToNativeView;
@end

#import "ChangeViewBridge.h"
#import "AppDelegate.h"
#import <React/RCTBridgeModule.h>

@implementation ChangeViewBridge

RCT_EXPORT_MODULE(ChangeViewBridge);

RCT_EXPORT_METHOD(changeToNativeView) {

  AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
  [appDelegate goToNativeView];
}

@end

Inside App Delegate

- (void) goToNativeView {
  dispatch_async(dispatch_get_main_queue(), ^{
      UIViewController *vc = [UIStoryboard storyboardWithName:@"main" bundle:nil].instantiateInitialViewController;
      self.window.rootViewController = vc;
  });
}

I want to do something like this but I don't have any idea how to achieve that (I googled it, but I found only result for native code Swift, Obj C, ...).

Do I have to play with some layers or something like that?

Thanks for your answers !

Viktor