How do I enable smooth animation during dynamic addition of components in react native?

Question

In my React Native app I have a card which has a conditional <Text> component which is rendered on press of a button and removed on triggering the same button.

This is what it my code looks like:

<View style={styles.container}>
    <View style={styles.card}>
      <Button onPress={() => this.setState({ triggered: !this.state.triggered })} title="Click to Expand" />
      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
      {this.state.triggered && <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>}
    </View>
  </View>

And the CSS for it:

container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  card: {
    width: "90%",
    backgroundColor: "lightgrey",
    borderRadius: 15,
    alignSelf: "center",
    padding: "5%"
  },

My full code available on an online emulator provided here: (https://snack.expo.io/@eddyj/thrilled-pudding)

So far so good, everything works as expected, however the transitions itself is not smooth at all. It just appears/disappears. How can I animate the card so it gradually increases and decreases its height? Is that possible?

Answer 1

You can do this a few ways, but you'll likely want to make use of the Animated library:

import { Animated } from 'react-native'

You store the (style property) value in state:

this.state = { myViewHeight: new Animated.Value(300) }

(myViewHeight would be used as a style prop in this example, <View style={{ height: myViewHeight }})

And then to alter the value gradually, run an animation on it:

Animated.timing(this.state.myViewHeight, {
  toValue: 600,
  duration: 300
}).start()

In this example, it would gradually raise the height of the view from 300 to 600.

However, since you want to show more text, I think if I were you I might convert the text to an array of words and animate the percent of words shown.

There's a good guide here.

Answer 2

Try these services for smooth rendering from react-native Docs

import {
  NativeModules,
  LayoutAnimation 
} from 'react-native';

const { UIManager } = NativeModules;

componentWillUpdate() {
   UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true)
   LayoutAnimation.spring();
}