How do I place text infront of Image Background in this Case?

Question

How do i put text infront of a background image in React native? I have this code and it has refused to have the text infront of the imageBackground, Like the text should be in front of the background image but it still does not work the way i expected it to work. My code is shown below.

import React from 'react';
import {
  Image,
  ImageBackground,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {Header, Avatar, Icon, Card} from '@rneui/themed';

const HomePage = () => {
  return (
    <View>
      <Header
        containerStyle={{
          backgroundColor: 'transparent',
          justifyContent: 'space-around',
        }}
        leftComponent={
          <Avatar
            small
            rounded
            source={{
              uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiRne6FGeaSVKarmINpum5kCuJ-pwRiA9ZT6D4_TTnUVACpNbzwJKBMNdiicFDChdFuYA&usqp=CAU',
            }}
            onPress={() => console.log('Left Clicked!')}
            activeOpacity={0.7}
          />
        }
        rightComponent={
          <Icon
            name={'add-circle-outline'}
            color={'#00BB23'}
            size={32}
            onPress={() => console.log('Right Clicked!')}
          />
        }></Header>
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          borderadius: 9,
          alignItems: 'center',
        }}>
        <ImageBackground
          source={{
            uri: 'asset:/logo/bg.JPG',
          }}
          imageStyle={{borderRadius: 6}}
          style={{
            flex: 1,
            width: 350,
            height: 150,
            borderadius: 9,
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 15,
          }}>
          <View
            style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
            <Text style={styles.accText}>Account Balance</Text>
            <Text style={styles.text}> 250,000 </Text>
          </View>
        </ImageBackground>
      </View>
    </View>
  );
};

export default HomePage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  paragraph: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    padding: 20,
  },
  text: {
    top: -60,
    fontSize: 30,
    color: 'white',
    textAlign: 'center',
    fontFamily: 'Poppins-Bold',
  },
  mainContainer: {
    flex: 1,
    paddingTop: 90,
    justifyContent: 'center',
    alignItems: 'center',
  },
  accText: {
    flex: 1,
    paddingTop: 10,
    justifyContent: 'center',
    alignItems: 'center',
    fontFamily: 'Poppins-Medium',
    color: 'white',
    textAlign: 'center',
  },
});

Thats what the code Looks like. Please be of assistance? I have been having a hang with this and it does not seem to work the way i want it to.