diff --git a/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js b/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js
index d1585d97105e99..0ef31bb25d4693 100644
--- a/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js
+++ b/packages/rn-tester/js/examples/PermissionsAndroid/PermissionsExample.js
@@ -10,96 +10,125 @@
'use strict';
-const React = require('react');
+import * as React from 'react';
-const {
- PermissionsAndroid,
- Picker,
- StyleSheet,
- Text,
- TouchableWithoutFeedback,
- View,
-} = require('react-native');
+import {PermissionsAndroid, StyleSheet, Text, View} from 'react-native';
+import RNTOption from '../../components/RNTOption';
+import RNTesterButton from '../../components/RNTesterButton';
-const Item = Picker.Item;
+function PermissionsExample() {
+ const [permission, setPermission] = React.useState(
+ PermissionsAndroid.PERMISSIONS.CAMERA,
+ );
+ const [hasPermission, setHasPermission] = React.useState('Not Checked');
-class PermissionsExample extends React.Component<{...}, $FlowFixMeState> {
- state = {
- permission: PermissionsAndroid.PERMISSIONS.CAMERA,
- hasPermission: 'Not Checked',
+ const requestPermission = async () => {
+ let result;
+ try {
+ result = await PermissionsAndroid.request(permission, {
+ title: 'Permission Explanation',
+ message:
+ 'The app needs the following permission ' +
+ permission +
+ ' because of reasons. Please approve.',
+ });
+ setHasPermission(result + ' for ' + permission);
+ } catch (e) {
+ throw e;
+ }
};
- render() {
- return (
-
- Permission Name:
-
- - {
+ let result;
+ try {
+ result = await PermissionsAndroid.check(permission);
+ } catch (e) {
+ throw e;
+ }
+ setHasPermission(`${result ? 'Granted' : 'Revoked'} for ${permission}`);
+ };
+
+ return (
+
+
+ Select Permission
+
+ setPermission(PermissionsAndroid.PERMISSIONS.CAMERA)}
+ selected={permission === PermissionsAndroid.PERMISSIONS.CAMERA}
+ style={styles.option}
/>
-
-
+ setPermission(PermissionsAndroid.PERMISSIONS.READ_CALENDAR)
+ }
+ selected={
+ permission === PermissionsAndroid.PERMISSIONS.READ_CALENDAR
+ }
+ style={styles.option}
/>
-
-
+ setPermission(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION)
+ }
+ selected={
+ permission === PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
+ }
+ style={styles.option}
/>
-
-
-
-
- Check Permission
-
-
-
-
- Permission Status: {this.state.hasPermission}
-
-
-
-
- Request Permission
-
-
-
+
- );
- }
-
- _onSelectPermission = (permission: string | number) => {
- this.setState({
- permission: permission,
- });
- };
-
- _checkPermission = async () => {
- let result = await PermissionsAndroid.check(this.state.permission);
- this.setState({
- hasPermission:
- (result ? 'Granted' : 'Revoked') + ' for ' + this.state.permission,
- });
- };
-
- _requestPermission = async () => {
- let result = await PermissionsAndroid.request(this.state.permission, {
- title: 'Permission Explanation',
- message:
- 'The app needs the following permission ' +
- this.state.permission +
- ' because of reasons. Please approve.',
- });
-
- this.setState({
- hasPermission: result + ' for ' + this.state.permission,
- });
- };
+
+
+ Check Permission
+
+
+
+
+
+ Request Permission
+
+
+
+ Permission Status: {hasPermission}
+
+ );
}
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: 'white',
+ },
+ block: {
+ borderColor: 'rgba(0,0,0, 0.1)',
+ borderBottomWidth: 1,
+ padding: 6,
+ },
+ row: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ },
+ title: {
+ fontWeight: 'bold',
+ },
+ text: {
+ fontSize: 20,
+ },
+ touchable: {
+ color: '#007AFF',
+ },
+ option: {
+ margin: 6,
+ },
+});
+
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = 'PermissionsAndroid';
@@ -113,19 +142,3 @@ exports.examples = [
render: (): React.Node => ,
},
];
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: 'white',
- },
- text: {
- margin: 10,
- },
- touchable: {
- color: '#007AFF',
- },
- picker: {
- flex: 1,
- },
-});