React Native animation transition opacity from 0 to 1 does not work

Question

I am using expo with Android Virtual Device .
I am trying to mimic this animation behavior from this example, https://codepen.io/borntofrappe/pen/qwqPwq, Here is what it looks like right now: I use flag array to represent which button is clicked, if the certain button is clicked, I will call handleSpeedBtn function to change its corresponding flag, when the flag is true, it will provide buttonTextLayer style to this button. Right now,I am having trouble displaying the buttonTextLayer style in animation style.It applies buttonTextLayer style to the button without any animation, besides, I do not have any errors when I run the code. Just change the opacity from 0 to 1 probably would not make my app looks like the example I found on codepen, but I just want to see the animation at least. Thanks for help!

import React, { useState } from "react";
import {
  Text,
  StyleSheet,
  View,
  TouchableOpacity,
  Animated,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
const SortTitle = ({ callBack, title }) => {
  const [flag, setFlag] = useState([false, true, false]);
  const opacity = useState(new Animated.Value(0))[0];
  const handleSpeedBtn = (index) => {
    let ary = [false, false, false];
    ary[index] = ary[index] == true ? false : true;
    setFlag(ary);
    Animated.timing(opacity, {
      toValue: 1,
      duration: 2000,
      useNativeDriver: true,
    }).start();
  };
  return (
    <View>
      <View style={styles.titleContainer}>
        <Text style={styles.titleText}>{title}</Text>
      </View>

      <View style={styles.btnGroupContainer}>
        <View style={styles.btnContainer}>
          <TouchableOpacity onPress={() => handleSpeedBtn(0)}>
            <Animated.View
              style={[flag[0] ? styles.buttonTextLayer : {}, opacity]}>
              <MaterialCommunityIcons
                name="speedometer-slow"
                size={46}
                color="white"
                style={[flag[0] ? styles.icon : {}]}
              />
              <Text style={[styles.buttonText, flag[0] ? {} : styles.hidden]}>
                Slow
              </Text>
            </Animated.View>
          </TouchableOpacity>
        </View>
        <View style={styles.btnContainer}>
          <TouchableOpacity onPress={() => handleSpeedBtn(1)}>
            <Animated.View
              style={[flag[1] ? styles.buttonTextLayer : {}, opacity]}>
              <MaterialCommunityIcons
                name="speedometer-medium"
                size={46}
                color="white"
                style={[flag[1] ? styles.icon : {}]}
              />
              <Text style={[styles.buttonText, flag[1] ? {} : styles.hidden]}>
                Medium
              </Text>
            </Animated.View>
          </TouchableOpacity>
        </View>
        <View style={styles.btnContainer}>
          <TouchableOpacity onPress={() => handleSpeedBtn(2)}>
            <Animated.View
              style={[flag[2] ? styles.buttonTextLayer : {}, opacity]}>
              <MaterialCommunityIcons
                name="speedometer"
                size={46}
                color="white"
                style={[flag[2] ? styles.icon : {}]}
              />

              <Text style={[styles.buttonText, flag[2] ? {} : styles.hidden]}>
                Fast
              </Text>
            </Animated.View>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  titleText: {
    fontSize: 25,
    color: "#000000",
    fontWeight: "bold",
    marginLeft: 10,
    marginVertical: 5,
  },
  titleContainer: {
    borderBottomColor: "#e3e3e3",
    borderBottomWidth: 2,
  },
  icon: {
    marginLeft: 10,
  },
  textDiv: {},

  btnGroupContainer: {
    height: 80,
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around",
    backgroundColor: "#889bf2",
  },
  btnContainer: {
    paddingVertical: 10,
    justifyContent: "space-around",
  },
  buttonText: {
    textAlign: "center",
    color: "#ffffff",
    fontSize: 15,
    alignSelf: "center",
    flex: 1,
  },
  buttonTextLayer: {
    width: 130,
    backgroundColor: "#5c69a4",
    borderRadius: 50,
    flexDirection: "row",
  },
  hidden: {
    width: 0,
    height: 0,
  },
});

export default SortTitle;

Answer 1

Working example Link: ----> https://snack.expo.io/@msbot01/aa6537

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import Constants from 'expo-constants';
import Icon from 'react-native-vector-icons/FontAwesome';

// You can import from local files
import AssetExample from './components/AssetExample';
import AwesomeIcon from 'react-native-vector-icons/FontAwesome';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import Ripple from 'react-native-material-ripple'; 

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      tabSelected:1
    };
  }

  onClick(e){
    this.setState({
      tabSelected:e
    })
  }


  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{position:"absolute", bottom:0, height:50,backgroundColor:'white', width:'100%', alignItems:'center', flexDirection:'row', justifyContent:'space-around'}}>
          <Ripple style={{height:'100%', width:100, justifyContent:'center', alignItems:'center'}} onPress={()=>{this.onClick(0)}}>
            {this.state.tabSelected==0?
              <View style={{flexDirection:'row', padding:10, borderRadius:20, alignItems:'center', backgroundColor:'#bffab6', width:'80%', justifyContent:"center", height:'70%'}}>
                <Icon name="user" size={15} color="#1fdb02"/>
                <Text style={{fontSize:15, paddingLeft:5, color:'#1fdb02'}}>user</Text>
            </View>
            :
            <Icon name="user" size={15} color="#1fdb02"/>
            }
          </Ripple>
          <Ripple style={{height:'100%', width:100, justifyContent:'center', alignItems:'center'}}  onPress={()=>{this.onClick(1)}}>
            {this.state.tabSelected==1?
              <View style={{flexDirection:'row', padding:10, borderRadius:20, alignItems:'center', backgroundColor:'#fce29a', width:'80%', justifyContent:"center", height:'70%'}}>
                <Icon name="search" size={15} color="#e6ac02"/>
                <Text style={{fontSize:15, paddingLeft:5, color:'#e6ac02'}}>search</Text>
            </View>
            :
            <Icon name="search" size={15} color="#e6ac02"/>
            }
          </Ripple>
          <Ripple style={{height:'100%', width:100, justifyContent:'center', alignItems:'center'}}  onPress={()=>{this.onClick(2)}}>
            {this.state.tabSelected==2?
              <View style={{flexDirection:'row', padding:10, borderRadius:20, alignItems:'center', backgroundColor:'#b6e9fa', width:'80%', justifyContent:"center", height:'70%'}}>
                <Icon name="heart" size={15} color="#048dba"/>
                <Text style={{fontSize:15, paddingLeft:5, color:'#048dba'}}>like</Text>
            </View>
            :
            <Icon name="heart" size={15} color="#048dba"/> 
            }
          </Ripple>
          <Ripple style={{height:'100%', width:100, justifyContent:'center', alignItems:'center'}}  onPress={()=>{this.onClick(3)}}>
            {this.state.tabSelected==3?
              <View style={{flexDirection:'row',padding:10, borderRadius:20, alignItems:'center', backgroundColor:'#f3b8ff', width:'80%', justifyContent:"center", height:'70%'}}>
                <Icon name="share" size={15} color="#9c04ba"/>
                <Text style={{fontSize:15, paddingLeft:5, color:'#9c04ba'}}>share</Text>
            </View>
            :
            <Icon name="share" size={15} color="#9c04ba"/>
            }
          </Ripple>
        </View>
      </View>
    );
  }
}