Estoy trabajando en un juego con mi hermano. No pretende ser elegante ni nada por el estilo, así que no te rías de los gráficos muy pobres. Hemos creado un mapa con un fondo de hierba y un "Área de minería" que está diseñado para que puedas tocar e ingresar a la "Mina".

El problema que tengo es que al escalar la Vista de desplazamiento hacia abajo (escala establecida en 0.6) me queda una gran cantidad de borde negro a su alrededor. Quiero que la Vista de desplazamiento ocupe el espacio que deja el borde negro alrededor de la Vista de desplazamiento.

Problema de escala

El centro de la imagen es la vista de desplazamiento. Quiero que la Vista de desplazamiento ocupe el espacio negro que la rodea.

Intenté configurar el ancho y alto de la vista de desplazamiento al 100%... Esto no hace la diferencia. Establecer el ancho manualmente con píxeles cambiará el ancho y el alto, pero luego usará el posicionamiento absoluto y moverá las imágenes hacia la parte superior izquierda, lo que dejó: 0 y arriba: 0 no lo mueve hacia arriba ni lo mueve hacia la izquierda y en ese momento se convierte en un juego de adivinanzas con los diferentes tamaños de pantalla. Intenté usar React Native Dimensions, y esto tiene el mismo efecto que establecer el Ancho y el Alto al 100%.

Esto es lo que tengo hasta ahora...

 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;

¿Alguien más ha encontrado una solución para esto?

Editar: olvidé mencionar que estoy usando componentes con estilo si alguien se lo preguntaba.

Gracias