react -> react-native: automatically request permission on Android when import file

Author: flyskywhy

README.md

@@ -33,7 +33,7 @@ Android iOS Web pixel drawing editor APP and sub-app that comes in handy when cr
 `npm run build-web-PixelShapeRN` to generate files in `build/` for production to deploy to `https://foo.bar.com/PixelShapeRN/`, e.g. [https://flyskywhy.github.io/PixelShapeRN/](https://flyskywhy.github.io/PixelShapeRN/) .
 
 ## permission
-To import gif file, you need manually allow storage permission with PixelShapeRN APP in OS settings. To let your APP has chance to choose which permission lib e.g. `react-native-permissions` or `expo-permissions` and which version, there is no permission lib in PixelShapeRN, so for your APP embeded PixelShapeRN as sub-app, you APP need request permission e.g. `android.permission.READ_EXTERNAL_STORAGE` with [react-native-permissions](https://github.com/zoontek/react-native-permissions).
+PixelShapeRN will automatically request `('react-native').PermissionsAndroid` on Android when import or save file, so your iOS APP embeded PixelShapeRN as sub-app maybe need request permission with e.g. `react-native-permissions` or `expo-permissions`.
 
 ## be embeded as sub-app
 Ref to [Isolating Redux Sub-Apps](https://redux.js.org/usage/isolating-redux-sub-apps) and [Breaking out of Redux paradigm to isolate apps](https://gist.github.com/gaearon/eeee2f619620ab7b55673a4ee2bf8400), PixelShapeRN can be embeded into other react-native APP easily.

src/components/apptoolbox/Apptoolbox.js

@@ -1,5 +1,11 @@
 import React, {Component} from 'react';
-import {Dimensions, Platform, StyleSheet, View} from 'react-native';
+import {
+  Dimensions,
+  PermissionsAndroid,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
 import RNSystemFileBrower from 'react-native-system-file-browser';
 // import decorateWithKeyBindings from '../../helpers/KeyBindings';
 
@@ -70,7 +76,29 @@ class Apptoolbox extends Component {
     this.context.refApptoolbox && this.context.refApptoolbox(this);
   }
 
-  importFile() {
+  async importFile() {
+    if (Platform.OS === 'android') {
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
+          {
+            // if user allow fisrt in APP, then manually disallow in OS setting,
+            // then will show below message
+            title: 'Read External Storage Permission',
+            message: 'Your app needs this permission to import file.',
+            buttonNeutral: 'Ask Me Later',
+            buttonNegative: 'Cancel',
+            buttonPositive: 'OK',
+          },
+        );
+        if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
+          return false;
+        }
+      } catch (err) {
+        return false;
+      }
+    }
+
     const params = Platform.OS === 'android' ? {types: 'image/gif'} : undefined;
     RNSystemFileBrower.openFileBrower(params).then((res) => {
       if (res && typeof res.url === 'string') {

src/components/modals/Downloadproject/Downloadproject.js

@@ -160,6 +160,8 @@ class DownloadProjectModal extends Component {
                 const granted = await PermissionsAndroid.request(
                   PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                   {
+                    // if user allow fisrt in APP, then manually disallow in OS setting,
+                    // then will show below message
                     title: 'Write External Storage Permission',
                     message: 'Your app needs this permission to save file.',
                     buttonNeutral: 'Ask Me Later',