Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the document on how to configure ImagePicker on IOS and Android without getting permission error #90

Closed
1 task done
laukaichung opened this issue Aug 17, 2018 · 0 comments

Comments

@laukaichung
Copy link

laukaichung commented Aug 17, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

This feature could guide people on how to use ImagePicker without getting stuck or crashed on IOS and Android because of permission problems.

What does the proposed API look like?

Update the React Native ImagePicker section like this:

IOS Instructions:

Use Xcode to configure the following settings:

Make sure node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj has been imported to project libraries by following the libraries linking instructions. Don't forget to link the libRCTCamera.a into Link Binary with Binaries on your target's Build Phases. (Source: https://github.com/jeanpan/react-native-camera-roll-picker)

After iOS 10 you have to define and provide a usage description of all the system’s privacy-sensitive data accessed by your app in Info.plist. In the case of ImagePicker, you should go to the Info.plist panel,right click and add a row like this:

Key    :  Privacy - Photo Library Usage Description    
Value  :  $(PRODUCT_NAME) photo use (or anything you want to explain to the app user.)

Android Instructions:

In components that use ImagePicker, you should run a function to check the READ_EXTERNAL_STORAGE permission, preferably in the componentWillMount life cycle, for example:

export class ImagePickerWrapper extends React.Component {

    public render(){
        return <ImagePicker/>          
    }

    public async componentWillMount(){
        await requestReadExteralStorage();
    }
}

async function requestReadExteralStorage() {
    if (Platform.OS === 'android') {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
                {
                    'title': 'Permission To Load Photos From External Storage',
                    'message': 'Permissions have to be granted in order to list photos on your phones for you to choose.'
                }
            );

            if (granted === PermissionsAndroid.RESULTS.GRANTED) {

            } else {
                console.log("READ_EXTERNAL_STORAGE permission denied!")
            }
        } catch (err) {
            console.warn(err)
        }
    }
}

I wasn't familiar with the Native mobile development so I learnt from these permission issues the hard way. I hope the document update could save others' time and trouble.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant