0

I have 2 Text Inputs each with flex: 1. When I focus one of them, I am making it bigger-> flex: 1 -> flex: 2.

Can anyone give me an example of how to add an animation to this width change?

<TextInput style={{flex: 1'}} onFocus={() => this.makeBigger()}/>
<TextInput style={{flex: 1'}}/>

// the makeBigger will make the style look like this:
<TextInput style={{flex: 2'}} onFocus={() => this.makeBigger()}/>
<TextInput style={{flex: 1'}}/>
johnnyshrewd
  • 1,038
  • 2
  • 12
  • 29
  • 1
    I don't believe it is possible to apply an animation or transition using the `flex` property. Instead try to use the `width` property. eg. It's default state could be `width: 50%` and the focused state could be `width: 100%` – Jackson Aug 22 '18 at 10:49
  • but still, if I use width instead of flex, how can I animate? – johnnyshrewd Aug 22 '18 at 10:56

1 Answers1

1

This might be redundant, but instead of setting flex which is a collection of the flex properties flex-grow, flex-shrink and flex-basis. I would suggest you explicitly set flex-grow instead.

What I would do is to give them a className and let the onFocus-event change the className. Then you can add this to your CSS:

.baseClass {
  transition: 0.2s all ease-in-out;
}
.shrinkClass {
  flex-grow: 1;
}
.growClass {
  flex-grow: 2;
}
MstrQKN
  • 836
  • 10
  • 28
  • 1
    transition property in React Native? – johnnyshrewd Aug 22 '18 at 11:02
  • Hehe good call. I didn't see the react-native tag because I subscribe to reactjs tags :) We'll see what he says, if it doesn't help I'm gonna have to edit my answer and throw in either react-native-animatable or react-native-css-transition – MstrQKN Aug 22 '18 at 11:14
  • LayoutAnimation works apparently. I was running an android emulator and LayoutAnimation does not work by default if you don't enable it. Tnx anyway ;) – johnnyshrewd Aug 22 '18 at 11:15
  • Cool :) Why don't you simulate on your phone while developing? – MstrQKN Aug 22 '18 at 11:18
  • I forgot my MacBook dongle home...#donglelife...and from what I remember expo stopped working with QR codes – johnnyshrewd Aug 22 '18 at 11:19
  • Expo works perfectly for me. And that's why I asked my company to give me a Macbook Pro 2016 instead of 2017. The 2017 model was the worst computer I ever had, dongles, glitches and weird bugs. – MstrQKN Aug 22 '18 at 11:20