How to run a funtion onclick of button from one component and funtion run on another compoenent in react native

Question

Code of Home.js

import React, { Component } from 'react'
import { Text, View, Alert } from 'react-native'
import { Card, Title, Paragraph, Button } from 'react-native-paper';
import Animater from '../component/Animater'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { act } from 'react-test-renderer';
const data = [
    {
        id: 1,
        q: "Is you age above 50 or below 10",
        uri: 'https://miro.medium.com/max/524/1*Peqrh5C9f4lSNNBiwguxTw.png',

    },
    {
        id: 2,
        q: "Do You Visited Forign before 15 March?",
        uri: 'https://www.howitworksdaily.com/wp-content/uploads/2015/07/68_1.jpg'
    },

    ...

    {
        id: 9,
        q: "Do you meet any Foreigner or NRI",
        uri: 'https://assets3.thrillist.com/v1/image/2079046/size/tmg-article_default_mobile_2x.jpg',
    }
]export default class CheckCorona extends Component {
    constructor(props){
        super(props)
    }
    ButtonPressed=()=>{
        console.log("yess it is working")

    }

    renderCard(item) {
        return (
            <View key={item.id}>
                <Card>
                    <Card.Content>
                        <Title style={{ marginHorizontal: 15, fontSize: 24 }}>Q{item.id}: {item.q}</Title>
                        <Card.Cover source={{ uri: item.uri }} />
                        <Card.Actions>
                            <Button onPress={()=>this.ButtonPressed()} >Yess</Button>
                            <Button>No</Button>
                        </Card.Actions>
                    </Card.Content>
                </Card>
            </View>
        )
    }

    ShowResult = () => {
        return (
            <Card>
                <Title>Tu Single is thik hai</Title>
            </Card>
        )
    }
    render() {
        return (
            <View>
                <Animater
                    data={data}
                    renderCard={this.renderCard}
                    ShowResult={this.ShowResult}
                    ButtonPressed={this.ButtonPressed}
                />
            </View>
        )
    }
}

and Code of Animate.js is

import React, { Component } from 'react'
import { Text, View, PanResponder, Animated, Dimensions, StyleSheet, Alert } from 'react-native'


const Screen_width = Dimensions.get('window').width;
const Swipe_Limit = Screen_width / 2;
export default class Animater extends Component {
    constructor(props) {
        super(props)
        this.state = {
            index: 0
        }
        const position = new Animated.ValueXY();
        this.PanResponder = PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onPanResponderMove: (e, gesture) => {
                position.setValue({ x: gesture.dx, y: gesture.dy })
            },
            onPanResponderRelease: (e, gesture) => {
                if (gesture.dx > Swipe_Limit) {
                    this.swipe("right")
                } else if (gesture.dx < -Swipe_Limit) {
                    this.swipe("Left")
                } else {
                    this.resetPosition()
                }

            }
        })
        this.position = position
    }

    DoSwiable = () => {
       // const newCheck= 'this.swipe("right")'

           if(this.props.ButtonPressed()){
               console.log("hello")
           }

    }

    swipe = (direction) => {
        const x = direction === 'right' ? Screen_width * 3 : -Screen_width * 3
        Animated.timing(this.position, {
            toValue: { x: x, y: 0 }
        }).start(() => {
            this.position.setValue({ x: 0, y: 0 }),
                this.setState({
                    index: this.state.index + 1
                })
        })
    }
    resetPosition = () => {
        Animated.spring(this.position, {
            toValue: { x: 0, y: 0 }
        }).start()
    }
    mycardstyle = () => {
        const rotate = this.position.x.interpolate({
            inputRange: [-Screen_width, 0, Screen_width],
            outputRange: ['-120deg', '0deg', '120deg']
        })
        return {
            ...this.position.getLayout(),
            transform: [{ rotate: rotate }]
        }
    }

    rendercard = () => {

        if (this.state.index >= this.props.data.length) {
            return this.props.ShowResult()
        }
        return this.props.data.map((item, i) => {
            if (i < this.state.index) {
                return null
            }
            if (i === this.state.index) {
                return (
                    <Animated.View key={i}
                        style={[this.mycardstyle(), styles.cardStyle]}
                        {...this.PanResponder.panHandlers}>
                        {this.props.renderCard(item)}
                    </Animated.View>
                )
            }
            return (
                <View key={item.id} style={[styles.cardStyle, { top: 5 * (i - this.state.index) }]}>
                    {this.props.renderCard(item)}
                </View>
            )

        }).reverse()
    }
    render() {
        return (
            <View>
                {this.rendercard()}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    cardStyle: {
        position: "absolute",
        zIndex: 1,
        width: Screen_width
    }
})

Actually it is swipeable card I want that when Yes button on Home.js pressed then function on animated.js should run this.swipe("right") Actually I have used props for the showing the data and so the main screen is Home.js and I have import the Animater.js and pass some function is a props and then I am running the props.

Answer 1

Change

 ButtonPressed=()=>{
    console.log("yess it is working")
    }

to

ButtonPressed=()=>{
    console.log("yess it is working");
    (new Animater()).swipe("right");
    }

Hope this helps you!