React native flex-end is not working, the color bars are displaying at the top only

import React from “react”;
import { StyleSheet, Text, View, Image, ImageBackground, Button } from “react-native”;

const DemoScreenOne = () => {
return (
<ImageBackground style={styles.background} source={require("…/assets/background.jpg")}>



);
};

export default DemoScreenOne;

const styles = StyleSheet.create({
background: {
flex: 1,
},

buttonPrimary: {
backgroundColor: “red”,
height: 40,
width: “100%”,
justifyContent: “flex-end”,
},
buttonSecondary: {
backgroundColor: “blue”,
width: “100%”,
height: 40,
justifyContent: “flex-end”,
},
});

The colur buttons are coming at the top instead of bottom