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.98k stars 291 forks source link

Hoshi label to shrink when moving up #55

Closed MeganGilligan1 closed 7 years ago

MeganGilligan1 commented 7 years ago

Hi, Just wondering if there is a way to get the label to shrink/change colour when it moves up to the top?

halilb commented 7 years ago

Hi @MeganGilligan1,

There is only position animation over the label in Hoshi. You can try forking and customising the label simply by adding fontSize and color animations.

Here is an example for fontSize. You can make it better by tinkering the numbers.

<Animated.Text style={[styles.label, labelStyle, {
  fontSize: focusedAnim.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [16, 18, 20],
   }),
}]}>
  {label}
</Animated.Text>

Let me know if you have any questions.