How to Make Cards Fill the Entire Screen in a Swipeable Deck

Question

I am using react-native-deck-swiper. I've been trying for days to figure out how to put this card on the entire screen, how can I do it? I'm bad with visuals

I really have no idea, here is my last hope, if I'm being stupid and asking a stupid question, forgive me, but explain to me where I went wrong please

Main code:

import React, { useState } from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity, Button } from "react-native";
import Swiper from 'react-native-deck-swiper'

const Card = ({ name, image }) => (
    <View style={styles.card}>
        <Image source={{ uri: image }} style={styles.cardImage} resizeMode="cover" />
        <Text style={styles.cardText}>{name}</Text>
    </View>
);

const Home = () => {
    const [cards, setCards] = useState([
        { id: 1, name: "User 1", image: "https://mir-s3-cdn-cf.behance.net/project_modules/disp/8e4ea335938337.5709522f2331e.gif" },
        { id: 2, name: "User 2", image: "https://mir-s3-cdn-cf.behance.net/project_modules/disp/8e4ea335938337.5709522f2331e.gif" },
        { id: 3, name: "User 3", image: "https://mir-s3-cdn-cf.behance.net/project_modules/disp/8e4ea335938337.5709522f2331e.gif" },
    ]);

    const swiperRef = React.createRef();

    const handleLike = () => {
        swiperRef.current.swipeRight();
    };

    const handleDislike = () => {
        swiperRef.current.swipeLeft();
    };

    return (
        <View style={{ flex: 1 }}>
            <Swiper
                ref={swiperRef}
                cards={cards}
                renderCard={(card) => <Card key={card.id} {...card} />}
                onSwiped={(cardIndex) => { console.log(cardIndex) }}
                onSwipedAll={() => { console.log('onSwipedAll') }}
                cardIndex={0}
                backgroundColor={'#4FD0E9'}
                stackSize={3}
                containerStyle={styles.swiperContainer}
            >
            </Swiper>
            <View style={styles.bottomButtons}>
                <TouchableOpacity onPress={handleDislike} style={styles.buttonSide}>
                    <Image source={require('../../assets/imgs/icons/tabs/home/flecha.png')} style={styles.imageSide} />
                </TouchableOpacity>
                <TouchableOpacity onPress={handleLike} style={styles.button}>
                    <Image source={require('../../assets/imgs/icons/tabs/home/x.png')} style={styles.image} />
                </TouchableOpacity>
                <TouchableOpacity onPress={handleDislike} style={styles.buttonCenter}>
                    <Image source={require('../../assets/imgs/icons/tabs/home/msg.png')} style={styles.imageCenter} />
                </TouchableOpacity>
                <TouchableOpacity onPress={handleLike} style={styles.button}>
                    <Image source={require('../../assets/imgs/icons/tabs/home/like.png')} style={styles.image} />
                </TouchableOpacity>
                <TouchableOpacity onPress={handleLike} style={styles.buttonSide}>
                    <Image source={require('../../assets/imgs/icons/tabs/home/estrela.png')} style={styles.imageSide} />
                </TouchableOpacity>
            </View>
        </View>
    );
};

Styles:

const styles = StyleSheet.create({
    swiperContainer: {
        flex: 1,
    },
    image: {
        width: 40,
        height: 40,
    },
    imageSide: {
        width: 20,
        height: 20,
    },
    imageCenter: {
        width: 20,
        height: 20,
        right: 1,
        top: 2
    },

    card: {
        flex: 1,
        borderRadius: 10,
        borderWidth: 2,
        borderColor: "#E8E8E8",
        backgroundColor: "white",
        overflow: 'hidden',
        width: '100%',
        height: '100%',
    },

    cardImage: {
        flex: 1,
        borderRadius: 10,
        width: '100%',
        height: '100%',
    },
    cardText: {
        fontSize: 20,
        paddingTop: 10,
        paddingBottom: 10,
    },
    bottomButtons: {
        flexDirection: "row",
        justifyContent: "space-around",
        position: "absolute",
        bottom: 20,
        left: 0,
        right: 0,
    },
    button: {
        backgroundColor: "white",
        borderRadius: 50,
        padding: 15,
    },
    buttonSide: {
        marginTop: 30,
        backgroundColor: "white",
        borderRadius: 50,
        padding: 15,
    },
    buttonCenter: {
        marginTop: 30,
        backgroundColor: "#8734C9",
        borderRadius: 50,
        padding: 10,
        borderWidth: 4,
        borderColor: 'white'
    },
});

i try to use width and height in '100%', but just resize the width, i want everything in the whole screen

Answer 1

apparently when you despair your mind works on the jerry-rig

I managed it this way, but I don't think it's recommended:

    card: {
        position: 'absolute',
        borderRadius: 10,
        borderWidth: 2,
        borderColor: "#E8E8E8",
        backgroundColor: "white",
        overflow: 'hidden',
        width: '125%',
        height: '125%',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        marginTop: '-24%',
        marginLeft: '-17%'
    },