Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

92
Views
Animated.View style not changing even thought the value of animation variable is getting updated

I want the text to move up when i click it. But even though the topPosition value is updated on click to -40, the View doesnt ever move. How can I make the animation run?

const TabButton = () => {
  //Animation variables
  const topPosition = useRef(new Animated.Value(1)).current;
  const labelVisibility = useRef(false);

  const pushIconUp = () => {
    console.log('dwad');
    Animated.timing(topPosition, {
      toValue: -40,
      duration: 1000,
      useNativeDriver: false,
    }).start();
    console.log(topPosition);
  };
  const pushIconDown = () => {
    Animated.timing(topPosition, {
      toValue: 0,
      duration: 100,
      useNativeDriver: false,
    }).start();
  };

  return (
    <TouchableHighlight onPress={pushIconUp}>
      <Animated.View style={{marginTop: topPosition, borderColor: 'white'}}>
        <Text>daw</Text>
      </Animated.View>
    </TouchableHighlight>
  );
};

export default TabButton;
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I think it's better if you animate the translation instead and also the TouchableOpacity should be inside the Animated.View.

<Animated.View style={{ transform: [{ translateY: topPosition }], borderColor: 'white'}}>
    <TouchableHighlight onPress={pushIconUp}>
        <Text>daw</Text>
    </TouchableHighlight>
</Animated.View>

You can also enable useNativeDriver

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!