React-native-ui-kitten: rkCalendar cause application to crash at start

Created on 16 Apr 2019  Â·  17Comments  Â·  Source: akveo/react-native-ui-kitten

Issue type

I'm submitting a ... (check one with "x")

  • [X ] bug report
  • [ ] feature request

Issue description

Current behavior:

Some components in node_modules, like RkCalendarDay, cause application to crash at start. Even if the components aren't used in the application.

Dependency:
react-native-ui-kitten": "github:akveo/react-native-ui-kitten

Expected behavior:

Application will be launched after expo start.

Steps to reproduce:

Delete node_modules, run npm install, start application with `expo start´ and try to run the application on your device.

Related code:

 base: View.propTypes.style,
 today: View.propTypes.style,
 selected: View.propTypes.style,

Bildschirmfoto 2019-04-16 um 18 14 47

Other information:

OS, device, package version

iOS, Simulator and physical device
Bug

Most helpful comment

Hi @artyorsh
Thanks @dhwanilvyas, in my case, there are more components affected.
I changed the proptypes in the following components and my application works as expected again:

rkCalendarDay.component.js line 52-56
rkCalendarWeek.component.js line 35
rkCalendarMonth.component.js line 40
rkCalendarDaysNames.component.js line 18
rkCalendarMonthHeader.component.js line 19
rkCalendarView.component.js line 71
rkTab.components.js line 37-38
rkTabBar.component.js line 33-34
rkTabBarIndicator.component.js line 25-26
rkTabPager.component.js line 30

All 17 comments

+1

+1

Hi @JaWoGit, thanks for report
Could you please provide related code which causes crash?

Hello!

This line here seems to be causing the issue I guess. Changing View.propTypes.style to PropTypes.style fixes the issue for me.

This issue is in tabset component as well.

I'm can send in a PR if this fixes the issue :smile:

It seems that you already have the root of the issue but I was also wondering if you could provide some insight into this stack trace:

undefined is not an object (evaluating '_reactNative.View.propTypes.style')

<unknown>
    rkCalendarDay.component.js:52:29
loadModuleImplementation
    require.js:331:6
<unknown>
    rkCalendarWeek.component.js:4
loadModuleImplementation
    require.js:331:6
<unknown>
    rkCalendarMonth.component.js:5
loadModuleImplementation
    require.js:331:6
<unknown>
    rkCalendarView.component.js:7
loadModuleImplementation
    require.js:331:6
<unknown>
    rkCalendar.component.js:4
loadModuleImplementation
    require.js:331:6
<unknown>
    index.js:10
loadModuleImplementation
    require.js:331:6
<unknown>
    App.js:10
loadModuleImplementation
    require.js:331:6
<unknown>
    index.js:6
loadModuleImplementation
    require.js:331:6
guardedLoadModule
    require.js:197:45
global code
    <unknown file>:0

Standard right? But what is on App.js:10?

import { RkButton } from 'react-native-ui-kitten';

Why would importing RkButton trigger an undefined props error in RkCalendar? Am I reading the stack trace wrong?

This line here seems to be causing the issue I guess. Changing View.propTypes.style to PropTypes.style fixes the issue for me.
This issue is in tabset component as well.

I'm can send in a PR if this fixes the issue 😄

Thanks for details @dhwanilvyas! Yes, PR's are welcome

Hi @artyorsh
Thanks @dhwanilvyas, in my case, there are more components affected.
I changed the proptypes in the following components and my application works as expected again:

rkCalendarDay.component.js line 52-56
rkCalendarWeek.component.js line 35
rkCalendarMonth.component.js line 40
rkCalendarDaysNames.component.js line 18
rkCalendarMonthHeader.component.js line 19
rkCalendarView.component.js line 71
rkTab.components.js line 37-38
rkTabBar.component.js line 33-34
rkTabBarIndicator.component.js line 25-26
rkTabPager.component.js line 30

im now getting this error http://prntscr.com/nd2y1v after fixing view.proptypes.style i changed it to ViewPropTypes.style (importing from RN)

and i've already solved the babel issue yesterday @artyorsh

@YazeedAsaad for quick fix you can see @dhwanilvyas's answer

The issue is also present in:

  • rkCalendarWeek.component.js:35
  • rkCalendarMonth.component.js:40
  • rkCalendarDayNames.component.js:18
  • rkCalendarMonthHeader.component.js:19
  • rkCalendarView.component.js:71
  • rkTab.component.js:37+38
  • rkTabBar.component.js:33+34
  • rkTabBarIndicator.component.js:25+26
  • rkTabPager.component.js:30

Here's my package.json. It's basically just a newly created project with react-native init

{
  "name": "TestProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "react": "16.8.3",
    "react-native": "0.59.3",
    "react-native-ui-kitten": "^3.1.3"
  },
  "devDependencies": {
    "@babel/core": "7.4.3",
    "@babel/runtime": "7.4.3",
    "babel-jest": "24.7.1",
    "flow-bin": "^0.97.0",
    "jest": "24.7.1",
    "metro-react-native-babel-preset": "0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Once I edited all these files then it started working for me.

Why has nobody submitted a PR for this yet? Or even updated their fork of this repo on their GitHub? The easiest thing to get this library working as it did earlier is to simply use version 3.1.2 for the time being.

In your project's package.json:

"react-native-ui-kitten": "3.1.2",

I would like to but according to the contributing guide on the master branch, I must test! However, unless I'm being dumb, the current master does not have tests, only next.

I'm guessing the test stipulation is for the next branch and not the current?

Here's my branch if you're interested, it's very simple really. Not even sure how you would test it beyond "do the existing components fail to run?".

Someone, please let me know if/how I should proceed. I don't want to waste my time.

https://github.com/richardvanbergen/react-native-ui-kitten/tree/proptype-undefined-fix

Can we downgrade to a stable version? which version does not have this problem?

For all faced this issue, you can use v3.1.2 if you're not going to use RkCalendar and RkTabView:

npm i [email protected]

We're sorry for such type of trouble

+1

Any News on this Bug ?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sobiso picture sobiso  Â·  3Comments

shiqian123 picture shiqian123  Â·  3Comments

domsterthebot picture domsterthebot  Â·  3Comments

RWOverdijk picture RWOverdijk  Â·  3Comments

simonsankar picture simonsankar  Â·  3Comments