How do i get my in app screenshot to work properly

Question

So i was trying to implement a screen shot when the share button is pressed, but i want the share button to be out of the shot. it works on ios the screenshot, but tyhe share button appears in the image, then it doesnt work at all on android , it shows failed to capture screen or something . heres the code:

const DailyQuote = () => {
  const imagePath =
    'https://images.unsplash.com/photo-1662329219657-ad19333b0c7b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';

  const [fontsLoaded] = useFonts({
    Poppins_500Medium,
    Poppins_700Bold,
    NotoSerif_400Regular,
    NotoSerif_700Bold,
  });



  const [isSharing, setIsSharing] = useState(false);
  const captureViewRef = useRef(null);

  const handleShare = async () => {
    setIsSharing(true);

    if (Platform.OS === 'android' && Platform.Version >= 23) {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
        {
          title: 'Storage Permission',
          message: 'This app needs access to your device storage to save screenshots.',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        }
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        setIsSharing(false);
        console.log('Storage permission denied.');
        return;
      }
    }

    try {
      const screenshotURI = await captureRef(captureViewRef, {
        format: 'jpg',
        quality: 0.8,
      });

      try {
        await Share.share({
          message: '',
          url: `file://${screenshotURI}`, // Use file:// protocol for local files
        });
      } catch (error) {
        console.error('Error sharing screenshot:', error);
      }

      console.log('Screenshot captured:', screenshotURI);
    } catch (error) {
      console.error('Error capturing screenshot:', error);
    } finally {
      setIsSharing(false);
    }
  };

  return (
    <View style={styles.container} ref={captureViewRef}>
      
       <Image source={{ uri: imagePath }} style={styles.backgroundImage} />
        <View style={styles.overlay} />
        <Image style={styles.image} source={require('@/assets/images/wlogo.png')}/>
        <View style={styles.textContainer}>
          <Text style={styles.quoteText}>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque tenetur beatae, itaque dolore possimus eveniet.</Text>
          <Text style={styles.quoteAuthor}>Anonymous</Text>
        </View>

      {!isSharing && (
        <TouchableOpacity activeOpacity={0.9} style={styles.card} onPress={handleShare}>
          <Text style={{color: '#fff', fontFamily: 'Poppins_700Bold', fontSize: 15}}>SHARE QUOTE</Text>
        </TouchableOpacity>
      )}

      {!isSharing && (
        <Link href='/(tabs)'>
        <Text style={{ color:Colors.textGrey, fontFamily: 'Poppins_500Medium', fontSize: 15}}>TAP HERE TO GO BACK</Text>
        </Link>
      )}

    </View>
  )
}
  

export default DailyQuote