Can we run this after expo eject? #206

joshbedo · 2019-07-14T19:09:33Z

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!

The text was updated successfully, but these errors were encountered:

32penkin · 2019-07-18T06:30:42Z

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

Expo Kit. This requires much more effort than just doing expo eject.
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:
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 · 2019-07-27T08:24:35Z

@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 · 2019-07-29T17:19:09Z

@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 · 2019-07-30T08:39:26Z

@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 · 2019-07-30T08:52:51Z

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 · 2019-07-30T09:36:30Z

@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 · 2019-07-30T09:47:50Z

@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 · 2019-07-30T10:43:30Z

@sudomann sure, I'll appreciate any help

0mars · 2019-10-29T13:43:05Z

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

artyorsh · 2019-10-29T14:12:35Z

@0mars just follow @32penkin comment

0mars · 2019-10-29T14:26:26Z

@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 · 2019-10-29T14:32:42Z

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 · 2019-10-29T15:33:48Z

@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 · 2019-10-29T15:38:07Z

@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 · 2019-10-29T17:24:49Z

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 · 2019-10-30T06:15:55Z

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

0mars · 2019-10-30T09:35:59Z

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 · 2019-10-30T10:17:16Z

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

0mars · 2019-10-30T10:27:18Z

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

0mars · 2019-10-31T15:07:48Z

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 · 2019-10-31T15:21:11Z

@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 · 2019-10-31T15:24:10Z

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

0mars · 2019-10-31T15:29:00Z

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

0mars · 2019-11-01T15:30:30Z

@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 · 2019-11-01T19:28:42Z

@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

artyorsh assigned 32penkin Jul 17, 2019

artyorsh added the help wanted label Jul 17, 2019

artyorsh pinned this issue Jul 26, 2019

artyorsh closed this as completed Nov 1, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can we run this after expo eject? #206

Can we run this after expo eject? #206

joshbedo commented Jul 14, 2019

32penkin commented Jul 18, 2019

sudomann commented Jul 27, 2019

artyorsh commented Jul 29, 2019

sudomann commented Jul 30, 2019

sudomann commented Jul 30, 2019 •

edited

Loading

greenfrvr commented Jul 30, 2019

sudomann commented Jul 30, 2019

greenfrvr commented Jul 30, 2019

0mars commented Oct 29, 2019

artyorsh commented Oct 29, 2019

0mars commented Oct 29, 2019

artyorsh commented Oct 29, 2019 •

edited

Loading

0mars commented Oct 29, 2019

artyorsh commented Oct 29, 2019

0mars commented Oct 29, 2019 •

edited

Loading

32penkin commented Oct 30, 2019

0mars commented Oct 30, 2019 •

edited

Loading

artyorsh commented Oct 30, 2019

0mars commented Oct 30, 2019

0mars commented Oct 31, 2019

artyorsh commented Oct 31, 2019

0mars commented Oct 31, 2019

0mars commented Oct 31, 2019

0mars commented Nov 1, 2019

artyorsh commented Nov 1, 2019 •

edited

Loading

Can we run this after expo eject? #206

Can we run this after expo eject? #206

Comments

joshbedo commented Jul 14, 2019

32penkin commented Jul 18, 2019

sudomann commented Jul 27, 2019

artyorsh commented Jul 29, 2019

sudomann commented Jul 30, 2019

sudomann commented Jul 30, 2019 • edited Loading

greenfrvr commented Jul 30, 2019

sudomann commented Jul 30, 2019

greenfrvr commented Jul 30, 2019

0mars commented Oct 29, 2019

artyorsh commented Oct 29, 2019

0mars commented Oct 29, 2019

artyorsh commented Oct 29, 2019 • edited Loading

0mars commented Oct 29, 2019

artyorsh commented Oct 29, 2019

0mars commented Oct 29, 2019 • edited Loading

32penkin commented Oct 30, 2019

0mars commented Oct 30, 2019 • edited Loading

artyorsh commented Oct 30, 2019

0mars commented Oct 30, 2019

0mars commented Oct 31, 2019

artyorsh commented Oct 31, 2019

0mars commented Oct 31, 2019

0mars commented Oct 31, 2019

0mars commented Nov 1, 2019

artyorsh commented Nov 1, 2019 • edited Loading

sudomann commented Jul 30, 2019 •

edited

Loading

artyorsh commented Oct 29, 2019 •

edited

Loading

0mars commented Oct 29, 2019 •

edited

Loading

0mars commented Oct 30, 2019 •

edited

Loading

artyorsh commented Nov 1, 2019 •

edited

Loading