I'm trying to create two buttons that I want under a card. For some reason, it by default renders on top of the card so I'm using absolute position to at least place the buttons at the bottom of the screen but it renders them at the top. My cards are swipeable tinder-style which is why I wrapped it in an additional view to make sure it doesn't interfere with my buttons styling.
Code:
import React from 'react';
import Swiper from 'react-native-deck-swiper';
import {Header} from 'react-native-elements'
import {MaterialCommunityIcons} from '@expo/vector-icons'
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
import { StyleSheet, View, Button, Text} from 'react-native';
export default function App() {
const swiperRef = React.useRef();
const [index,setIndex] = React.useState(0);
const onSwiped = () => {
setIndex(index + 1)
}
return (
<View style={styles.container}>
<Header
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
<View style = {styles.swiperContainer}>
<Swiper
cards={['exampleCard','exampleCard','exampleCard','exampleCard','exampleCard']}
renderCard={(card) => {
return (
<View style={styles.card}>
<Card>
<CardTitle
title = {card}
/>
</Card>
</View>
)
}}
onSwiped={onSwiped}
onSwipedAll={() => {console.log('onSwipedAll')}}
cardIndex={index}
ref = {swiperRef}
backgroundColor={'#4FD0E9'}
stackSize = {3}
disableTopSwipe
disableBottomSwipe
animateOverlayLabelsOpacity
animateCardOpacity
overlayLabels = {{
left: {
title: "Delete",
style: {
label: {
backgroundColor: '#FF0000',
color: '#FFFFFF',
fontSize: 24
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'flex-start',
marginTop: 20,
marginLeft: 20,
}
}
},
right: {
title: "Keep",
style: {
label: {
backgroundColor: '#00ff00',
color: '#FFFFFF',
fontSize: 24
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginTop: 20,
marginLeft: -20
}
}
}
}}
/>
</View>
<View style = {styles.button}>
<MaterialCommunityIcons.Button
name= 'close'
size= {94}
backgroundColor= "transparent"
underlayColor= "transparent"
activeOpacity={.3}
color= "#FF0000"
onPress = {()=> swiperRef.current.swipeLeft()}
></MaterialCommunityIcons.Button>
<MaterialCommunityIcons.Button
name= 'circle-outline'
size= {94}
backgroundColor= "transparent"
underlayColor= "transparent"
activeOpacity={.3}
color= "#00ff00"
onPress = {()=> swiperRef.current.swipeLeft()}
></MaterialCommunityIcons.Button>
</View>
</View>
);
}
const styles = StyleSheet.create({
button: {
position: 'absolute',
bottom: 0
},
card: {
flex: 0.70,
borderRadius:8,
shadowRadius: 25,
shadowColor: "#000",
shadowOpacity: 0.08,
shadowOffset: {width:0, height:0},
borderColor: "#E8E8E8",
justifyContent: "center",
backgroundColor: "white"
},
swiperContainer: {
flex: 0.55,
}
});