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

[0mars]

@artyorsh something is wrong with it, as it has App.js, package.json don't have types packages, also no .tsconfig

Am I missing something, copied and pasted the command you've given

[artyorsh]

@0mars It may be initialized with the standard react-native template if you're using legacy CLI
Make sure to follow this guide and re-initialize the project

[0mars]

one undocumented bit, stacknavigation

in core/navigation/routes:
import {createStackNavigator} from 'react-navigation-stack';

and yarn add react-navigation-stack,

also missing dependencies:
yarn add babel-plugin-module-resolver
yarn add react-transform-hmr
yarn add react-native-screens
yarn add react-navigation
yarn add react-native-keyboard-aware-scroll-view
yarn add react-native-gesture-handler

[32penkin]

Hi @0mars! Thank you for helping the community do this. Really appreciate this!

[0mars]

now I randomly got this error, and it does not go away, tried clearing cache and everything, seems to stem from router or theme provider, not sure. it shows up on the startup of the app, so the app now never starts

public render(): React.ReactNode {
        const contextValue: ThemeContextType = {
            currentTheme: this.state.theme,
            toggleTheme: this.onSwitchTheme,
        };

        return (

                <ThemeContext.Provider value={contextValue}>
                    <ApplicationProvider
                        mapping={mapping}
                        theme={themes[this.state.theme]}>
                        <DynamicStatusBar currentTheme={this.state.theme}/>
                        <Router onNavigationStateChange={this.onNavigationStateChange}/>
                    </ApplicationProvider>
                </ThemeContext.Provider>

        );
    }

[artyorsh]

@0mars try not handling onNavigationStateShange in your router, as this app uses some analytics from react-native-firebase

[0mars]

@artyorsh yes I realized that there is some unused imported code from ./util/analytics that was causing the error

[0mars]

It finally worked, but not perfectly :D, the assets and icons I have no clue how to load them, any pointers how to do that ? I have Xs all over now, @artyorsh

[artyorsh]

@0mars Can you please share your project if it is open sourced? Will take a look and collaborate, so we can finally refer it as a base non-expo solution

[0mars]

it has some private/removed components but will work on removing/restoring some of the components

[0mars]

@artyorsh can you maybe create a repo and give me push access, as you can maintain it later thanks

[0mars]

@artyorsh I restored most of it, and pushed here: https://github.com/0mars/kitten-ui-native

The thing now problems are popping up when loading icons in so many views, I kept commenting them out from routes.ts, but I got tired, so please jump in when you have the time

Cheers!

[artyorsh]

@0mars Thanks for your work! 👍But it seems to be you started refactoring with using a version that may not contain the latest changes published to master

Well, I was able to re-create this app by with the following steps:

• expo eject
• Remove all expo-* dependencies
• Remove all environment files
• Replace expo-media-library and expo-camera with @react-native-community/* libs

For anyone still interested in:
👉 https://github.com/artyorsh/kittenTricks/tree/build/no-expo