title: how to make react native animated transition
body: <blockquote>
  <p>There are 2 gradients, when I press the inactive one, I want the
  active one to slowly shift the color of the other, how can I do that?</p>
  </blockquote>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { StyleSheet, Text, View, TouchableOpacity,Button } from &quot;react-native&quot;;
  import LinearGradient from 'react-native-linear-gradient';
  import Animated, {useSharedValue,useAnimatedStyle,} from 'react-native-reanimated';
  
  const atciveTab = ['#0067FF', '#00C2FF']
  const inactiveTab = ['rgba(0,0,0,0)', 'rgba(0,0,0,0)']
  const App = () =&gt; {
    const [selectedTab, setSelectedTab] = useState({
      tickets: true,
      collectibles: false
    })
    const selectTicketTab = () =&gt; {
      setSelectedTab({
        tickets: true,
        collectibles: false
      })
    }
    const selectCollectiblesTab = () =&gt; {
      setSelectedTab({
        tickets: false,
        collectibles: true
      })
    }
      const offset = useSharedValue(0);
      const animatedStyles = useAnimatedStyle(() =&gt; {
        return {
          transform: [{ translateX: offset.value * 255 }],
        };
      });
  </code></pre>
  <blockquote>
  <p>The gradient in the background will scroll when I click on it.</p>
  </blockquote>
  <pre><code>return (
      &lt;View style={styles.container}&gt;
        &lt;TouchableOpacity
          onPress={selectTicketTab}
          style={styles.mainview}&gt;
          &lt;LinearGradient
            style={styles.ticketTab}
            colors={selectedTab.tickets ? atciveTab : inactiveTab}
            start={{ x: 1, y: 2 }}
            end={{ x: 0, y: 0 }}
          &gt;
            &lt;Text style={styles.text}&gt;Tickets&lt;/Text&gt;
          &lt;/LinearGradient&gt;
        &lt;/TouchableOpacity&gt;
        &lt;TouchableOpacity
          onPress={selectCollectiblesTab}
          style={styles.mainview2}&gt;
          &lt;LinearGradient
            style={styles.collectiblesTab}
            colors={selectedTab.collectibles ? atciveTab : inactiveTab}
            start={{ x: 1, y: 2 }}
            end={{ x: 0, y: 0 }}
          &gt;
            &lt;Text style={styles.text}&gt;Collectibles&lt;/Text&gt;
          &lt;/LinearGradient&gt;
        &lt;/TouchableOpacity&gt;
        &lt;Animated.View style={[styles.box, animatedStyles]} /&gt;
        &lt;Button onPress={() =&gt; (offset.value = Math.random())} title=&quot;Move&quot; /&gt;
      &lt;/View&gt;
    )
  }
  
  export default App;
  </code></pre>
  <blockquote>
  <p>I want the background color to be transferred to the other by sliding
  slowly I tried many ways but I couldn't</p>
  </blockquote>
  <pre><code>const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      padding: 20,
      backgroundColor: '#050035',
      flex: 1,
      justifyContent: 'center'
    },
    text: {
      fontWeight: '400',
      color: 'white',
      textAlign: 'center',
      padding: 10,
      fontSize: 14,
      letterSpacing: 0.1,
    },
    mainview: {
      width: 163,
      gap: 10,
      backgroundColor: 'rgba(209, 214, 219, 0.1)',
      height: 40,
      borderTopLeftRadius: 8,
      borderBottomLeftRadius: 8,
    },
    mainview2: {
      width: 163,
      gap: 10,
      backgroundColor: 'rgba(209, 214, 219, 0.1)',
      marginLeft: 3,
      height: 40,
      borderTopRightRadius: 8,
      borderBottomRightRadius: 8,
    },
    ticketTab: {
      borderTopLeftRadius: 8,
      borderBottomLeftRadius: 8,
    },
    collectiblesTab: {
      borderTopRightRadius: 8,
      borderBottomRightRadius: 8,
    },
    box: {
      width: 150,
      height: 150,
      backgroundColor: 'red'
    }
  })
  </code></pre>