Image Screen crashes app on android

[shelbycrosbee]

Please provide the following:

1. SDK Version: 46.0.16
2. Platforms(Android/iOS/web/all): Android
3. Add the appropriate “Tag” based on what Expo library you have a question on.
   ScrollView, Image, Platform.OS

Having an issue where my app is crashing on Android only when trying to navigate to this file. The error message is error while updating property ‘flex’ in shadow node of type rtcview

import React, { useState, useEffect } from "react";
import {
	Dimensions,
	Image,
	ScrollView,
	StyleSheet,
	View,
	Platform,
	TouchableOpacity,
	Text,
} from "react-native";
import { Asset } from "expo-asset";
import { manipulateAsync } from "expo-image-manipulator";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";

export default function TrailMap() {
	const [ready, setReady] = useState(false);
	const [image, setImage] = useState(null);
	const [rotated, setRotated] = useState(false);
	const { width, height } = Dimensions.get("window");

	useEffect(() => {
		(async () => {
			const image = Asset.fromModule(require("../assets/trailmap-2022.jpg"));
			await image.downloadAsync();
			setImage(image);
			setReady(true);
		})();
	}, []);

	const _rotate90 = async () => {
		const manipResult = await manipulateAsync(image.localUri || image.uri, [
			{ rotate: 90 },
		]);
		setImage(manipResult);
		setRotated(true);
	};
	const _rotate270 = async () => {
		const manipResult = await manipulateAsync(image.localUri || image.uri, [
			{ rotate: 270 },
		]);
		setImage(manipResult);
		setRotated(false);
	};

	const _renderImage = () => (
		<View style={styles.imageContainer}>
			{Platform.OS === "ios" ? (
				<ScrollView
					maximumZoomScale={3}
					minimumZoomScale={0.5}
          bouncesZoom={ false }
				>
					<Image
						source={{ uri: image.localUri || image.uri }}
						style={{
							width: 2 * width,
              height,

						}}
						resizeMode="contain"
					/>
				</ScrollView>
      ) : ( 
      

          <ScrollView>
            {  console.log( Platform.OS )}
					<ScrollView horizontal>
						<Image
							source={{ uri: image.localUri || image.uri }}
							style={{
								width,
								height,
							}}
							resizeMode="contain"
						/>
					</ScrollView>
				</ScrollView>
			)}
		</View>
	);

	return (
		<View style={styles.container}>
			{ready && image && _renderImage()}
			{!rotated ? (
				<TouchableOpacity onPress={_rotate90}>
					<View style={styles.button}>
						<Text style={styles.buttonText}>
							Rotate Map&emsp;
							<FontAwesomeIcon
								icon="fa-regular fa-rotate"
								size={24}
								color={"#8ea6b5"}
							/>
						</Text>
					</View>
				</TouchableOpacity>
			) : (
				<View style={styles.button}>
					<TouchableOpacity onPress={_rotate270}>
						<Text style={styles.buttonText}>
							Rotate Map&emsp;
							<FontAwesomeIcon
								icon="fa-regular fa-rotate"
								size={24}
								color={"#8ea6b5"}
							/>
						</Text>
					</TouchableOpacity>
				</View>
			)}
		</View>
	);
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: "center",
		justifyContent: "center",
	},
	titleText: {
		fontSize: 14,
		lineHeight: 24,
		fontWeight: "bold",
	},

	imageContainer: {
		marginVertical: 10,
		alignItems: "center",
		justifyContent: "center",
	},
	image: {
		width: 300,
		height: 300,
		resizeMode: "contain",
	},
	button: {
		flex: "row",
		marginBottom: 70,
		paddingTop: 2,
		paddingBottom: 16,
	},
	buttonText: {
		fontSize: 17,
		textAlign: "center",
		fontFamily: "Regular",
		color: "#8ea6b5",
	},
});