CODEWITHSUNDEEP
react-native
Sam Leurs
Sam Leurs

Reputation: 2000

react native animated not working when called from navigation header

I have a bottom drawer in a screen. Code:

<View style={[styles.bottomdrawer, {transform: [{translateY: slideY}]}]}>
    <Text>Hello world!</Text>
</View>

I want to slide up this button drawer when I click on a button. I have the following function:

const slideY = new Animated.Value(100);

const SlideUp = () => {
    Animated.spring(slideY, {
        toValue: 0
    };
};

And I have a button on my screen. Code:

<Button title="Click here!" onPress={SlideUp} />

This all works. The problem is that I want to slide up the button drawer when I click on a button in my navigation header. I pass the function SlideUp to the header:

useEffect(() => {
    props.navigation.setParams({
         slideup: SlideUp
    };
}, []);

And in the header:

// ...
headerRight: () => (
    <TouchableHighlight onPress={navData.navigation.getParam('slideup')}>
        <Text>Slide up!</Text>
    </TouchableOpacity>
)

The animation does not work! When I put a console.log() in the function SlideUp to see if the function is called, I get the output. So when I do this:

const SlideUp = () => {
    console.log('Is this function called?');
    Animated.spring(slideY, {
        toValue: 0
    };
};

and I click on the header button, the text 'Is this function called?' shows up in my console, but the Animated.spring-function does not work. Where could be the problem?

Upvotes: 2

Views: 205

Answers (1)

Yoel
Yoel

Reputation: 7965

missing start on your animated

const SlideUp = () => {
    console.log('Is this function called?');
    Animated.spring(slideY, {
        toValue: 0
    }).start()// start your animation
};

Upvotes: 1

Related Questions