I'm working on a game with my brother. It's not meant to be fancy or anything so don't laugh at the very poor graphics. We've created a map with a grass background and a "Mining Area" that is meant for you to be able to tap on and go inside the "Mine".

The problem that I'm having is when scaling the Scroll View down ( scale set to 0.6) I'm left with huge amount of black border surrounding it. I want the Scroll View to take up the space that the black border around the Scroll View is leaving.

Scale Problem

The center of the image is the Scroll View. I want the Scroll View to take the black space surrounding it.

I've tried setting the Scroll View Width and Height to 100%... This does not make a difference. Setting the Width manually with pixels will change the Width and Height but then your using positioning absolute and moving the images to the top left which left: 0 and top: 0 does not move it to the top nor does left move it to the left and at that point it becomes a guessing game with the different screen sizes. I've tried using React Native Dimensions, and this has the same effect as setting the Width and Height to 100%.

Here is what I have so far...

import React, { useContext } from "react";
import styled from "styled-components/native";
import Context from "../store/player-context";
import BottomNavigationBar from "../Game-Components/BottomNavigationBar";
import TopGameBar from "../Game-Components/TopGameBar";
import { StatusBar } from "expo-status-bar";
import MineShaftPOI from "../Game-Components/POI/MineShaftPOI";
import { Dimensions } from "react-native";

const Game = () => {
const ctx = useContext(Context);

const handleScroll = (event) => {
const posX = Math.ceil(event.nativeEvent.contentOffset.x);
const poxY = Math.ceil(event.nativeEvent.contentOffset.y);

ctx.setScrollXY({ x: posX, y: poxY });
};

return (
<Wrapper>
  <StatusBar style="light" />
  <TopGameBar />
  <BackGroundContainer
    horizontal={true}
    scrollEnabled={ctx.scroll}
    bounces={false}
    onScroll={handleScroll}
  >
    <GrassBackGround
      source={require("../assets/images/grassMap.png")}
      resizeMode="stretch"
      transition={false}
      style={{ aspectRatio: 3 / 2 }}
    />
    <MineShaftPOI />
  </BackGroundContainer>
  <BottomNavigationBar />
</Wrapper>
);
};

const BackGroundContainer = styled.ScrollView`
transform: scale(0.6);
width: 100%;
height: 100%;
`;

 const GrassBackGround = styled.Image``;

 const Wrapper = styled.View`
 width: 100%;
 padding: 0;
 margin: 0;
 flex: 1;
 background-color: #111111;
 `;

export default Game;

Has anyone else came up with a solution for this?

Edit: I forgot to mention I'm using styled-components if anyone was wondering.

Thanks