Integrate Firebase Storage and Image Picker in React Native

1# Install the storage module
2npm install @react-native-firebase/storage
3
4# setup iOS project
5cd ios && pod install --repo-update && cd ..

1rules_version = '2';
2service firebase.storage {
3  match /b/{bucket}/o {
4    match /{allPaths=**} {
5      allow read, write;
6    }
7  }

1npm install react-native-image-picker
2cd ios && pod install && cd ..

1<uses-permission android:name="android.permission.CAMERA" />
2<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

1<plist version="1.0">
2  <dict>
3    <key>NSPhotoLibraryUsageDescription</key>
4    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
5    <key>NSCameraUsageDescription</key>
6    <string>$(PRODUCT_NAME) would like to use your camera</string>
7    <key>NSPhotoLibraryAddUsageDescription</key>
8    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
9    </dict>
10</plist>

1#android
2cd android && ./gradlew clean && cd ..
3#iOS
4cd ios && xcodebuild clean && cd ..

1chooseFile = () => {
2    this.setState({ status: '' });
3    var options = {
4        title: 'Select Image',
5        storageOptions: {
6            skipBackup: true, // do not backup to iCloud
7            path: 'images', // store camera images under Pictures/images for android and Documents/images for iOS
8        },
9    };
10    ImagePicker.showImagePicker(options, response => {
11        if (response.didCancel) {
12            console.log('User cancelled image picker', storage());
13        } else if (response.error) {
14            console.log('ImagePicker Error: ', response.error);
15        } else if (response.customButton) {
16            console.log('User tapped custom button: ', response.customButton);
17        } else {
18            let path = this.getPlatformPath(response).value;
19        }
20    });
21};
22
23/**
24 * Get platform specific value from response
25 */
26getPlatformPath({ path, uri }) {
27    return Platform.select({
28        android: { "value": path },
29        ios: { "value": uri }
30    })
31}

1// App.js
2/**
3 * @author Pavneet Singh
4 */
5
6import React from "react";
7import {
8    StyleSheet,
9    View,
10    Button,
11    Image,
12    ActivityIndicator,
13    Platform,
14    SafeAreaView,
15    Text,
16} from "react-native";
17import storage from '@react-native-firebase/storage';
18import ImagePicker from 'react-native-image-picker';
19export default class App extends React.Component {
20
21    state = {
22        // placeholder image
23        imagePath: require("./img/default.jpg")
24    }
25
26    chooseFile = () => {
27        var options = {
28            title: 'Select Image',
29            storageOptions: {
30                skipBackup: true, // do not backup to iCloud
31                path: 'images', // store camera images under Pictures/images for android and Documents/images for iOS
32            },
33        };
34        ImagePicker.showImagePicker(options, response => {
35            if (response.didCancel) {
36                console.log('User cancelled image picker', storage());
37            } else if (response.error) {
38                console.log('ImagePicker Error: ', response.error);
39            } else if (response.customButton) {
40                console.log('User tapped custom button: ', response.customButton);
41            } else {
42                let path = this.getPlatformPath(response).value;
43                let fileName = this.getFileName(response.fileName, path);
44                this.setState({ imagePath: path });
45            }
46        });
47    };
48
49    /**
50     * Get the file name and handle the invalid null case
51     */
52    getFileName(name, path) {
53        if (name != null) { return name; }
54
55        if (Platform.OS === "ios") {
56            path = "~" + path.substring(path.indexOf("/Documents"));
57        }
58        return path.split("/").pop();
59    }
60
61    /**
62     * Get platform specific value from response
63     */
64    getPlatformPath({ path, uri }) {
65        return Platform.select({
66            android: { "value": path },
67            ios: { "value": uri }
68        })
69    }
70
71    /**
72     * Get platform-specific Uri with the required format
73     */
74    getPlatformURI(imagePath) {
75        let imgSource = imagePath;
76        if (isNaN(imagePath)) {
77            imgSource = { uri: this.state.imagePath };
78            if (Platform.OS == 'android') {
79                imgSource.uri = "file:///" + imgSource.uri;
80            }
81        }
82        return imgSource
83    }
84
85    render() {
86        let { imagePath } = this.state;
87        let imgSource = this.getPlatformURI(imagePath)
88        return (
89            <SafeAreaView style={styles.container}>
90                <View style={styles.imgContainer}>
91                    <Image style={styles.uploadImage} source={imgSource} />
92                    <View style={styles.eightyWidthStyle} >
93                        <Button title={'Upload Image'} onPress={this.chooseFile}></Button>
94                    </View>
95                </View>
96            </SafeAreaView>
97        )
98    }
99}
100
101const styles = StyleSheet.create({
102    container: {
103        flex: 1,
104        width: '100%',
105        height: '100%',
106        backgroundColor: '#e6e6fa',
107    },
108    imgContainer: {
109        alignItems: 'center',
110        justifyContent: 'center',
111        position: 'absolute',
112        width: '100%',
113        height: '100%'
114    },
115    eightyWidthStyle: {
116        width: '80%',
117        margin: 2,
118    },
119    uploadImage: {
120        width: '80%',
121        height: 300,
122    },
123});