React Native: All about issues

XCode

AppDelegate.m:12:9: ‘React/RCTBundleURLProvider.h’ file not found

In Xcode do the following:

• Product -> Scheme -> Manage Schemes
• Click ‘+’ at the Target
• Select “React” if not selected
• Set the React is shared

Turn off garbage log

You may see frequent log messages related to nw_connection_get_connected_socket or finished with error – code : -1001. These are due to attempted connections to the React debugging tools.

Silence these temporarily by going to Product \ Scheme \ Edit Scheme and finding the Arguments tab of the Run config. Add a new environment variable called “OS_ACTIVITY_MODE” with the value “disable”

Node

How to downgrade node to older verison

• Check your current node version
  [js]$ node -v[/js]
• Check for available node versions
  [js]brew search node[/js]
• Unlink from current version
  [js]$ brew unlink node[/js]
• Install the version you want using the following command (e.g. for version 8)
  [js]$ brew install node@8[/js]
• Link it to the installed version
  [js]$ brew link node@8[/js]
• Lastly, verify you have the right version installed using the node version command from the first step.

React Native

yarn

How to use yarn instead of npm

npm install -g yarn
yarn global add react-native-cli
react-native init sample

React Native: Error – ‘config.h’ file not found

Solution

cd node_modules/react-native/third-party/glog-0.3.4/../../scripts/ios-configure-glog.sh

error: cannot run C compiled programs

Investigation
brew doctor
Warning: Xcode is installed to a directory with a space in the name. This will cause some formulae to fail to build.

Solution
Change drive name in which Xcode is installed to a name without space

cd node_modules/react-native/third-party/glog-0.3.4/../../scripts/ios-configure-glog.sh

Clean, rebuild Xcode, same error: Error – ‘config.h’ file not found

Investigation
Check if Xcode is installed correctly or not

xcode-select -p
/Volumes/Mac Data/Work/Xcode.app/Contents/Developer

Incorrect

Solution

sudo xcode-select -s /Volumes/MacData/Work/Xcode.app/Contents/Developer

or

sudo xcode-select --switch /Volumes/MacData/Work/Xcode.app/Contents/Developer

Why build is failed for multiple line codes?

It’s because

return
<div />;

is transpiled to incorrect ES5 syntax

return;
React.createElement("div", null);

Android

Task :app:validateSigningDebug FAILED

cd Android/app

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

Can’t run on Android device, source is not loaded?

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

yarn android

React Native regressions

“nestedscrollenabled” for horizontal child ScrollView doesn’t work in Android

https://github.com/facebook/react-native/issues/21436

React Apollo graphQL

“loading” is false, no data is returned but it’s fine when requesting directly from GraphiQL browser
This happens when there is an argument name “id” is passed.
It’s necessary to put “id” field inside the request query to avoid this Apollo bug. If not, you have to convert your id value from String to Integer.

Same API is called multiple times with different arguments, data is returned differently to each argument. There is one object data is messed up.

When debugging, data is messed up at the entry point of API result returned

This may be because that object data uses property name of “id”. For some reason, graphQL Apollo cache messes this up

Solution is to use different field name other than “id” for data returned

users {
  aliasName: id
  name
  age
}

How to show external image url immediately?

There are 2 delays, 1 delay is from waiting API response, the other delay is from rendering external image URL.

Call API and save image urls somewhere inside the app to avoid API delay.
Download images and save somewhere inside the app to avoid delay 2.

WebView

How to set background music for Webview?

Reference https://codeplacer.wordpress.com/2015/01/20/how-to-play-background-audio-from-uiwebview/

#import <AVFoundation/AVFoundation.h>
AVAudioSession *audioSession = [AVAudioSession sharedInstance];
NSError *setCategoryError = nil;
BOOL ok = [audioSession setCategory:AVAudioSessionCategoryPlayback error:&setCategoryError];
if (!ok) {
NSLog(@"Error setting AVAudioSessionCategoryPlayback: %@", setCategoryError);
};

Edit info.plist https://stackoverflow.com/questions/38482544/background-audio-playback-in-uiwebview

#import <AVFoundation/AVFoundation.h> // hung-nb
// hung-nb
NSError *sessionError = nil;
NSError *activationError = nil;
[[AVAudioSession sharedInstance] setCategory: AVAudioSessionCategoryPlayback error:&sessionError];
[[AVAudioSession sharedInstance] setActive: YES error: &activationError];