Can we run this after expo eject?

[joshbedo]

I'm trying to get this project running after expo ejectand seeing some build errors on the pod files. Does anybody know how I can get this running after doing expo eject? Thanks!

[32penkin]

Hi @joshbedo! I'd like to share a few points that I found during the investigation of running the application without expo.

1. Expo Kit. This requires much more effort than just doing expo eject.
2. The application was able to start and build for android, but I didn't notice any improvements in performance (that was the main goal), so we think that it doesn't make sense to do this in this case. Instead, you can try:
3. Just set up the application without the expo and carefully transfer the source code to it. You will need to install 2-3 libraries that require linking with native applications, as well as assets, but this does not take much time.

Also, we will be happy if you share your walkarounds on this issue. We have an idea to have a separate branch in which the application will be without expo.

[sudomann]

@32penkin I started doing something like you've described, partly because I couldn't deal with TS and required my code in JS. I had to leave out things like the appLoading wrapper that required expo, had to manually add my custom fonts for both platforms. Currently I am facing a weird spacing issue for notched iphones. I suppose it stems from the use of code like:

import Constants from 'expo-constants';

Platform.select({
    ios: Constants.statusBarHeight,
    android: 0,
  });

Ideally I would have created a new project for this using expo-cli (bare template), and imported the Constants package from expo, but I am on RN 0.60.3 and expo's current sdk 33 supports RN 0.59. RN now does away with manual linking of packages, so one must wait for expo to release a new sdk which is compatible with RN 0.60.

[artyorsh]

@sudomann For non-expo projects, you can replace it with this

import { StatusBar } from 'react-native';
const statusBarHeight = StatusBar.currentHeight;

Please give us a feedback if this solves your problem. Thanks

[sudomann]

@artyorsh

My equivalent of kittenTricks/src/core/navigation/components/safeAreaView.component.tsx

# safeAreaView.component.js
import React from 'react';
import { StatusBar, Platform } from 'react-native';
import {
  SafeAreaView as SafeAreaViewReactNavigation,
} from 'react-navigation';

export class SafeAreaView extends React.Component {

  statusBarHeight = Platform.select({
    ios: StatusBar.currentHeight,
    android: 0,
  });

  
  componentDidMount() {
    SafeAreaViewReactNavigation.setStatusBarHeight(this.statusBarHeight);
  }
  

  render() {
    return (
      <SafeAreaViewReactNavigation {...this.props}/>
    );
  }
}

causes:

Invariant Violation: [293,"RCTView",{"paddingTop":"<<NaN>>"}] is not usable as a native method argument

This error is located at:
    in RCTView (at View.js:35)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at react-native-safe-area-view/index.js:164)
    in SafeView (at withOrientation.js:54)
    in withOrientation (at safeAreaView.component.js:22)
    in SafeAreaView (at topNavigationBar.component.js:33)
    in TopNavigationBarComponent (at themeConsumer.component.js:97)
    in Unknown (at themeConsumer.component.js:102)
    in Wrapper (at themeConsumer.component.js:106)
    in TopNavigationBarComponent (at options.js:20)
    in RCTView (at View.js:35)
    in View (at StackViewLayout.tsx:361)
    in RCTView (at View.js:35)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:379)
    in PanGestureHandler (at StackViewLayout.tsx:372)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:103)
    in RCTView (at View.js:35)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:40)
    in StackView (at createNavigator.js:61)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at createTabNavigator.js:39)
    in RNSScreen (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:78)
    in Screen (at ResourceSavingScene.js:21)
    in ResourceSavingScene (at createBottomTabNavigator.js:121)
    in RNSScreenContainer (at screens.native.js:103)
    in ScreenContainer (at createBottomTabNavigator.js:111)
    in RCTView (at View.js:35)
    in View (at createBottomTabNavigator.js:110)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (at createNavigator.js:61)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:888)
    in RCTView (at View.js:35)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:35)
    in View (at StackViewLayout.tsx:886)
    in RCTView (at View.js:35)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:93)
    in RNSScreen (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:78)
    in Screen (at StackViewCard.tsx:80)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:971)
    in RNSScreenContainer (at screens.native.js:103)
    in ScreenContainer (at StackViewLayout.tsx:383)
    in RCTView (at View.js:35)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:379)
    in PanGestureHandler (at StackViewLayout.tsx:372)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:103)
    in RCTView (at View.js:35)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:40)
    in StackView (at createNavigator.js:61)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:429)
    in NavigationContainer (at app.component.js:37)
    in RCTView (at View.js:35)
    in View (at modalPanel.component.js:51)
    in ModalPanel (at applicationProvider.component.js:69)
    in ThemeProvider (at styleProvider.component.js:13)
    in MappingProvider (at styleProvider.component.js:12)
    in StyleProvider (at applicationProvider.component.js:68)
    in ApplicationProvider (at app.component.js:33)
    in App (at renderApplication.js:40)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:39)

fn
    NativeModules.js:133:10
commitRootImpl
    [native code]:0
unstable_runWithPriority
    scheduler.development.js:471:23
commitRoot
    [native code]:0
runRootCallback
    [native code]:0
callFunctionReturnFlushedQueue
    [native code]:0

unless I use a hardcoded value like:

  statusBarHeight = Platform.select({
    ios: 22,
    android: 0,
  });

instead of

  statusBarHeight = Platform.select({
    ios: StatusBar.currentHeight,
    android: 0,
  });

I
does not cause that error.

I tried using StatusBar.currentHeight with original TSX code for kittenTricks, and got the same error in the Expo app.

[sudomann]

I apologize for hijacking this issue, I'm investigating this myself and just curious if anyone has seen this before:

The weird spacing issue (for notched iphones) I previously mentioned about was the menu bar as seen here:

It's a very strange issue which I suspect is somehow linked to time; a delayed render or something. Every time I build the app (with from react-native or XCode), it might render wrong. It positions itself correctly as soon the device is rotated though. It appears a rerender corrects the spacing/positioning value. 🤔

[greenfrvr]

@sudomann I ran into this issue while age, but it was related to Android devices with notches. There is small util component to handle notches correctly on both platforms. Check it out window-guard.

[sudomann]

@greenfrvr Very nice, I see the setup instructions require use of the react-native link command. I am on RN 0.60.3 which has done away with linking. I lack the knowledge to sort that out, but if you'll deal with it, can I open an issue on your repo for this and continue there?

[greenfrvr]

@sudomann sure, I'll appreciate any help

[0mars]

anyone can share a non-expo version please ?? really need it

[artyorsh]

@0mars just follow @32penkin comment

[0mars]

@artyorsh would you recommend this approach

"Just set up the application without the expo and carefully transfer the source code to it. You will need to install 2-3 libraries that require linking with native applications, as well as assets, but this does not take much time."

[artyorsh]

Yes. For the quicker approach to build application with UI Kitten, you can use our template projects to have all in place.

npx react-native init MyApp --template react-native-template-ui-kitten-typescript