Skip to content

Commit fcfa37c

Browse files
zoontekzoontek
committed
Use React hooks for example app
1 parent 4236bed commit fcfa37c

File tree

2 files changed

+100
-124
lines changed

2 files changed

+100
-124
lines changed

‎example/App.tsx‎

Lines changed: 99 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import * as React from 'react';
22
import {AppState, Platform, ScrollView, StatusBar, Text, View} from 'react-native';
33
import {Appbar, List, TouchableRipple} from 'react-native-paper';
44
import RNPermissions, {
@@ -39,75 +39,48 @@ const icons: {[key: string]: string} = {
3939
limited: 'alpha-l-circle',
4040
};
4141

42-
const PermissionRow = ({
43-
name,
44-
status,
45-
onPress,
46-
}: {
47-
name: string;
48-
status: string;
49-
onPress: () => void;
50-
}) => (
51-
<TouchableRipple onPress={onPress} accessible={true} accessibilityLabel={`${name}:${status}`}>
52-
<List.Item
53-
right={() => <List.Icon color={colors[status]} icon={icons[status]} />}
54-
title={name}
55-
description={status}
56-
/>
57-
</TouchableRipple>
58-
);
59-
60-
type State = {
61-
statuses: Partial<Record<Permission, PermissionStatus>>;
62-
notifications: NotificationsResponse;
63-
};
64-
65-
export default class App extends React.Component<{}, State> {
66-
state: State = {
67-
statuses: {},
68-
notifications: {status: 'unavailable', settings: {}},
69-
};
42+
export const App = () => {
43+
const [statuses, setStatuses] = React.useState<Partial<Record<Permission, PermissionStatus>>>({});
44+
const [notifications, setNotifications] = React.useState<NotificationsResponse>({
45+
settings: {},
46+
status: 'unavailable',
47+
});
7048

71-
check = () =>
49+
const check = React.useCallback(() => {
7250
RNPermissions.checkMultiple(PERMISSIONS_VALUES)
73-
.then((statuses) => this.setState({statuses}))
51+
.then(setStatuses)
7452
.then(() => RNPermissions.checkNotifications())
75-
.then((notifications) => this.setState({notifications}))
53+
.then(setNotifications)
7654
.catch((error) => console.warn(error));
55+
}, []);
7756

78-
refresh = () => {
79-
this.setState({statuses: {}}, this.check);
80-
};
81-
82-
componentDidMount() {
83-
this.check();
84-
AppState.addEventListener('change', this.check);
85-
}
86-
87-
componentWillUnmount() {
88-
AppState.removeEventListener('change', this.check);
89-
}
90-
91-
render() {
92-
const {notifications} = this.state;
93-
const {settings} = notifications;
57+
React.useEffect(() => {
58+
const {remove} = AppState.addEventListener(
59+
'change',
60+
(status) => status === 'active' && check(),
61+
);
9462

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

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

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

74+
{Platform.OS === 'ios' && (
10475
<Appbar.Action
10576
icon="image-multiple"
10677
onPress={() => {
10778
RNPermissions.openLimitedPhotoLibraryPicker();
10879
}}
10980
/>
81+
)}
11082

83+
{Platform.OS === 'ios' && (
11184
<Appbar.Action
11285
icon="crosshairs-question"
11386
onPress={() => {
@@ -116,75 +89,78 @@ export default class App extends React.Component<{}, State> {
11689
}).then((accuracy) => console.warn({accuracy}));
11790
}}
11891
/>
119-
120-
<Appbar.Action
121-
icon="cellphone-cog"
122-
onPress={() => {
123-
RNPermissions.openSettings();
124-
}}
125-
/>
126-
</Appbar.Header>
127-
128-
<ScrollView>
129-
{PERMISSIONS_VALUES.map(this.renderPermissionItem)}
130-
131-
<View style={{backgroundColor: '#e0e0e0', height: 1}} accessibilityRole="none" />
132-
133-
<TouchableRipple
134-
onPress={() => {
135-
RNPermissions.requestNotifications(['alert', 'badge', 'sound'])
136-
.then(() => this.check())
137-
.catch((error) => console.error(error));
138-
}}>
139-
<>
92+
)}
93+
94+
<Appbar.Action
95+
icon="cellphone-cog"
96+
onPress={() => {
97+
RNPermissions.openSettings();
98+
}}
99+
/>
100+
</Appbar.Header>
101+
102+
<ScrollView>
103+
{PERMISSIONS_VALUES.map((item, index) => {
104+
const value = PERMISSIONS_VALUES[index];
105+
const status = statuses[value];
106+
107+
if (!status) {
108+
return null;
109+
}
110+
111+
return (
112+
<TouchableRipple
113+
key={item}
114+
onPress={() => {
115+
RNPermissions.request(value)
116+
.then(check)
117+
.catch((error) => console.error(error));
118+
}}
119+
>
140120
<List.Item
141-
title="NOTIFICATIONS"
142-
right={() => (
143-
<List.Icon
144-
color={colors[notifications.status]}
145-
icon={icons[notifications.status]}
146-
/>
147-
)}
121+
right={() => <List.Icon color={colors[status]} icon={icons[status]} />}
122+
title={item}
123+
description={status}
148124
/>
149-
150-
{Platform.OS === 'ios' && (
151-
<Text style={{margin: 15, marginTop: -24, color: '#777'}}>
152-
{`alert: ${settings.alert}\n`}
153-
{`badge: ${settings.badge}\n`}
154-
{`sound: ${settings.sound}\n`}
155-
{`carPlay: ${settings.carPlay}\n`}
156-
{`criticalAlert: ${settings.criticalAlert}\n`}
157-
{`provisional: ${settings.provisional}\n`}
158-
{`lockScreen: ${settings.lockScreen}\n`}
159-
{`notificationCenter: ${settings.notificationCenter}\n`}
160-
</Text>
125+
</TouchableRipple>
126+
);
127+
})}
128+
129+
<View style={{backgroundColor: '#e0e0e0', height: 1}} />
130+
131+
<TouchableRipple
132+
onPress={() => {
133+
RNPermissions.requestNotifications(['alert', 'badge', 'sound'])
134+
.then(check)
135+
.catch((error) => console.error(error));
136+
}}
137+
>
138+
<>
139+
<List.Item
140+
title="NOTIFICATIONS"
141+
right={() => (
142+
<List.Icon
143+
color={colors[notifications.status]}
144+
icon={icons[notifications.status]}
145+
/>
161146
)}
162-
</>
163-
</TouchableRipple>
164-
</ScrollView>
165-
</View>
166-
);
167-
}
168-
169-
renderPermissionItem = (item: Permission, index: number) => {
170-
const value = PERMISSIONS_VALUES[index];
171-
const status = this.state.statuses[value];
172-
173-
if (!status) {
174-
return null;
175-
}
176-
177-
return (
178-
<PermissionRow
179-
status={status}
180-
key={item}
181-
name={item}
182-
onPress={() => {
183-
RNPermissions.request(value)
184-
.then(() => this.check())
185-
.catch((error) => console.error(error));
186-
}}
187-
/>
188-
);
189-
};
190-
}
147+
/>
148+
149+
{Platform.OS === 'ios' && (
150+
<Text style={{margin: 15, marginTop: -24, color: '#777'}}>
151+
{`alert: ${notifications.settings.alert}\n`}
152+
{`badge: ${notifications.settings.badge}\n`}
153+
{`sound: ${notifications.settings.sound}\n`}
154+
{`carPlay: ${notifications.settings.carPlay}\n`}
155+
{`criticalAlert: ${notifications.settings.criticalAlert}\n`}
156+
{`provisional: ${notifications.settings.provisional}\n`}
157+
{`lockScreen: ${notifications.settings.lockScreen}\n`}
158+
{`notificationCenter: ${notifications.settings.notificationCenter}\n`}
159+
</Text>
160+
)}
161+
</>
162+
</TouchableRipple>
163+
</ScrollView>
164+
</View>
165+
);
166+
};

‎example/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import {Provider as PaperProvider} from 'react-native-paper';
33
import {AppRegistry} from 'react-native';
4-
import App from './App';
4+
import {App} from './App';
55
import {name as appName} from './app.json';
66
import theme from './theme';
77

0 commit comments

Comments
 (0)