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

Sae Label Font Size #127

Closed wjanczuk closed 3 years ago

wjanczuk commented 3 years ago

Hi there!

I've been having difficulty changing the font size of the label (prior to the animation) using the Sae model.

Here's what I've got: <Sae style={{marginLeft: 10, marginRight: 10}} labelStyle={{color: '#e95530', , fontSize: 16}} label={'Name'} iconClass={FontAwesomeIcon} iconName={'calendar-check-o'} iconColor={'#e6a80c'} inputPadding={16} labelHeight={20} // active border height borderHeight={2} // TextInput props autoCapitalize={'none'} autoCorrect={false} />

The fontSize property on the label style doesn't change the size of the label text (again, pre-animation), and I'm guessing it's because there are two text sizes related. I looked @ the node module for this, but couldn't decipher the structure of the props.

Would be super grateful for any help or direction here.

wjanczuk commented 3 years ago

I deciphered the modules & figured this out:

fontSize: focusedAnim.interpolate({
                    inputRange: [0, 1],
                    outputRange: [16, 12],
                  })