I have 2 components with content to display in a bottom sheet, I show the content of the first component by pressing a button that calls the container of the bottom sheet and through props I pass it to the bottom sheet, by pressing the "select payment method" button ", which is inside the bottom sheet, the content of the PayInvoiceCard component should be displayed
/Account Status/
import React, { useState, useEffect, useMemo } from 'react';import { View, Text, useWindowDimensions, TouchableOpacity, FlatList, ScrollView,} from 'react-native';import SkeletonContent from 'react-native-skeleton-content';import { FadeInView, BottomSheet } from './../../../components';import { useAppDispatch } from './../../../redux/hooks';import { useGetStatusQuery, accountStatusApi,} from './../../../services/accountService';import { PayGlobalIcon } from './../../../Icons';import { InvoiceCard, SelectInvoiceCard, PayInvoiceCard } from './components';import { mergeInvoices } from './../../../helpers/accountStatus';import { Provider } from 'react-native-paper';import { StatusBar } from 'expo-status-bar';import styles from './AccountStatusStyle';function InvoiceCardMemo({ invoice, isLoading }: any) { const invoiceCardComponent = useMemo(() => { return (<InvoiceCard invoice={invoice} isLoading={isLoading || invoice === 'x'} /> ); }, [invoice, isLoading]); return invoiceCardComponent;}const AccountStateScreen = () => { const [show, setShow] = useState(false); const [image, setImage] = useState({}); const [contentc, setContent] = useState({}); const onPressCard = (content: any) => { setShow(true), setContent(content); //setContent(content)setImage(logo),; }; const dispatch = useAppDispatch(); const [invoiceList, setInvoiceList] = useState(Array.from('x'.repeat(3))); const [focused, setFocused] = useState(true); const windowHeight = useWindowDimensions().height; const onRefreshInvoices = () => { dispatch(accountStatusApi.util.invalidateTags(['AccountStatus'])); }; useEffect(() => { if (!isLoading && !isFetching && data) { setData(); } }, [data, error, isLoading, isFetching]); const setData = () => { setFocused(false); const invoices = mergeInvoices(data?.data.Estado_de_Cuenta); setFocused(true); setInvoiceList(invoices); }; const title = <Text style={styles.title}>Seleccionar facturas</Text>; return (<FadeInView><View style={[ styles.container, { minHeight: Math.round(windowHeight), marginBottom: 81 } ]}><Text style={styles.title}>Estado de cuenta</Text><SkeletonContent containerStyle={{ width: '100%' }} isLoading={isLoading} layout={[ { key: 'accountStatusOverview', width: '100%', height: 57.7 } ]}><View style={styles.cardContainer}><Text style={styles.cardText}> Saldo ${data?.data?.SaldoTotal?.toFixed(2)} |{''} {data?.data?.OrdenesAbiertas} facturas abiertas</Text> {data?.data?.SaldoTotal > 0 && (<TouchableOpacity onPress={() => { // cambiar <SelectInvoiceCard/> por <PayInvoiceCard/> onPressCard(<SelectInvoiceCard />); }}><PayGlobalIcon /></TouchableOpacity> )}</View></SkeletonContent><FlatList data={invoiceList} onRefresh={onRefreshInvoices} refreshing={isFetching && !isLoading} initialNumToRender={2} renderItem={({ item, index }) => (<InvoiceCardMemo key={index} invoice={item} isLoading={isLoading} /> )} keyExtractor={(item, index) => index.toString()}></FlatList> {/* BottomSheet Container starts */}<Provider><View style={[styles.bsContainer]}><BottomSheet show={show} // image={image} onDismiss={() => { setShow(false); }} enableBackdropDismiss HeaderComponent={title}><ScrollView contentContainerStyle={{ paddingHorizontal: 24 }}> {contentc}</ScrollView></BottomSheet><StatusBar style="auto" /></View></Provider> {/* BottomSheet Container ends */}</View></FadeInView> );};export default AccountStateScreen;*/SelectInvoiceCard/*import React, { useState } from 'react';import { Dimensions, TouchableOpacity, View, Text } from 'react-native';import styles from './SelectInvoiceCardStyle';import { CheckBox } from './../../../../../components';import InvoiceCheckCard from './InvoiceCheckCard';const SelectInvoiceCard = () => { const [check, setCheck] = useState<boolean>(false); const handleCheckBox = () => { setCheck(!check); }; return (<View style={styles.container}><View style={styles.cardContainer}><View style={{ flexDirection: 'row' }}><CheckBox size={20} colorSelected="#006EF2" selected={check} onPress={handleCheckBox} /><Text style={{ padding: 3 }}>Seleccionar todo</Text></View><View style={{ padding: 4 }}><Text style={styles.counterText}>(5)</Text></View></View><View style={styles.bodyContainer}><View style={styles.headerContainer}><Text style={styles.titleText}>Facturas</Text><Text style={styles.titleText}>Saldo</Text></View> {/* CardContainer */}<View style={styles.cardsContainer}><InvoiceCheckCard /><InvoiceCheckCard /><InvoiceCheckCard /><InvoiceCheckCard /><InvoiceCheckCard /><InvoiceCheckCard /></View><View style={styles.footerContainer}><Text style={styles.footerText}>Total</Text><Text style={styles.footerText}>$123.53</Text></View></View><TouchableOpacity style={styles.button}><Text style={styles.buttonText}>Seleccionar método de pago</Text></TouchableOpacity></View> );};export default SelectInvoiceCard;*/PayInvoiceCard/*import React, { useState } from 'react';import { Dimensions, TouchableOpacity, View, Text } from 'react-native';import styles from './PayInvoiceCardStyle';import { CheckBox } from '../../../../../components';import InvoicenonCheckedCard from './InvoicenonCheckedCard';import PaymentMethodCard from './PaymentMethodCard/PaymentMethodCard';import { Yappy, PayPal, Visa, ACH } from '../../../../../Icons';import ACHTransfer from './ACHTransfer/ACHTransfer';import BankInfoBS from './ACHTransfer/BankInfoBS/BankInfoBS';const PayInvoiceCard = () => { const [select, setSelect] = useState<string>(''); const yappyLogo = <Yappy />; const paypalLogo = <PayPal />; const visaLogo = <Visa />; const achLogo = <ACH />; return (<View style={styles.container}><View style={styles.headerContainer}><View style={styles.headerTextContainer}><Text style={styles.headerText}>Facturas</Text><Text style={styles.headerText}>Saldo</Text></View><View style={styles.cardContainer1}><InvoicenonCheckedCard /></View></View><View style={styles.cardContainer2}> {/* <BankInfoBS /><ACHTransfer /> */}<PaymentMethodCard image={yappyLogo} text="Yappy" selected={select === 'Yappy'} setSelect={setSelect} /><PaymentMethodCard image={paypalLogo} text="PayPal" selected={select === 'PayPal'} setSelect={setSelect} /><PaymentMethodCard image={visaLogo} text="Tarjeta de crédito/débito" selected={select === 'Tarjeta de crédito/débito'} setSelect={setSelect} /><PaymentMethodCard image={achLogo} text="Tranferencia ACH" selected={select === 'Tranferencia ACH'} setSelect={setSelect} /></View><View style={styles.footerContainer}><Text style={styles.footerText}>Total</Text><Text style={styles.footerText}>$123.53</Text></View><TouchableOpacity style={styles.button}><Text style={styles.buttonText}>Continuar</Text></TouchableOpacity></View> );};export default PayInvoiceCard;