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

Exception thrown on input focus animation #15

Closed rafaelvanderlei closed 7 years ago

rafaelvanderlei commented 7 years ago

Hi,

I tried to use Fumi component (putting exactly the same code as is in README). The component is displayed, but when I tap the input the animation doesn't work and I get the following excpetion:

'Icon "viewConfig" is not defined' (sorry I don't know to to copy and paste full react native stack trace.. I tried to upload a image, but to no avail)

What I did to workaround was: I subclassed FontAwesomeIcon (from 'react-native-vector-icons/FontAwesome') and added viewConfig={} property (valued with empty object); and then used this class in <Fumi ... iconClass={MyIcon} />

class MyIcon extends FontAwesomeIcon {
  viewConfig = {};
}

//...

<Fumi
              label={'Course Name'}
              iconClass={MyIcon}
              iconName={'university'}
              iconColor={'#f95a25'}
            />

I'm new to react-native, still experimenting, so I'm not sure what is the true cause of the issue (maybe this commit - notice the added lines that make viewConfig property required) or what would be the best way to fix it (a fix could be made in either react-native-textinput-effects, by adding viewConfig property somewhere around here, or in react-native-vector-icons, by adding viewConfig to the the root of their Icon classes).

If it helps, I'm using react-native 0.37.0.

halilb commented 7 years ago

Thanks for reporting @rafaelvs!

This bug is introduced in react-native 0.37.0. You can monitor the fix process in those issues: https://github.com/oblador/react-native-vector-icons/issues/337 and https://github.com/facebook/react-native/pull/10827 The PR that fixes the problem is merged into react-native but it might take a while before it lands in a new release.

You can keep using react-native 0.36 until the fix lands or manually patch your react-native code with this commit: https://github.com/facebook/react-native/commit/31b7819b028f7fa2a878f2df94b4506a5468c221

halilb commented 7 years ago

This issue should be fixed after react-native version 0.38.0. Please feel free to reopen the issue if it persists.