This question pertains to Facebook's React Native SDK and only in Android, as iOS renders LoginButton fine:
In Android, I see this instead:
I'm on react-native 0.41.2. I've followed the configurations for React-Native v0.30+. I've also done all the configurations in Android for Facebook SDK.
I found a similar thread for iOS with the same problem. The solution there was to make sure that the SDK is linked in the iOS project. I've gone over several times to make sure the SDK is linked in the Android project. I feel like I'm taking crazy pills; it's probably something really minor, but I can't seem to see it.
My MainActivity.java is:
package com.myapp;
import com.facebook.react.ReactActivity;
import android.content.Intent;
import android.os.Bundle;
import com.facebook.FacebookSdk;
import com.facebook.CallbackManager;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import java.util.Arrays;
import java.util.List;
public class MainActivity extends ReactActivity {
CallbackManager mCallbackManager = MainApplication.getCallbackManager();
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "MyApp";
}
// @Override
protected List<ReactPackage> getPackages() {
mCallbackManager = new CallbackManager.Factory().create();
ReactPackage packages[] = new ReactPackage[]{
new MainReactPackage(),
new FBSDKPackage(mCallbackManager),
};
return Arrays.<ReactPackage>asList(packages);
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
mCallbackManager.onActivityResult(requestCode, resultCode, data);
}
}
My MainApplication.java is:
package com.myapp;
import android.app.Application;
import android.util.Log;
import com.facebook.react.ReactApplication;
import io.realm.react.RealmReactPackage;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.appevents.AppEventsLogger;
public class MainApplication extends Application implements ReactApplication {
private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
protected static CallbackManager getCallbackManager() {
return mCallbackManager;
}
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RealmReactPackage(),
new FBSDKPackage(mCallbackManager)
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
I've added facebook_app_id to strings.xml. I have <uses-permission android:name="android.permission.INTERNET" /> and <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/> in AndroidManifest.xml. I have compile project(':react-native-fbsdk') in the dependencies block for my app's build.gradle. My settings.gradle has:
include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')
Package name matches the one I saved in FB's developer console. I've generated and uploaded development key hash. I feel like I've exhausted everything -- it's probably exhausting you read this far and I really thank you for that!!
One clue I found was using the inspector, which shows me UnimplementedView nested inside LoginButton:
I've searched for UnimplementedView but nothing turns up. In react-native log-android, I get these errors:
02-17 09:37:10.877 2977 3007 W ReactNativeJS: Warning: Native component for "RCTFBLikeView" does not exist 02-17 09:37:10.878 2977 3007 W ReactNativeJS: Warning: Native component for "RCTFBLoginButton" does not exist 02-17 09:37:10.878 2977 3007 W ReactNativeJS: Warning: Native component for "RCTFBSendButton" does not exist 02-17 09:37:10.878 2977 3007 W ReactNativeJS: Warning: Native component for "RCTFBShareButton" does not exist
I haven't found any Android related solutions on StackOverflow, though. I've only found an iOS thread here, which again sounds like a link problem.
I'm guessing I've linked the SDK incorrectly somehow, but I don't know where I screwed up.
Any help will be super appreciated!! Thank you!
-Connie
