title: how to create sliding tab button in react native
body: <p>I follow a tutorial for creating a sliding tab or segment component using animation like below:</p>
  <p><a href="https://i.stack.imgur.com/seQT9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/seQT9.jpg" alt="enter image description here" /></a></p>
  <pre><code>const SlidingTabBar = (props) =&gt; {
  
    const [active, setActive] = useState(0)
    const [xTabOne, setXTabOne] = useState(0)
    const [xTabTwo, setXTabTwo] = useState(0)
    const [transX, setTransX] = useState(new Animated.Value(0))
  
    const handleSlide = (type) =&gt; {
      Animated.spring(transX, {
        toValue: type,
        duration: 100
      }).start()
    }
  
    return (
      &lt;View style={styles.screen}&gt;
      &lt;View style={styles.tabContainer}&gt;
       &lt;Animated.View style={styles.active, {transform: [{ translateX: transX}]}} /&gt;
       &lt;TouchableOpacity onLayout={(e) =&gt; setXTabOne(e.nativeEvent.layout.x)} onPress={() =&gt; setActive(0), handleSlide(xTabOne)}&gt;&lt;Text&gt;tab one&lt;/Text&gt;&lt;/TouchableOpacity&gt;
       &lt;TouchableOpacity onLayout={(e) =&gt; setXTabTwo(e.nativeEvent.layout.x)} onPress={() =&gt; setActive(1), handleSlide(xTabTwo)}&gt;&lt;Text&gt;tab 2&lt;/Text&gt;&lt;/TouchableOpacity&gt;
      &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    screen: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    },
    tabContainer: {
      flexDirection: 'row',
      borderWidth: 1,
      borderColor: 'blue',
      width: 300,
      justifyContent: 'space-around',
      position: 'relative',
    },
    active: {
      position: 'absolute',
      backgroundColor: 'lightblue',
      width: '50%',
      height: '100%',
      left: 0,
      top: 0
    }
  })
  
  </code></pre>
  <p>but when I implement my transform on the View component my overlay disappear and break like this:</p>
  <p><a href="https://i.stack.imgur.com/0j5Po.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0j5Po.jpg" alt="enter image description here" /></a></p>
  <p>any suggestions?</p>