Nativebase: Style property 'top' is not supported by native animated module

[tosbaha]

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [x] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

I upgraded module to 2.12.2 but now my Form crashes all the time with Style property 'top' is not supported by native animated module error. If Item has floatingLabel property it crashes.

node, npm, react-native, react and native-base version, expo version if used, xcode version

• Node v10.16.0
• npm 6.9.0
• native base 2.12.2
• react v16.8.3
• react-native v0.59.9

Expected behaviour

Item floatingLabel shouldn't crash

Actual behaviour

Item floatingLabel crashes

Steps to reproduce

Here is the snippet directly from documentation that crashes with Style property 'top' is not supported by native animated module

 <Form>
    <Item floatingLabel>
      <Label>Username</Label>
      <Input />
    </Item>
    <Item floatingLabel last>
      <Label>Password</Label>
      <Input />
    </Item>
</Form>

Is the bug present in both iOS and Android or in any one of them?

I only tested Android

Any other additional info which would help us debug the issue quicker.

None.

[josecarlosns]

OMG I was JUST coming here to report this EXACT same bug! Everything for me is the same except I'm using [email protected] and [email protected].

Also just to add insult to injury: the inlineLabel property does not work and behaves like fixedLabel

[harryfinn]

Am also getting this, Android and iOS impacted, RN v0.60.4

Update:
Downgrading to v2.12.1 resolved the issue for me on RN v0.60.4

[ericanthonywu]

should we downgrading RN version to use this floating label? any other alternatives??

[Srishti-Sharma]

This PR fixes the issue #2794

[mayupat13]

same issue for me same as @JoseCarlosNS

[LordHydra1]

Hi @Srishti-Sharma I applied your changes in my Item.js file...but I still have the same problem...there are something else to do in addition to edit and save the Item.js? How I can integrate the changes in my project without waiting your PR? There is some sort of command or script to use for build the new edited node-modules file?

[johnny32]

Same here as @LordHydra1

[harryfinn]

@LordHydra1 & @johnny32 - if you want to use the changes in the above PR, you should be able to install the package directly from GH using the following command:

yarn add GeekyAnts/NativeBase#srishti/Item_floatingLabel_fix

or the following if using NPM

npm install GeekyAnts/NativeBase#srishti/Item_floatingLabel_fix

To confirm the package is using the correct commit, you can just compare the commit hash in your yarn/package lock file once installed and ensure it matches the commit has on Srishti-Sharma's PR

[josecarlosns]

Is the inlineLabel problem addressed too on that PR? I know this should probably be on an issue on its own, but since we're here...

[johnny32]

What I meant is that, even with the PR changes, the error still happens to me.

[uday5162]

getting this error after commenting as suggested in PR for floatingLabel. I think there is some problem with top prop in Animated.View compoent

[LordHydra1]

same as @uday5162...i tryed updating my native-base package but still have the same problem....

[mubashiralisiddiqui]

same issue on IOS and android

[chillytaka]

seems like reverting to [email protected] remove the warning and make the floating labels working again.
only tested on android.

[josecarlosns]

@blankonn Are you sure? Because I'm using [email protected] with [email protected] and floatingLabel and inlineLabel are both not working.

[mubashiralisiddiqui]

I am using native [email protected] with [email protected] I am working on a
project more than a month with same version but it suddenly
give this error while
I have found that the prop floating label causing this issue

On Mon, Jul 22, 2019 at 9:44 PM José Silva [e-mail] wrote:

@blankonn https://github.com/blankonn Are you sure? Because I'm using
[email protected] with [email protected] and floatingLabel and
inlineLabel are both not working.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/GeekyAnts/NativeBase/issues/2786?email_source=notifications&email_token=AD7KQPRZ5WLPUEQGUBOK37LQAXPX3A5CNFSM4IFAGAHKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2QOS5Q#issuecomment-513862006,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AD7KQPSNZYRK3R45JOSQO6LQAXPX3ANCNFSM4IFAGAHA
.

[johnny32]

I'm also using [email protected] and [email protected], and it works for me.

[chillytaka]

@JoseCarlosNS that's weird, I am using the very same react-native version as you and it is running without the error, here's my package.json https://pastebin.com/T5JMPh34

[mubashiralisiddiqui]

https://pastebin.com/T5JMPh34

you are using it on "react-native": "0.60.4", I am using 0.59

[AsthaAmeta]

I am also facing the same issue. I am on RN version 0.59. I didn't get any such error earlier, being on the same version. It happened today all of a sudden.

[tosbaha]

Crash is still happening with 2.13.0 This time it doesn't show any error but instead it waits and waits and finally crashes. Can someone please get the bottom of this?

Here is minimum code for a crash. Just add Icon and it crashes with 'Maximum number of ...'

      <Content padder>
        <Form>
    <Item floatingLabel>
          <Icon name='mail' style={{ color: 'gray' }} />
      <Label>Email</Label>
      <Input />
    </Item>
    <Item floatingLabel last>
         <Icon name='mail' style={{ color: 'gray' }} />
      <Label>Password</Label>
      <Input />
    </Item>
</Form>
      </Content>

[PlabanJr]

Please check out our latest release v2.12.5.

Thank you!

[tokict]

This repo turned to a heap of bugs lately. I will be dropping it as it requires more maintenance time than it saves