React-native: Axios not working on ios but working on android. Error: JSON Value '' of type NSNull cannot be converted to NSString

Question

I ran the debugger and axios is failing in sending the request. The same thing works perfectly in Android. As soon as it sends the request through axios then these red screens pop up on the emulator:

This is the code that is giving the error:

 /*red screen here after request send*/return axios.get(config.backend_url + '/api/firebase-user/' + firebaseId)
          .then((userDataFetchResult) => {
            dispatch(setUserGeneralData(userDataFetchResult.data.data));
            dispatch(authOperationFinished());
            return userData;
          })
          .catch(err => {
            console.log(err);
            dispatch(authOperationFailed(err));

          });

My package.json:

 "dependencies": {
    "axios": "^0.18.0",
    "lodash": "^4.17.5",
    "native-base": "^2.4.1",
    "react": "16.3.1",
    "react-native": "0.54.1",
    "react-native-app-intro-slider": "^0.2.4",
    "react-native-datepicker": "^1.7.1",
    "react-native-fbsdk": "^0.7.0",
    "react-native-firebase": "^4.0.0",
    "react-native-image-picker": "^0.26.7",
    "react-native-navigation": "^1.1.444",
    "react-native-twitter-signin": "^1.0.2",
    "react-native-vector-icons": "^4.6.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }

My info.plist:





    CFBundleURLTypes
    
        
            CFBundleURLSchemes
            
                fbXXXXXXX
            
        
    
    LSApplicationQueriesSchemes
    
        fbapi
        fb-messenger-share-api
        fbauth2
        fbshareextension
    
    NSCameraUsageDescription
    Camera Permissions
    NSPhotoLibraryUsageDescription
    Gallery Permissions
    UIAppFonts
    
        Ionicons.ttf
    
    CFBundleDevelopmentRegion
    en
    CFBundleDisplayName
    FFFF
    CFBundleExecutable
    $(EXECUTABLE_NAME)
    CFBundleIdentifier
    org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
    CFBundleInfoDictionaryVersion
    6.0
    CFBundleName
    $(PRODUCT_NAME)
    CFBundlePackageType
    APPL
    CFBundleShortVersionString
    1.0
    CFBundleSignature
    ????
    CFBundleVersion
    1
    LSRequiresIPhoneOS
    
    UILaunchStoryboardName
    LaunchScreen
    UIRequiredDeviceCapabilities
    
        armv7
    
    UISupportedInterfaceOrientations
    
        UIInterfaceOrientationPortrait
        UIInterfaceOrientationLandscapeLeft
        UIInterfaceOrientationLandscapeRight
    
    UIViewControllerBasedStatusBarAppearance
    
    NSLocationWhenInUseUsageDescription
    
    NSAppTransportSecurity
    
        NSAllowsArbitraryLoads
        
        NSExceptionDomains
        
            localhost
            
                NSExceptionAllowsInsecureHTTPLoads
                
            
        
    
    FacebookAppID
    XXXXXX
    FacebookDisplayName
    FF

My AppDelegate.m:

#import "AppDelegate.h"
#import 
#import 

// **********************************************
// *** DON'T MISS: THE NEXT LINE IS IMPORTANT ***
// **********************************************
#import 

// IMPORTANT: if you're getting an Xcode error that RCCManager.h isn't found, you've probably ran "npm install"
// with npm ver 2. You'll need to "npm install" with npm 3 (see https://github.com/wix/react-native-navigation/issues/1)

#import 
#import "RCCManager.h"

#import 

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];

  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];


  NSURL *jsCodeLocation;
#ifdef DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.backgroundColor = [UIColor whiteColor];
  [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation launchOptions:launchOptions];

  return YES;
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary *)options {

  BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
                                                                openURL:url
                                                      sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
                                                             annotation:options[UIApplicationOpenURLOptionsAnnotationKey]
                  ];

  BOOL handledT = [[Twitter sharedInstance] application:application openURL:url options:options];
  // Add any custom logic here.
  return handled || handledT;
}


- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

@end

Any idea of what could be the problem? Thank you very much!

EDIT: Aparently the request data arrives but it throws the red screen anyway. The render method of the component that calls it runs several times as well before throwing the error. Im calling it on componentDidMount. The render method is

render() {

    let content = (
      
    ); 


    let spinner = null;

    if (this.props.causesFetchLoading || this.state.checkingFirebaseAuth) {
      spinner = 
    }

     return (
      
           
            
          {content}
          {spinner}
      
    );
  }
}

EDIT 2: It seems that is has nothing to do with networking. I've been following the program with the debugger and it fails when it renders the components. It must be doing some conversion that is accepted in android but not in ios....

Juan L · Accepted Answer

I solved it by doing a lot of digging with the debugger since the error message is really cryptic and not helpful at all. It's a shame that it doesn't show something more specific.

In the end, it wasn't something related to networking. The data arrived but at the moment of rendering it failed. I started to remove one component at a time to see what the problem could be until the problem pointed to a card component that had an image component.

The issue was that if you set the source of an image in React Native with a null value, Android will accept it with no problem. But if you do that in IOS then it will throw the error(red screen) that you see above.

The solution is to render conditionally the image if the path is not null. Here is how I solved it for future reference:

if(props.cause.pic_url){
    image = ()

  }

  return (
    
            
              
                  { thumbnail }
                
                {props.cause.name}
                {props.cause.hashtag}                  
                
              
            
            
              
                   { image }
                
                  {props.cause.short_description}
                
              
            
            
              
                
              
            
          

  )

React-native: Axios not working on ios but working on android. Error: JSON Value '<null>' of type NSNull cannot be converted to NSString

Answers (1)

Related Questions

React-native: Axios not working on ios but working on android. Error: JSON Value &#39;&lt;null&gt;&#39; of type NSNull cannot be converted to NSString

Answers (1)

Related Questions

React-native: Axios not working on ios but working on android. Error: JSON Value '<null>' of type NSNull cannot be converted to NSString