react native download

gistfile1.js

import React from 'react';
import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
import { WebView } from 'react-native-webview';
import RNFS from 'react-native-fs';

const App = () => {
  // save image
  const SaveToPhone = async (data: string) => {
    // get the base64 image string
    const imageData = data.split('data:image/png;base64,')[1];
    // get the image file path
    const imagePath = `${RNFS.PicturesDirectoryPath}receipt.png`;
    // save the base64 image as a png
    RNFS.writeFile(imagePath, imageData, 'base64').then(() => console.log('Image saved at ' + imagePath));
  };

  const handleOnMessage = (event) => {
    if (event && event.nativeEvent && event.nativeEvent.data) {
      const data = JSON.parse(event.nativeEvent.data);
      if (data.type === 'download') {
        SaveToPhone(data.url);
      } else {
        //close menu postmessage event
      }
    }
  };
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.title}> TEST WESTERN UNION </Text>
        <Button title="BUTTON TEST" onPress={() => Alert.alert('Button pressed')} />
      </View>
      <WebView
        onMessage={handleOnMessage}
        source={{
          uri: 'https://checkout-western-union.dingdev.com/?token=4dbb1d13-aa7a-42c3-9c20-ca9d318e9e96-1675329657685&customerURL=https://www3.westernunion.com/mbreload/v1/partner/customer'
        }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16
  },
  title: {
    textAlign: 'center',
    marginVertical: 8
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth
  }
});

export default App;