123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. * @flow
  5. */
  6. import React, { Component } from 'react';
  7. import {
  8. StyleSheet,
  9. TouchableHighlight,
  10. Text,
  11. View,
  12. Alert,
  13. AppState,
  14. Platform,
  15. } from 'react-native';
  16. import Permissions from 'react-native-permissions'
  17. export default class Example extends Component {
  18. state = {
  19. types: [],
  20. status: {},
  21. }
  22. componentDidMount() {
  23. let types = Permissions.getPermissionTypes()
  24. this.setState({ types })
  25. this._updatePermissions(types)
  26. AppState.addEventListener('change', this._handleAppStateChange.bind(this));
  27. }
  28. componentWillUnmount() {
  29. AppState.removeEventListener('change', this._handleAppStateChange.bind(this));
  30. }
  31. //update permissions when app comes back from settings
  32. _handleAppStateChange(appState) {
  33. if (appState == 'active') {
  34. this._updatePermissions(this.state.types)
  35. }
  36. }
  37. _updatePermissions(types) {
  38. Permissions.checkMultiplePermissions(types)
  39. .then(status => {
  40. if (this.state.isAlways) {
  41. return Permissions.getPermissionStatus('location', 'always')
  42. .then(location => ({...status, location}))
  43. }
  44. return status
  45. })
  46. .then(status => this.setState({ status }))
  47. }
  48. _requestPermission(permission) {
  49. var options
  50. if (permission == 'location') {
  51. options = this.state.isAlways ? 'always' : 'whenInUse'
  52. }
  53. Permissions.requestPermission(permission, options)
  54. .then(res => {
  55. this.setState({
  56. status: {...this.state.status, [permission]: res}
  57. })
  58. if (res != 'authorized') {
  59. Alert.alert(
  60. 'Whoops!',
  61. "There was a problem getting your permission. Please enable it from settings.",
  62. [
  63. {text: 'Cancel', style: 'cancel'},
  64. {text: 'Open Settings', onPress: Permissions.openSettings },
  65. ]
  66. )
  67. }
  68. }).catch(e => console.warn(e))
  69. }
  70. _onLocationSwitchChange() {
  71. this.setState({ isAlways: !this.state.isAlways })
  72. this._updatePermissions(this.state.types)
  73. }
  74. render() {
  75. return (
  76. <View style={styles.container}>
  77. {this.state.types.map(p => (
  78. <TouchableHighlight
  79. style={[styles.button, styles[this.state.status[p]]]}
  80. key={p}
  81. onPress={this._requestPermission.bind(this, p)}>
  82. <View>
  83. <Text style={styles.text}>
  84. {Platform.OS == 'ios' && p == 'location' ? `location ${this.state.isAlways ? 'always' : 'whenInUse'}` : p}
  85. </Text>
  86. <Text style={styles.subtext}>
  87. {this.state.status[p]}
  88. </Text>
  89. </View>
  90. </TouchableHighlight>
  91. )
  92. )}
  93. <View style={styles.footer}>
  94. <TouchableHighlight
  95. style={styles['footer_'+Platform.OS]}
  96. onPress={this._onLocationSwitchChange.bind(this)}>
  97. <Text style={styles.text}>Toggle location type</Text>
  98. </TouchableHighlight>
  99. <TouchableHighlight
  100. onPress={Permissions.openSettings}>
  101. <Text style={styles.text}>Open settings</Text>
  102. </TouchableHighlight>
  103. </View>
  104. <Text style={styles['footer_'+Platform.OS]}>
  105. Note: microphone permissions may not work on iOS simulator. Also, toggling permissions from the settings menu may cause the app to crash. This is normal on iOS. Google "ios crash permission change"
  106. </Text>
  107. </View>
  108. );
  109. }
  110. }
  111. const styles = StyleSheet.create({
  112. container: {
  113. flex: 1,
  114. justifyContent: 'center',
  115. backgroundColor: '#F5FCFF',
  116. padding: 10,
  117. },
  118. text: {
  119. textAlign: 'center',
  120. fontWeight: 'bold',
  121. },
  122. subtext: {
  123. textAlign: 'center',
  124. },
  125. button: {
  126. margin: 5,
  127. borderColor: 'black',
  128. borderWidth: 3,
  129. overflow: 'hidden',
  130. },
  131. buttonInner: {
  132. flexDirection: 'column',
  133. },
  134. undetermined: {
  135. backgroundColor: '#E0E0E0',
  136. },
  137. authorized: {
  138. backgroundColor: '#C5E1A5',
  139. },
  140. denied: {
  141. backgroundColor: '#ef9a9a',
  142. },
  143. restricted: {
  144. backgroundColor: '#FFAB91'
  145. },
  146. footer: {
  147. padding: 10,
  148. flexDirection: 'row',
  149. justifyContent: 'space-between',
  150. },
  151. footer_android: {
  152. height: 0,
  153. width: 0,
  154. }
  155. })