Simple animated ball in react-native

I will just figure out here some of my progress in the animated world of react-native.
Just begin by moving a ball in the screen very simply!

The code of the whole app build here is available at https://github.com/Merlier/rn_example_animated_ball

Get started

Requirements:

• react-native >= 0.60

First just init a new react-native project:

$ npx react-native init rn_example_animated_ball

Create a simple ball

in your app.js:

import React from 'react';
import {StyleSheet, View, Button} from 'react-native';

const App: () => React$Node = () => {
  return (
    <View style={styles.container}>
      <Button onPress={() => console.log('run')} title="RUN" />
      <View style={styles.ball} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  ball: {
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: 'red',
  },
});

Now just move...

in your app.js:

import React, {useRef} from 'react';
import {StyleSheet, Dimensions, View, Animated, Button} from 'react-native';

const App: () => React$Node = () => {
  const windowWidth = Dimensions.get('window').width;
  const initPosition = {
    x: parseInt(windowWidth / 2) - 50,
    y: 0,
  };

  const position = useRef(new Animated.ValueXY(initPosition)).current;

  const animate = () => {
    Animated.spring(position, {
      toValue: {x: initPosition.x, y: 350},
      speed: 4,
      useNativeDriver: false,
    }).start(() => {
      position.setValue(initPosition);
    });
  };

  return (
    <View style={styles.container}>
      <Button onPress={animate} title="RUN" />
      <Animated.View style={[position.getLayout(), styles.ball]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  ball: {
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: 'red',
  },
});

$ npx react-native run-android

It's just the basics but it's the first step ;)
Have fun
:)