yamill / react-native-orientation

Listen to device orientation changes in react-native and set preferred orientation on screen to screen basis.
https://www.npmjs.com/package/react-native-orientation
ISC License
1.72k stars 811 forks source link

undefined is not an object (evaluating Orientation.lock`) #310

Open leadhkr opened 6 years ago

leadhkr commented 6 years ago

I've been following the instructions on setting up react-native-orientation, along with the guidance in issues others have raised but I still cannot get this to work. Steps I've taken:

yarn add react-native-orientation react-native link react-native-orientation

I followed the steps to Config both IOS and Android. I'm currently testing in IOS so will show my config files:

AppDelegate.m

#import "AppDelegate.h"
#import "Orientation.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Firebase.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];
  NSURL *jsCodeLocation;
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"BabyTrackerPlus"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
  return [Orientation getOrientation];
}

@end

Don't think react-native link took. I opened my project in Xcode and had to manually add RCTOrientation.xcodeproj to the Libraries folder. Then I added libRCTOrientation.a to Build Phases > Link Binary With Libraries. Finally, I added $(SRCROOT)/node_modules/react-native-orientation/iOS/RCTOrientation to Build Settings > Header Search Paths.

After all this, I rebuilt my project in both Xcode and React-Native. When I build in XCODE, I get the following error:

Orientation.h file not found in my AppDelegate.m file. When I build with react-native, I get the following error: undefined is not an object (evaluating Orientation.lock`)

Thanks in advance for the help!

leadhkr commented 6 years ago

This error has been fixed for me by updated the header search path. See Issue #305

toastysamwich commented 6 years ago

After quite a lot of playing around, got this working on iOS (with Swift) by:

  1. Install with NPM
  2. Add pod 'react-native-orientation', :path => '../node_modules/react-native-orientation' to PodFile (Do not perform react-native link)
  3. Add import react_native_orientation to top of AppDelegate
  4. Add func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask { return react_native_orientation.Orientation.getOrientation() } under main AppDelegate method
  5. Add import Orientation from 'react-native-orientation' to wherever needed in RN
  6. Build to device
martinappberg commented 6 years ago

For me it didn't do it just updating header search paths. I had to manually add the library and .xcodeproj as well. At least now it works perfectly 👍

retyui commented 6 years ago

This repo dead , use the fork https://github.com/wonday/react-native-orientation-locker