Masked View is clipping masked element

[Jiroscopes]

I've been stuck on this issue where my text is being clipped by the masked view. I do not understand why. I am only testing on IOS. Latest version of masked-view

"expo": "~52.0.23",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.5"

Image of issue:

Here is my code:

import { SafeAreaView } from 'react-native-safe-area-context';
import { LinearGradient } from 'expo-linear-gradient';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '~/components/ui/card';
import { Text } from '~/components/ui/text';
import MaskedView from '@react-native-masked-view/masked-view';
import { View } from 'react-native';

export default function HomeScreen() {
    return (
        <SafeAreaView className='flex-1 items-center pt-10'>
            <Card className='w-full max-w-sm'>
                <CardHeader>
                    <CardTitle className='font-Inter text-base'>Card Title</CardTitle>
                </CardHeader>
                <CardContent>
                    <MaskedView
                        maskElement={
                            <View
                                style={{
                                    // Transparent background because mask is based off alpha channel.
                                    backgroundColor: 'transparent',
                                    flex: 1,
                                    justifyContent: 'center',
                                }}
                            >
                                <Text style={{ fontSize: 30 }}>69%</Text>
                            </View>
                        }
                    >
                        <LinearGradient
                            pointerEvents={'none'}
                            start={{ x: 0, y: 0 }}
                            end={{ x: 1, y: 1 }}
                            colors={['red', 'blue']}
                        >
                            <View
                                style={{
                                    opacity: 0,
                                }}
                            >
                                <Text style={{ opacity: 0, fontSize: 200 }}>69%</Text>
                            </View>
                        </LinearGradient>
                    </MaskedView>
                    <Text className="text-base">Card Content</Text>
                </CardContent>
            </Card>
        </SafeAreaView >
    );
};

[arghhhhh]

Having this same issue