React: Cross-Platform Application Development with React Native

ClassSelection

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: ...