> For the complete documentation index, see [llms.txt](https://rangle-io.gitbook.io/react-native-workshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rangle-io.gitbook.io/react-native-workshop/index-5/index/animated-components.md).

# Animated Components

The Animated library ships with 3 views that support `Animated.Values`. These animated components allow us to bind `Animated.Values` to the style properties.

* `Animated.View`
* `Animated.Text`
* `Animated.Image`.

You can also make a custom animated component by using `Animated.createAnimatedComponent`.

## Example

![](https://2121106575-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZp63Gm3O3A8Q8ddKvK%2F-LZp68a-SA_xLHt7vZ-w%2F-LZp6APlrY7UazNyYPbt%2Fanimated.gif?generation=1551374269664107\&alt=media)

Run the example: [rnplay.org/apps/moq61w](https://rnplay.org/apps/moq61w)

```javascript
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animatedVal: new Animated.Value(100),
    };
  }

  componentDidMount() {
    Animated.timing(this.state.animatedVal, {
      toValue: 200,
      duration: 3000,
      easing: Easing.inOut(Easing.ease),
    }).start();
  }

  render() {
    return (
      <View style={ styles.container }>
        <Animated.View style={[styles.box, {
          width: this.state.animatedVal,
          height: this.state.animatedVal,
        }]} />
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'red',
  },
});
```