Background Image Covers Up the Image

[griffinbaker12]

Hey! Just noticed that when trying to change the background color, the background color will cover over the image (https://gyazo.com/1bd6ee9145f823a5e0ef9952ca0825cf). The steps to reproduce this are just to download the package, import the Crop component, and then change the background color prop like so:

import { StackScreenProps } from "@react-navigation/stack" import { useEffect, useState } from "react"; import { View, Text, useWindowDimensions } from 'react-native' import Crop from "react-native-avatar-crop"; import { TouchableOpacity } from "react-native-gesture-handler"; import { AppStackParamList } from "src/infra/navigation/AppNavigator" import { theme } from "src/infra/theme"; const CropPhoto = ({ navigation, route }: StackScreenProps<AppStackParamList, "CropPhoto">) => { const { image, type, background } = route.params;

const [uri, setUri] = useState("");

// let crop: (scale: number) => Promise<{ uri: string, width: number, height: number }>;

// const cropImage = async () => {
//     const { uri, width, height } = await crop(0.8);
//     setUri(uri);
// };

const dimensions = useWindowDimensions();

return <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Crop
        source={{ uri: image }}
        cropShape={type === "profile" ? "circle" : "rect"}
        height={dimensions.height - 200}
        width={dimensions.width}
        cropArea={{
            width: dimensions.width / 1.1,
            height: dimensions.width / 1.1,
        }}
        borderWidth={1}
        maxZoom={8}
        onCrop={(cropCallback) => { }}
    />
    <TouchableOpacity onPress={() => navigation.goBack()} style={{
        backgroundColor: "#F00",
        height: 50,
        width: 50
    }}>
        <Text>Save</Text>
    </TouchableOpacity>
</View>

} export default CropPhoto

[griffinbaker12]

Ok, got it, you do have to set the color to 6 hex digits, was only using 3!