CODEWITHSUNDEEP
javascriptreactjsreact-native
ilvthsgm
ilvthsgm

Reputation: 636

Calling Component Itself Inside of the Component

This is the issue of React Hooks. Since I'm new to these methods, I would be very happy If you can help me out. Thanks in advance.

I can toggle the modal with the setDoAnimation.

//ExampleScreen.js

import ButtomModalAnimatedComponent from '../../Components/ButtomModalAnimation'

export default () => {

    const [doAnimation, setDoAnimation] = useState(false)

    return (
      
      // I can toggle the modal with this.
      <TouchableOpacity onPress={() => setDoAnimation(!doAnimation)}> 
          <IconFA5 name="clock" style={{ color: 'black', fontSize: RFPercentage(3.5) }} />
      </TouchableOpacity>

      <ButtomModalAnimatedComponent doAnimation={doAnimation} />
    )
}

I also added button to following component to close the modal from inside of the component which is not working.

//ButtomModalAnimatedComponent.js

import { useAnimation } from './AnimationHook'

const ButtomModalAnimatedComponent = ({ doAnimation }) => {

  const [itemList] = useState(['5', '10', '15', '20', '25', '30', '40', '50'])
  const animation = useAnimation({ doAnimation, duration: 500 })

  return (
    <Animated.View
      style={[
        ApplicationStyles.modal,
        {
          top: animation.interpolate({
            inputRange: [0, 1],
            outputRange: [height, height / 2],
          }),
        },
      ]}
    >
       <View style={{ flexDirection: 'column', flex: 1, position: 'absolute', top: 10, right: 10 }}>
         
          // How can I use this onPress to animate the animation? (close the modal)
          <TouchableOpacity onPress={() => ???? }> 
            <IconFA5 name="check" style={{ color: 'white', fontSize: RFPercentage(3.5) }} />
          </TouchableOpacity>

      </View>
    </Animated.View>
  )
}

// AnimationHook.js

import { Animated } from 'react-native';
import React, { useState, useEffect, useRef } from 'react'

export const useAnimation = ({ doAnimation, duration }) => {
  const [animation, setAnimation] = useState(new Animated.Value(0));
  
  useEffect(() => {
    Animated.timing(animation, {
      toValue: doAnimation ? 1 : 0,
      duration,
    }).start();
  }, [doAnimation]);

  return animation;
}

How can I close the modal from the component itself? (ButtomModalAnimation.js)

Upvotes: 0

Views: 40

Answers (1)

D10S
D10S

Reputation: 1549

You can pass "setDoAnimation" as prop, just like you passed "doAnimation".
Then on the button 'onPress' you can do:

onPress={() => setDoAnimation(false) }

Upvotes: 1

Related Questions