> 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-value.md).

# Animated.Value

The first step in creating an animation is to create an animated value. We can do that by calling:

```javascript
import { Animated } from 'react-native';

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

  ...
}
```

You'll want to save this animated value onto the state of a component or as a property. This is because we will need access to it in the `render()` method.

## Animated.ValueXY

It is similar to `Animated.Value` except it supports an `{ x, y }` object as the value. This is useful for dealing with positions of elements and gestures.

```javascript
new Animated.ValueXY({ x: 0, y: 0 })
```

## setValue

There are times when you might want to change the value for this `Animated.Value` but, not trigger an animation. This can be done by using the `setValue` method.

```javascript
this.state.animatedVal.setValue(100)
```