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

Get React: Cross-Platform Application Development with React Native now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.