App.tsx 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. import React from 'react';
  2. import {Appbar, List, TouchableRipple} from 'react-native-paper';
  3. import theme from './theme';
  4. import {
  5. FlatList,
  6. Platform,
  7. StatusBar,
  8. Text,
  9. View,
  10. GestureResponderEvent,
  11. } from 'react-native';
  12. import RNPermissions, {
  13. PERMISSIONS,
  14. RESULTS,
  15. PermissionStatus,
  16. Permission,
  17. NotificationsResponse,
  18. } from 'react-native-permissions';
  19. // eslint-disable-next-line @typescript-eslint/no-unused-vars
  20. const {SIRI, ...PERMISSIONS_IOS} = PERMISSIONS.IOS; // remove siri (certificate required)
  21. const PLATFORM_PERMISSIONS = Platform.select<
  22. typeof PERMISSIONS_IOS | typeof PERMISSIONS.ANDROID | {}
  23. >({
  24. ios: PERMISSIONS_IOS,
  25. android: PERMISSIONS.ANDROID,
  26. default: {},
  27. });
  28. const PERMISSIONS_VALUES: Permission[] = Object.values(PLATFORM_PERMISSIONS);
  29. const colors: {[key: string]: string} = {
  30. unavailable: '#cfd8dc',
  31. denied: '#ff9800',
  32. granted: '#43a047',
  33. blocked: '#e53935',
  34. };
  35. const icons: {[key: string]: string} = {
  36. unavailable: 'lens',
  37. denied: 'error',
  38. granted: 'check-circle',
  39. blocked: 'cancel',
  40. };
  41. const PermissionRow = ({
  42. name,
  43. status,
  44. onPress,
  45. }: {
  46. name: string;
  47. status: string;
  48. onPress: (event: GestureResponderEvent) => void;
  49. }) => (
  50. <TouchableRipple onPress={onPress}>
  51. <List.Item
  52. right={() => <List.Icon color={colors[status]} icon={icons[status]} />}
  53. title={name}
  54. description={status}
  55. />
  56. </TouchableRipple>
  57. );
  58. interface State {
  59. statuses: PermissionStatus[];
  60. notifications: NotificationsResponse;
  61. }
  62. function getSettingString(setting: boolean | undefined) {
  63. return setting
  64. ? RESULTS.GRANTED
  65. : setting === false
  66. ? RESULTS.DENIED
  67. : RESULTS.UNAVAILABLE;
  68. }
  69. export default class App extends React.Component<{}, State> {
  70. state: State = {
  71. statuses: [],
  72. notifications: {status: 'unavailable', settings: {}},
  73. };
  74. check = () =>
  75. Promise.all(PERMISSIONS_VALUES.map(_ => RNPermissions.check(_)))
  76. .then(statuses => this.setState({statuses}))
  77. .then(() => RNPermissions.checkNotifications())
  78. .then(notifications => this.setState({notifications}))
  79. .catch(error => console.warn(error));
  80. refresh = () => {
  81. this.setState({statuses: []}, this.check);
  82. };
  83. componentDidMount() {
  84. this.check();
  85. }
  86. render() {
  87. const {notifications} = this.state;
  88. const {settings} = notifications;
  89. return (
  90. <View style={{flex: 1, backgroundColor: theme.colors.background}}>
  91. <StatusBar
  92. backgroundColor={theme.colors.primary}
  93. barStyle="light-content"
  94. />
  95. <Appbar.Header>
  96. <Appbar.Content
  97. title="react-native-permissions"
  98. subtitle="Example application"
  99. />
  100. <Appbar.Action onPress={this.refresh} icon="refresh" />
  101. <Appbar.Action
  102. onPress={RNPermissions.openSettings}
  103. icon="settings-applications"
  104. />
  105. </Appbar.Header>
  106. <FlatList
  107. keyExtractor={item => item}
  108. data={Object.keys(PLATFORM_PERMISSIONS)}
  109. renderItem={({item, index}) => {
  110. const value = PERMISSIONS_VALUES[index];
  111. const status = this.state.statuses[index];
  112. return (
  113. <PermissionRow
  114. status={status}
  115. name={item}
  116. onPress={() => {
  117. RNPermissions.request(value)
  118. .then(() => this.check())
  119. .catch(err => console.error(err));
  120. }}
  121. />
  122. );
  123. }}
  124. />
  125. <View
  126. style={{backgroundColor: '#e0e0e0', height: 1}}
  127. accessibilityRole="none"
  128. />
  129. <TouchableRipple
  130. onPress={() => {
  131. RNPermissions.requestNotifications(['alert', 'badge', 'sound'])
  132. .then(() => this.check())
  133. .catch(err => console.error(err));
  134. }}>
  135. <List.Item
  136. right={() => (
  137. <List.Icon
  138. color={colors[notifications.status]}
  139. icon={icons[notifications.status]}
  140. />
  141. )}
  142. title="NOTIFICATIONS"
  143. description={notifications.status}
  144. />
  145. </TouchableRipple>
  146. <Text style={{margin: 15, marginTop: 0, color: '#777'}}>
  147. {`alert: ${getSettingString(settings.alert)}\n`}
  148. {`badge: ${getSettingString(settings.badge)}\n`}
  149. {`sound: ${getSettingString(settings.sound)}\n`}
  150. {`lockScreen: ${getSettingString(settings.lockScreen)}\n`}
  151. {`notificationCenter: ${getSettingString(
  152. settings.notificationCenter,
  153. )}\n`}
  154. {`carPlay: ${getSettingString(settings.carPlay)}\n`}
  155. {`criticalAlert: ${getSettingString(settings.criticalAlert)}\n`}
  156. </Text>
  157. </View>
  158. );
  159. }
  160. }