I’m having all sorts of issues making this thing work, I want to implement a “add quantity” button like we see in all these delivery apps like Doordash abd Uber eats where when user clicks on the plus button, a view appears with plus and minus to add or remove from the quantity. I’m still at the first step tho, it’s making the view expand to the left once the button is clicked. As expected, when I click on the button it expands from both sides. Here’s what I mean:

And here’s what I want to accomplish:

Here’s my code for reference:

type Props = {
    item: Product;
};

const ProductItem: React.FC<Props> = ({item}): JSX.Element | null => {
    const blockWidth = responsiveWidth(100) / 2 - 30;
    const blockHeight = responsiveWidth(100) / 2 - 30;

    const [expanded, setExpanded] = useState(false);

    const toggleExpand = () => {
        setExpanded(!expanded);
        // Animated.timing(20, {
        //     toValue: expanded ? responsiveWidth(100) / 2 - 30 : responsiveWidth(100) - 60,
        //     duration: 300,
        //     easing: Easing.ease,
        //     useNativeDriver: false,
        // }).start();
    };

    const containerStyle = {
        width: blockWidth,
        height: blockHeight,
        marginBottom: 14,
        borderRadius: 5,
        backgroundColor: theme.colors.imageBackground,
    };

    const qtyButtonWidth = expanded ? blockWidth : 38;

    return (
        <View
            style={{
                width: blockWidth,
                height: blockHeight,
                borderRadius: 12,
                paddingHorizontal: 14,
                paddingTop: 14,
                paddingBottom: 12,
                justifyContent: 'space-between',
                position: 'relative',

            }}
        >
            {/*<View*/}
            {/*    style={{*/}
            {/*        position: 'absolute',*/}
            {/*        left: 0,*/}
            {/*        bottom: '10%',*/}
            {/*        width: 50,*/}
            {/*        height: 30,*/}
            {/*        backgroundColor: theme.colors.mainColor,*/}
            {/*        transform: [{ translateY: -25 }],*/}
            {/*        zIndex: 1,*/}
            {/*        borderBottomRightRadius: 5,*/}
            {/*        borderTopRightRadius: 5*/}
            {/*    }}*/}
            {/*/>*/}
            <TouchableOpacity
                onPress={toggleExpand}
                style={{
                    position: 'absolute',
                    left: 100,
                    right: 0,
                    bottom: '10%',
                    width: qtyButtonWidth,
                    height: 38,
                    backgroundColor: theme.colors.secondaryColor,
                    transform: [{ translateY: -25 }],
                    zIndex: 1,
                    borderRadius: 25,
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                <AntDesign name="plus" size={24} color="white" />
                {/*{expanded && (*/}
                {/*    <View style={{ flexDirection: 'row', alignItems: 'center', flex: 3 }}>*/}
                {/*        <TouchableOpacity onPress={() => {}}>*/}
                {/*            <Text style={{ fontSize: 20, marginHorizontal: 10 }}>-</Text>*/}
                {/*        </TouchableOpacity>*/}
                {/*        <Text>{0}</Text>*/}
                {/*        <TouchableOpacity onPress={() => {}}>*/}
                {/*            <Text style={{ fontSize: 20, marginHorizontal: 10 }}>+</Text>*/}
                {/*        </TouchableOpacity>*/}
                {/*    </View>*/}
                {/*)}*/}
            </TouchableOpacity>
            <Image
                source={{uri: item.image.formats.large.url}}
                style={{flex: 1}}
                resizeMode='contain'
            />
            <View style={{alignItems: "flex-start"}}>
                <text.T16 numberOfLines={1}>{item.name}</text.T16>
            </View>
        </View>
    );
};

export default ProductItem;