Swipe card overlap problem reproduction

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
	SafeAreaView,
	StyleSheet,
	View,
	Text,
	Animated,
} from 'react-native';
import { Button } from 'react-native-paper';

const App: () => React$Node = () => {
	return (
		<>
			<SafeAreaView style={styles.container}>
				<Button dark color="#aaaaff" mode="contained" onPress={() => {}}>Test Button</Button>
				<View style={styles.deck}>
					<Animated.View style={[styles.cardView, styles.onBottom]}>
						<View style={styles.card}>
								<Text style={{ fontSize: 18, color: 'red' }}>Bottom Card Text</Text>
						</View>
					</Animated.View>
					<Animated.View style={styles.cardView}>
						<View style={styles.card}>
								<Text style={{ fontSize: 18, color: 'blue' }}>Top Card Text</Text>
						</View>
					</Animated.View>
				</View>
			</SafeAreaView>
		</>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 20,
		backgroundColor: '#dddddd',
	},
	deck: {
		marginTop: 20,
	},
	cardView: {
		position: 'absolute',
		width: '100%',
	},
	onBottom: {
		zIndex: -1,
	},
	card: {
		height: 300,
		marginBottom: 10,
		backgroundColor: '#ffffff',
		borderRightWidth: 1,
		borderBottomWidth: 1,
		borderColor: '#48484840',
		borderBottomLeftRadius: 3,
		borderBottomRightRadius: 3
	},
});

export default App;

index.js

/**
 * @format
 */

import {AppRegistry, TouchableNativeFeedback} from 'react-native';
// TouchableNativeFeedback.Ripple = () => null;
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);