search

halilb / react-native-textinput-effects

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.
MIT License
2.99k stars 293 forks source link

Invariant Violation React Native 0.58.4 Sae and Hoshi #93

Closed koo27 closed 5 years ago

koo27 commented 5 years ago

I just upgraded to react-native 0.58.4 and I get the following error for Sae text input

screenshot_1550054039

The problem is related to this code

focusedAnim.interpolate({
                inputRange: [0, 1],
                outputRange: [0, width + PADDING],
              })

for the right value of Animated Icon and for this code:

focusedAnim.interpolate({
              inputRange: [0, 1],
              outputRange: [0, width],
            })

for the width value of Animated.View.

Basically I noticed that with the new version of react native, we can't calculate width, heigth or set right, left, etc. directly into the style. I also tried your new commit of few days ago to fix the Hoshi, but it doesn't work either (analogous issue).

halilb commented 5 years ago

Thanks for reporting @koo27.

I just tried this on my android phone and it worked after applying e75aa9b. I realized that I didn't publish that commit on the npm though. So I created version 0.5.1 including that commit.

I see that you already tried that commit. So if 0.5.1 still doesn't work for you, could you try changing width: null with width: 0 in this line? https://github.com/halilb/react-native-textinput-effects/blob/master/lib/BaseInput.js#L43

Please let me know if that fixes the problem so I can patch it.

koo27 commented 5 years ago

Thank you very much @halilb I just tested the new commit 784bde7bc6b0c9d027351a9c51fbb8e70491fbca and it works great!

Unfortunately I needed to clone the project in local in order to change the label fonts of Sae and Isao, but I'd open another issue for that.