React Native - How do I set the style of a View contained within an ImageBackground so that the View stays contained within the ImageBackground?

Question

i'm building a simple bughouse (4-person chess) game as my first React Native app, and i'm a little confused about a styling issue. the issue occurs when rendering an ImageBackground, which contains a View, which contains a grid of Views (the chess board). when using the code laid out following this question, the View is not contained within the screen (see screenshot below). how do i set the style of a View contained within an ImageBackground so that the View stays contained within the ImageBackground?

screenshot

i've tried about everything i can think of but nothing has helped. i suspect the issue has something to do with the dimensions of the ImageBackground not being set properly and actually extending past the edge of the screen. when i comment out the line that says width: Dimensions.get('screen').width, in styles.board in BoardView.js, the image for the ImageBackground also fills up the same too-big space.

here is views/Game.js:

import 'react-native-gesture-handler';
import React, { Component } from 'react';
import {
  SafeAreaView,
  View,
  StyleSheet,
  Platform,
  StatusBar,
} from 'react-native';

import { BoardView } from '../components/BoardView';
import { Navbar } from '../components/Navbar';


export function Game () {
    const styles = StyleSheet.create({
        mainContainer: {
            flex: 1,
            backgroundColor: 'white',
            justifyContent: 'center',
            alignItems: 'center',
            paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
        },
        bottomBar: {
            flex: 2,
            width: '100%',
            backgroundColor: 'black',
            justifyContent: 'center',
        },
    });
    return (
        <SafeAreaView style={styles.mainContainer}>
            <Navbar />

            <BoardView />

            <View style={styles.bottomBar}>
                
            </View>
        </SafeAreaView>
    );
}

here is components/BoardView.js:

import React, { Component } from 'react';
import {
    StyleSheet,
    ImageBackground,
    Dimensions
} from 'react-native';

import { Pieces } from "./Pieces";


export function BoardView () {
    const styles = StyleSheet.create({
        board: {
            flex: 10,
            width: Dimensions.get('screen').width,
        },
    });
    return (
        <ImageBackground
            resizeMode='contain'
            style={styles.board}
            source={require('../assets/board.png')}
        >
            <Pieces />
        </ImageBackground>
    );
}

here is components/Pieces.js:

import 'react-native-gesture-handler';
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
} from 'react-native';


export function Pieces () {
    const styles = StyleSheet.create({
        grid: {
            borderColor: 'green',
            borderWidth: 5,
            alignSelf: 'center',
            aspectRatio: 1,
            overflow: 'visible',
            width: '100%',
            height: '100%',
        },
        gridRow: {
            flexDirection: 'row',
            flex: 1,
        },
        gridTile: {
            borderWidth: 1,
            borderColor: 'green',
            flex: 1,
            height: '100%',
        },
        test: {
            color: 'green',
        },
    });

    let pieces = [
        [['bRook'],['bKnight'],['bBishop'],['bQueen'],['bKing'],['bBishop'],['bKnight'],['bRook']],
        [['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn'],['bPawn']],
        [[''],[''],[''],[''],[''],[''],[''],['']],
        [[''],[''],[''],[''],[''],[''],[''],['']],
        [[''],[''],[''],[''],[''],[''],[''],['']],
        [[''],[''],[''],[''],[''],[''],[''],['']],
        [['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn'],['wPawn']],
        [['wRook'],['wKnight'],['wBishop'],['wQueen'],['wKing'],['wBishop'],['wKnight'],['wRook']],

    ];

    return (
       <View style={styles.grid}>
            {pieces.map((row, index) =>(
                <View style={styles.gridRow} key={index}>
                    {row.map((tile, index) => (
                        <View style={styles.gridTile} key={index}>
                            <Text style={styles.test}>
                                {tile}
                            </Text>
                        </View>
                    ))}
                </View>
            ))}
       </View>
    );
}

how do i set the style so that the View stays contained within the ImageBackground? thank you very much for your help!