I have the problem described in the title. I run the debugger and it's only reaching the index.js and not the index.ios.js for example since it's not even present in the debugger. So it should be a react-native-navigation issue. It gets stucked in the Splash screen with the app name that says Powered by react native. The logs doesn't show any error, just random warnings.
My AppDelegate.m is:
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <FBSDKCoreKit/FBSDKCoreKit.h>
// **********************************************
// *** DON'T MISS: THE NEXT LINE IS IMPORTANT ***
// **********************************************
#import <TwitterKit/TwitterKit.h>
// 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 <Firebase.h>
#import "RCCManager.h"
#import <React/RCTRootView.h>
@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<NSString *,id> *)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
My index.js (Debugger reaches this file)
import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import App from './App';
import configureStore from './src/store/configureStore';
const store = configureStore();
const RNRedux = () => (
<Provider store={store}>
<App />
</Provider>
);
AppRegistry.registerComponent('myapp', () => RNRedux);
index.ios.js (android one is the same as this one and it works, debugger doesn't reach this file)
import App from './App';
App();
App file:
import { Navigation } from "react-native-navigation";
import { Provider } from "react-redux";
import configureStore from "./src/store/configureStore";
import startMainTabs from "./src/screens/MainTabs/startMainTabs";
import AuthScreen from "./src/screens/Auth/Auth";
import MainScreen from "./src/screens/Main/Main";
const store = configureStore();
// Register Screens
Navigation.registerComponent(
"AuthScreen",
() => AuthScreen,
store,
Provider
);
Navigation.registerComponent(
"MainScreen",
() => MainScreen,
store,
Provider
);
// Start a App
export default () => startMainTabs();
And my startMainTabs file:
import { Navigation } from 'react-native-navigation';
import { Platform } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import LanguagesManager from '../../../config/LanguagesManager';
const startTabs = () => {
const language = new LanguagesManager("es");
Promise.all([
Icon.getImageSource(Platform.OS === 'android' ? "md-map" : "ios-map", 30),
Icon.getImageSource(Platform.OS === 'android' ? "md-share-alt" : "ios-share", 30),
Icon.getImageSource(Platform.OS === 'android' ? "md-menu" : "ios-menu", 30)
]).then(sources => {
Navigation.startTabBasedApp({
tabs: [
{
screen: "MainScreen",
label: language.causes_explorer_title,
title: language.causes_explorer_label,
icon: sources[0],
navigatorButtons: {
leftButtons: [
{
icon: sources[2],
title: language.sidedrawer_title,
id: "sideDrawerToggle"
}
]
}
}
],
tabsStyle: {
tabBarSelectedButtonColor: "orange"
},
drawer: {
left: {
screen: "SideDrawer"
}
},
appStyle: {
orientation: 'portrait',
tabBarSelectedButtonColor: "orange"
},
animationType: 'slide-down'
});
});
};
export default startTabs;
My dependencies in the package.json file:
"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.435",
"react-native-twitter-signin": "^1.0.2",
"react-native-vector-icons": "^4.4.2",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
}
Does anyone know how to fix this? Thank you very much for your help!
The problem was with the export of the App.js file . I changed export default () => startMainTabs(); to startMainTabs(); and it worked since it was not executing the index.ios.js file so that file is not doing anything with this new change. As for android, I just left the file empty as well since with this setup it will always go through index.js