How to animate style of buttons(TouchableOpacity) in react native

Question

Code below working as expected, all I need when click other button, it should animate the change of background color(active item is light-blue).

Default background color of buttons is gray(shade04), when its clicked I need it to fade backgroundColor to lightblue(color.bluePurple) with animation

component:

export const TabController = (props: TabControllerProps) => {
  const { index, activeTab, setActiveTab, containerStyle } = props

  return (
    <>
      <View style={TABS}>
        <View style={{ ...CONTAINER, ...containerStyle }}>
          <TouchableOpacity
            onPress={() => {
              setActiveTab(0)
            }}
            style={{
              backgroundColor: activeTab === 0 ? color.bluePurple : color.shade04,
              ...TAB_BTN,
            }}
          >
            <View
              style={{
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <Text tx={'Topics'} preset="body1Emphasized" />
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              setActiveTab(1)
            }}
            style={{
              backgroundColor: activeTab === 1 ? color.bluePurple : color.shade04,
              ...TAB_BTN,
            }}
          >
            <View
              style={{
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <Text
                style={activeTab === 1 ? ACTIVE : NORMAL}
                tx={'Quiz'}
                preset="body1Emphasized"
              />
            </View>
          </TouchableOpacity>
        </View>
      </View>
    </>
  )
}

I seached any tried to leverage Animated.View but still got trouble..

Try `react-native-reanimated` package. What you need is 'useSharedValue', 'useAnimatedStyle' and 'interpolate'. — Jácint Varga, Sep 23 '22 at 13:50
@JácintVarga thanks for comment. can you demonstrate solution as answer to my post, need coding solution — TrypicalDev, Sep 23 '22 at 14:47
@TrypicalDev will you clarify what it is you are wanting? I'm a little confused by your question. — server_unknown, Sep 23 '22 at 15:42
@server_unknown edited post, basically all I need cliked buttons background color should be change slowly instead of instant, So expect some solution with animation lib — TrypicalDev, Sep 23 '22 at 16:09
Maybe this tutorial will help: https://www.youtube.com/watch?v=bLfT6KJyFzI — server_unknown, Sep 23 '22 at 17:18

How to animate style of buttons(TouchableOpacity) in react native

0 Answers0