Ui: undefined is not an object (evaluating '_reactNative.NavigationExperimental.Header')

[aswinmohanme]

Error:
undefined is not an object (evaluating '_reactNative.NavigationExperimental.Header') gets thrown when the app is built and run.

Steps I Took:
Initialize an empty react native project
Add yarn add @shoutem/ui' react-native link Use the '<Examples /> Component
react-native run-android

My System Configuration

react-native --version                                                                                                                      22:10:05
    react-native-cli: 2.0.1
    react-native: 0.44.0

Package.json

{
    "name": "testShoutem",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "@shoutem/ui": "^0.13.0",
        "react": "16.0.0-alpha.6",
        "react-native": "0.44.0"
    },
    "devDependencies": {
        "babel-jest": "19.0.0",
        "babel-preset-react-native": "1.9.1",
        "jest": "19.0.2",
        "react-test-renderer": "16.0.0-alpha.6"
    },
    "jest": {
        "preset": "react-native"
    }
}

[michaelspeed]

I am still getting this error! any fix?

[michaelspeed]

I saw ur commit now there is a new error!!! can't find variables!! theme.js:621:34

[dobrienlzd]

Try this for now:

edit package.json -> Replace 0.44.0 with 0.43.4 for react-native

'rm -rf node_modules' //get rid of previous module installations based on 0.44.0
npm install
react-native link
react-native run-android // but in separate window be running 'npm start' first.

[JulianKingman]

Oops, sorry for the typo, I fixed it.

[nori3tsu]

NavigationExperimental has been removed from React Native 0.44.0, so I think Shoutem UI should remove and replace it.

https://github.com/facebook/react-native/pull/13066

[aswinmohanme]

For the time being run yarn add shoutem/ui#242/head if you want to use the pull request right away with RN 44

[JulianKingman]

Fair warning, don't use if you have a Cardstack or Header component from @shoutem/ui

[eddiewang]

@JulianKingman what happens if you use the latest pull request from @aswinmohanme but want to use the Cardstack or Header component?

[mstearne]

How I got the Examples demo running with the patch mentioned by @aswinmohanme

react-native init HelloWorld && cd HelloWorld
yarn add shoutem/ui#242/head
nano index.ios.js

Remove contents of index.ios.js and insert the Examples code

```import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Examples } from '@shoutem/ui';

class HelloWorld extends Component {
render() {
return (

);
}
}

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
```

react-native link
react-native run-ios

[mnlbox]

@Vladimir-Vdovic I saw this issue later but unfortunately @dobrienlzd solution not working for me. I still has that error.

[kiidbrian]

I'm currently facing this same issue. I deleted my node_modules, modified the package.json with react-native: "0.43.4" and now the app is not even building. I using react: "16.0.0-alpha.12"

[Definitely-Not-Vlad]

@kiidbrian Did you re-install the node modules using npm install and then link them to the local environment using react-native link?

[kiidbrian]

@Vladimir-Vdovic yes exactly what i did. It throws up two errors "implicit declaration of function 'RCTSharedApplication' is invalid in C99 [-Werror, -Wimplicit-function-declaration]"

[abhayaapp]

{
"name": "TestApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"@shoutem/ui": "^0.19.2",
"react": "16.0.0-alpha.12",
"react-native": "0.45.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.0.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}

I am getting an error: undefined is not an object (evaluating '_reactNative.NavigationExperimental.Header'

Please help me to resolve this issue.

[Definitely-Not-Vlad]

@abhayaapp
Have you tried any of the workarounds in this thread?

[imWildCat]

@Vladimir-Vdovic Hello, I am supposed to use react-native@45, any solutions for this issue?

It seems that NavigationExperimental has been removed: https://github.com/facebook/react-native/commit/08dbc43fa64ff1dfc0d364b6cef6262426f76b64

Thanks.

[AkdM]

+1, I'm using [email protected] and I am getting this error too.

[firefountain]

+1

react-native-cli: 2.0.1
react-native: 0.46.1

[jguipi]

+1

react-native: 0.46.0

[tourze]

+1, still error.
react-native: 0.44.0
"@shoutem/ui": "^0.19.2"

[imWildCat]

Is this project dead?
There could be one solution (by using https://github.com/GingerBear/NavigationExperimental):

// change
import { NavigationExperimental } from 'react-native';
// to
import * as NavigationExperimental from 'navigation-experimental';

in the following files:
https://github.com/shoutem/ui/search?utf8=✓&q=NavigationExperimental&type=

It is a pity to see that Shoutem is too busy making money to maintain this open-source project.
I think it is time to consider to use NativeBase.

[imWildCat]

My personal solution:

npm i --save imWildCat/shoutem-react-native-ui#develop

or by yarn

yarn add  imWildCat/shoutem-react-native-ui#develop

Detail: https://github.com/imWildCat/shoutem-react-native-ui/commit/403e2bad2a26734c31638af9ecb712c64e352cf8

However, I found that a lot of Animation APIs called by shoutem ui were deprecated. I am so worried to use this library in my own project.

[AkdM]

That’s right, because of the changes made on RN, ShoutemUI cannot be considered in a production project at the time.
Unfortunately NativeBase is not that beautiful compared to Shoutem.

[eightyfive]

Guys, that's a bit pointless to complain about a company that is trying to make a living like any of us. What's wrong with "making money"?

I think they've already been nice enough to open-source their hours of work + documentation + community + marketing + ... Ok, I know, it benefits them as well, and so what? Of course it does.

As of now here are your options:

• Downgrade to RN 0.43.4 and React 16.0.0-alpha.6
• @imWildCat temporary solution (you can also fork yourself and fiddle around)
• Follow/help on-going Pull Request https://github.com/shoutem/ui/pull/242 (being discussed) and wait 😊

[jcguarinpenaranda]

+1, Please remove Navigation Experimental Dependency

[snibug]

+1

react-native: 0.46.x

[sladebot]

+1

react-native: 0.46.x

[rustykey]

+1

react-native: 0.46.x

[hyamamoto]

Aggah.

Having been monkey-patching this bug for 2 months now, heh. It's THIS problem that prevented so many new users from using this awesome UI library. RN is a fast-changing framework. Once you stop following it, you are considered as a dinosaur. shoutem/ui's userbase is dying for sure.

@eightyfive

• Downgrade to RN 0.43.4 and React 16.0.0-alpha.6
• Follow/help on-going Pull Request #242 (being discussed) and wait 😊

PR #242 has also been a broken state since like more than a month ago.
After yarn add shoutem/ui#242/head, you have to update theme.js to make it work.

+++ node_modules/@shoutem/ui/theme.js   2017-07-26 14:40:13.000000000 +0900
@@ -2151,7 +2151,7 @@
           // visible underneath the navigation bar, but the
           // title text should be rendered below the
           // navigation bar.
-          paddingTop: NAVIGATION_BAR_HEIGHT + variables.mediumGutter,
+          paddingTop: variables.navBarHeight + variables.mediumGutter,
         },
       },
     },

For me, it's still working on RN 0.44 and React 16.0.0-alpha.6 other than annoying #266 .

cheers.

[JulianKingman]

@hyamamoto I fixed that a while ago already. In any case, 2 weeks ago they announced they'd do away with Navigation Experimental.

[vitorebatista]

Please remove Navigation Experimental Dependency

[altheaDev]

Please remove Navigation Experimental Dependency

[ahmadao2214]

Please remove Navigation Experimental Dependency

[eightyfive]

Please remove Navigation Experimental Dependency

They've already confirmed they are removing it https://github.com/shoutem/ui/pull/242#issuecomment-314755267

[Definitely-Not-Vlad]

This is now resolved and the newest UI toolkit can be used with the latest versions of React Native. We still use NavigationExperimental, however, we import it separately, not as part of react-native and therefore no longer have a missing dependency due to deprecation.

Closing this thread as the main issue is resolved.

[sanjibnarzary]

Using react native 0.49.2 same issues.

[mk0y]

I just installed everything by following here but also having this issue.

[kou5oku]

Same thing is Happening for me too!!

It seems that throughout there is reference to React.PropTypes.... but looks like PropTypes is now removed from RN. I tried to follow it down by fixing each error as they went down but the hole is deep!

https://reactjs.org/warnings/dont-call-proptypes.html

Any idea how to fix?

[mach-kernel]

I can reproduce this issue on a boilerplate app created via create-react-native-app. I have tried fiddling with aforementioned working version constraints for the past hour and decided to give up.

I echo the irritation voiced by others here but stop short of making the "money argument" (because frankly this isn't anyone's business). An expectation is being set in your documentation that someone can take this out of the box and use it. Lots of people are following the getting started tutorial and wasting their time. At least add a link to this thread in the guide (preferably with a highlighted solution. There are people like me out there evaluating whether or not to purchase your actual product (since, to be fair, it is nifty!) -- but things like this are a detractor because it seems that there is little dogfooding of resources built for your own consumption which doesn't make me very confident in the solution. I am sure I am not the first, either. I realize that this ecosystem changes very rapidly, but a lack of transparency will indubitably cause people to be upset.

[poudelprakash]

@mach-kernel Were you able to solve it?

[CrazyPython]

I'm experiencing this issue too. Exact same error as @markzero. The best solution is just npm uninstall --save @shoutem/ui.

[JulianKingman]

The prop-types issues are unrelated, remember to search the issues before posting unrelated problems (in a closed issue, nonetheless). It has to do with react putting PropTypes into it's own package (prop-types).
Open issue is here: https://github.com/shoutem/ui/issues/328
PR to fix is here: https://github.com/shoutem/ui/pull/314