Author: Mubarak Hossain

npm install react-native-view-shot --save
npm install @react-native-community/cameraroll --save

//On iOS, you might have to:
cd ios && pod install && cd ..

npx react-native link react-native-view-shot
npx react-native link @react-native-community/cameraroll

//viewRefs is View container what area you want to share or download.
const viewRefs = React.useMemo(
	() => userDataList.map(()=> React.createRef()),
	[userDataList.join(',')]
);

// download image
const downloadImage = async (index) => {
	try {
	  let viewCurrentImgRef = viewRefs[index].current;

	  // react-native-view-shot caputures component
	  const uri = await captureRef(viewCurrentImgRef, {
		  format: 'png',
		  quality: 0.8,
	  });

	  if (Platform.OS === 'android') {
		  const granted = await getPermissionAndroid();
		  if (!granted) {
			  return;
		  }
	  }

	  // cameraroll saves image
	  const image = CameraRoll.save(uri, 'photo');
	  if (image) {
			Alert.alert('Image saved', 'Successfully saved image to your gallery.',
				[{text: 'OK', onPress: () => {}}],
				{cancelable: false},
			);
	  }
	} catch (error) {
		console.log('error', error);
	}
};

// get permission on android
const getPermissionAndroid = async () => {
	try {
	  const granted = await PermissionsAndroid.request(
		PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
		{
		  title: 'Image Download Permission',
		  message: 'Your permission is required to save images to your device',
		  buttonNegative: 'Cancel',
		  buttonPositive: 'OK',
		},
	  );
	  if (granted === PermissionsAndroid.RESULTS.GRANTED) {
		  return true;
	  }
	  Alert.alert('Permission required', 'Permission is required to save images to your device',
		  [{text: 'OK', onPress: () => {}}],
		  {cancelable: false},
	  );
	} catch (err) {
	  // handle error as you please
	  //console.log('err', err);
	  Alert.alert('Save remote image', 'Failed to save Image: ' + err.message,
		  [{text: 'OK', onPress: () => console.log('OK Pressed')}],
		  {cancelable: false},
	  );
	}
};

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

<application
.....
android:requestLegacyExternalStorage="true"
.....
>

import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, View, PermissionsAndroid, Alert, Platform, TouchableOpacity } from 'react-native';
import { captureRef } from 'react-native-view-shot';
import CameraRoll from '@react-native-community/cameraroll';
import AntDesign from 'react-native-vector-icons/AntDesign';

const userDataList = [{id: 1, name: "Name One", email: "user1@extendfeature.com", phone: "+8801xxxxxxxx1", balance: 50},
        {id: 2, name: "Name Two", email: "user2@extendfeature.com", phone: "+8801xxxxxxxx2", balance: 30},
        {id: 3, name: "Name Three", email: "user3@extendfeature.com", phone: "+8801xxxxxxxx3", balance: 10},
        {id: 4, name: "Name Four", email: "user4@extendfeature.com", phone: "+8801xxxxxxxx4", balance: 40},
        {id: 5, name: "Name Five", email: "user5@extendfeature.com", phone: "+8801xxxxxxxx5", balance: 70},
        {id: 6, name: "Name Six", email: "user6@extendfeature.com", phone: "+8801xxxxxxxx6", balance: 20},
        {id: 7, name: "Name Seven", email: "user7@extendfeature.com", phone: "+8801xxxxxxxx6", balance: 80}];

const App = ({ navigation }) => {
    //viewRefs is View container what area you want to share or download.
    const viewRefs = React.useMemo(
        () => userDataList.map(()=> React.createRef()),
        [userDataList.join(',')]
    );

    // get permission on android
    const getPermissionAndroid = async () => {
        try {
          const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
            {
              title: 'Image Download Permission',
              message: 'Your permission is required to save images to your device',
              buttonNegative: 'Cancel',
              buttonPositive: 'OK',
            },
          );
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
              return true;
          }
          Alert.alert('Permission required', 'Permission is required to save images to your device',
              [{text: 'OK', onPress: () => {}}],
              {cancelable: false},
          );
        } catch (err) {
          // handle error as you please
          //console.log('err', err);
          Alert.alert('Save remote image', 'Failed to save Image: ' + err.message,
              [{text: 'OK', onPress: () => console.log('OK Pressed')}],
              {cancelable: false},
          );
        }
    };

    // download image
    const downloadImage = async (index) => {
        try {
          let viewCurrentImgRef = viewRefs[index].current;

          // react-native-view-shot caputures component
          const uri = await captureRef(viewCurrentImgRef, {
              format: 'png',
              quality: 0.8,
          });

          if (Platform.OS === 'android') {
              const granted = await getPermissionAndroid();
              if (!granted) {
                  return;
              }
          }

          // cameraroll saves image
          const image = CameraRoll.save(uri, 'photo');
          if (image) {
                Alert.alert('Image saved', 'Successfully saved image to your gallery.',
                    [{text: 'OK', onPress: () => {}}],
                    {cancelable: false},
                );
          }
        } catch (error) {
            console.log('error', error);
        }
    };

    return (
        <SafeAreaView style={styles.safeAreaContainer}>
            <ScrollView contentContainerStyle={styles.scrollView}>
                <View style={styles.mainContainer}>
                    <Text style={{fontSize: 16, fontWeight: 'bold', marginTop: 10, marginBottom: 10}}>List of items</Text>
                    <View style={styles.userListWrapper}>
                        {userDataList.map((item, index)=>(
                            <View key={(index+1)} style={styles.userListRow}>
                                <View style={styles.userListViewRef} ref={viewRefs[index]}>
                                    <View style={styles.userListItem}>
                                        <View style={styles.userListCol}>
                                            <Text style={styles.userItemBoldText}>User ID: {item.id}</Text>
                                            <Text style={styles.userItemBoldText}>{item.name}</Text>
                                            <Text style={styles.userItemNormalText}>{item.email}</Text>
                                            <Text style={styles.userItemNormalText}>{item.phone}</Text>
                                        </View>
                                        <View style={[styles.userListCol, {alignItems: 'flex-end'}]}>
                                            <Text style={styles.userItemBoldText}>Balance</Text>
                                            <Text style={styles.userItemBoldText}>${parseFloat(item.balance).toFixed(2)}</Text>
                                        </View>
                                    </View>
                                    <View style={styles.userItemShareWrapper}>
                                        <View style={{ width: '50%', paddingLeft: 0, paddingRight: 8 }}>
                                            <TouchableOpacity style={styles.shareActionButton} onPress={()=> console.log('Click on Share button')}>
                                                <AntDesign name="sharealt" color={'#131313'} size={20} />
                                                <Text style={styles.shareActionLabel}>Share</Text>
                                            </TouchableOpacity>
                                        </View>
                                        <View style={{ width: '50%', paddingLeft: 8, paddingRight: 0 }}>
                                            <TouchableOpacity style={styles.shareActionButton} onPress={()=> downloadImage(index)}>
                                                <AntDesign name="download" color={'#131313'} size={20} />
                                                <Text style={styles.shareActionLabel}>Download</Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                </View>
                            </View>
                        ))}
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    safeAreaContainer: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
    scrollView: {
         flexGrow: 1,
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'flex-start',
    },
    mainContainer: {
         width: '100%',
         height: '100%',
         backgroundColor: '#e7ebf1',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'flex-start',
    },
    userListWrapper: {
        width: '100%',
        paddingLeft: 5,
        paddingRight: 5,
    },
    userListRow: {
        width: '100%',
        backgroundColor: '#dfdfdf',
        borderWidth: 3,
        borderColor: '#dfdfdf',
        marginBottom: 20,
    },
    userListViewRef: {
        width: '100%',
        backgroundColor: '#ffffff',
    },
    userListItem: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    userListCol: {
        width: '50%',
        alignItems: 'flex-start',
        justifyContent: 'center',
        paddingTop: 5,
        paddingBottom: 8,
        paddingLeft: 8,
        paddingRight: 8,
    },
    userItemBoldText: {
        fontSize: 17,
        color: '#313131',
        fontWeight: 'bold',
    },
    userItemNormalText: {
        fontSize: 15,
        color: '#313131',
        fontWeight: 'normal',
    },
    userItemShareWrapper: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderTopWidth: 2,
        borderColor: '#dfdfdf',
    },
    shareActionButton: {
        width: '100%',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 3,
        paddingBottom: 3,
    },
    shareActionLabel: {
        fontWeight: 'normal',
        fontSize: 12,
        color: '#006c85',
        textAlign: 'center',
        lineHeight: 14,
    },
});

export default App;

npx react-native run-android