Skip to content

Commit

Permalink
Use React hooks for example app
Browse files Browse the repository at this point in the history
  • Loading branch information
@zoontek
zoontek committed Oct 16, 2021
1 parent 4236bed commit fcfa37c
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 124 deletions.
222 changes: 99 additions & 123 deletions example/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import {AppState, Platform, ScrollView, StatusBar, Text, View} from 'react-native';
import {Appbar, List, TouchableRipple} from 'react-native-paper';
import RNPermissions, {
Expand Down Expand Up @@ -39,75 +39,48 @@ const icons: {[key: string]: string} = {
limited: 'alpha-l-circle',
};

const PermissionRow = ({
name,
status,
onPress,
}: {
name: string;
status: string;
onPress: () => void;
}) => (
<TouchableRipple onPress={onPress} accessible={true} accessibilityLabel={`${name}:${status}`}>
<List.Item
right={() => <List.Icon color={colors[status]} icon={icons[status]} />}
title={name}
description={status}
/>
</TouchableRipple>
);

type State = {
statuses: Partial<Record<Permission, PermissionStatus>>;
notifications: NotificationsResponse;
};

export default class App extends React.Component<{}, State> {
state: State = {
statuses: {},
notifications: {status: 'unavailable', settings: {}},
};
export const App = () => {
const [statuses, setStatuses] = React.useState<Partial<Record<Permission, PermissionStatus>>>({});
const [notifications, setNotifications] = React.useState<NotificationsResponse>({
settings: {},
status: 'unavailable',
});

check = () =>
const check = React.useCallback(() => {
RNPermissions.checkMultiple(PERMISSIONS_VALUES)
.then((statuses) => this.setState({statuses}))
.then(setStatuses)
.then(() => RNPermissions.checkNotifications())
.then((notifications) => this.setState({notifications}))
.then(setNotifications)
.catch((error) => console.warn(error));
}, []);

refresh = () => {
this.setState({statuses: {}}, this.check);
};

componentDidMount() {
this.check();
AppState.addEventListener('change', this.check);
}

componentWillUnmount() {
AppState.removeEventListener('change', this.check);
}

render() {
const {notifications} = this.state;
const {settings} = notifications;
React.useEffect(() => {
const {remove} = AppState.addEventListener(
'change',
(status) => status === 'active' && check(),
);

return (
<View style={{flex: 1, backgroundColor: theme.colors.background}}>
<StatusBar backgroundColor={theme.colors.primary} barStyle="light-content" />
return remove;
}, [check]);

<Appbar.Header>
<Appbar.Content title="react-native-permissions" subtitle="Example application" />
return (
<View style={{flex: 1, backgroundColor: theme.colors.background}}>
<StatusBar backgroundColor={theme.colors.primary} barStyle="light-content" />

<Appbar.Action onPress={this.refresh} icon="refresh" />
<Appbar.Header>
<Appbar.Content title="react-native-permissions" subtitle="Example application" />
<Appbar.Action onPress={check} icon="refresh" />

{Platform.OS === 'ios' && (
<Appbar.Action
icon="image-multiple"
onPress={() => {
RNPermissions.openLimitedPhotoLibraryPicker();
}}
/>
)}

{Platform.OS === 'ios' && (
<Appbar.Action
icon="crosshairs-question"
onPress={() => {
Expand All @@ -116,75 +89,78 @@ export default class App extends React.Component<{}, State> {
}).then((accuracy) => console.warn({accuracy}));
}}
/>

<Appbar.Action
icon="cellphone-cog"
onPress={() => {
RNPermissions.openSettings();
}}
/>
</Appbar.Header>

<ScrollView>
{PERMISSIONS_VALUES.map(this.renderPermissionItem)}

<View style={{backgroundColor: '#e0e0e0', height: 1}} accessibilityRole="none" />

<TouchableRipple
onPress={() => {
RNPermissions.requestNotifications(['alert', 'badge', 'sound'])
.then(() => this.check())
.catch((error) => console.error(error));
}}>
<>
)}

<Appbar.Action
icon="cellphone-cog"
onPress={() => {
RNPermissions.openSettings();
}}
/>
</Appbar.Header>

<ScrollView>
{PERMISSIONS_VALUES.map((item, index) => {
const value = PERMISSIONS_VALUES[index];
const status = statuses[value];

if (!status) {
return null;
}

return (
<TouchableRipple
key={item}
onPress={() => {
RNPermissions.request(value)
.then(check)
.catch((error) => console.error(error));
}}
>
<List.Item
title="NOTIFICATIONS"
right={() => (
<List.Icon
color={colors[notifications.status]}
icon={icons[notifications.status]}
/>
)}
right={() => <List.Icon color={colors[status]} icon={icons[status]} />}
title={item}
description={status}
/>

{Platform.OS === 'ios' && (
<Text style={{margin: 15, marginTop: -24, color: '#777'}}>
{`alert: ${settings.alert}\n`}
{`badge: ${settings.badge}\n`}
{`sound: ${settings.sound}\n`}
{`carPlay: ${settings.carPlay}\n`}
{`criticalAlert: ${settings.criticalAlert}\n`}
{`provisional: ${settings.provisional}\n`}
{`lockScreen: ${settings.lockScreen}\n`}
{`notificationCenter: ${settings.notificationCenter}\n`}
</Text>
</TouchableRipple>
);
})}

<View style={{backgroundColor: '#e0e0e0', height: 1}} />

<TouchableRipple
onPress={() => {
RNPermissions.requestNotifications(['alert', 'badge', 'sound'])
.then(check)
.catch((error) => console.error(error));
}}
>
<>
<List.Item
title="NOTIFICATIONS"
right={() => (
<List.Icon
color={colors[notifications.status]}
icon={icons[notifications.status]}
/>
)}
</>
</TouchableRipple>
</ScrollView>
</View>
);
}

renderPermissionItem = (item: Permission, index: number) => {
const value = PERMISSIONS_VALUES[index];
const status = this.state.statuses[value];

if (!status) {
return null;
}

return (
<PermissionRow
status={status}
key={item}
name={item}
onPress={() => {
RNPermissions.request(value)
.then(() => this.check())
.catch((error) => console.error(error));
}}
/>
);
};
}
/>

{Platform.OS === 'ios' && (
<Text style={{margin: 15, marginTop: -24, color: '#777'}}>
{`alert: ${notifications.settings.alert}\n`}
{`badge: ${notifications.settings.badge}\n`}
{`sound: ${notifications.settings.sound}\n`}
{`carPlay: ${notifications.settings.carPlay}\n`}
{`criticalAlert: ${notifications.settings.criticalAlert}\n`}
{`provisional: ${notifications.settings.provisional}\n`}
{`lockScreen: ${notifications.settings.lockScreen}\n`}
{`notificationCenter: ${notifications.settings.notificationCenter}\n`}
</Text>
)}
</>
</TouchableRipple>
</ScrollView>
</View>
);
};
2 changes: 1 addition & 1 deletion example/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import {Provider as PaperProvider} from 'react-native-paper';
import {AppRegistry} from 'react-native';
import App from './App';
import {App} from './App';
import {name as appName} from './app.json';
import theme from './theme';

Expand Down

0 comments on commit fcfa37c

Please sign in to comment.