Styling position as absolute and giving bottom: 0 is positioning my component at the top of the screen

Viewed 62

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, 
  }
});
0 Answers
Related