Position and bottom are not working in react native

Question

I wanted to fix this part at the bottom of the page, but it's not working. Can someone please help me?

<View styles = {style.container}>
  <View styles = {style.card}>
    <TouchableOpacity>
      <Text>Button</Text>
    </TouchableOpacity>
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flexDirection: "column",
    backgroundColor: "#61D9B7",
    height: 70,
  },
  card: {
    flexDirection: "row",
    marginBottom: 10,
    position: 'absolute',
    bottom: 0,
  },
});

Answer 1

Give it a try

import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const Test = () => {
  return (
    <View style={styles.root}>
      <View style={styles.container}>
        <View style={styles.card}>
          <TouchableOpacity>
            <Text>Button</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

export default Test;

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: "red",
  },
  container: {
    backgroundColor: "#61D9B7",
    height: 70,
    position: "absolute",
    bottom: 0,
    width: "100%",
  },
  card: {
    flexDirection: "row",
    marginBottom: 10,
  },
});