In this component, we will explore the Animated
API in React Native to get started with animations. Moreover, we will use custom fonts to improve the user experience and increase the feeling of customization in our app:
/*** src/components/ClassSelection.js ** */ import React from 'react'; import { View, Image, Dimensions, Text, TouchableOpacity, Animated, StyleSheet, } from 'react-native'; const { height, width } = Dimensions.get('window'); export default class ClassSelection extends React.Component { constructor(props) { super(props); this.state = { classButtonPosition: new Animated.Value(15 + width * 0.1), }; } _onClassChange(className) { if (className === 'superior') { Animated.timing(this.state.classButtonPosition, { toValue: width * 0.77, duration: 500, }).start(); } if (className === 'special') { Animated.timing(this.state.classButtonPosition, { toValue: width * 0.5 - 20, duration: 500...