You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

App.native.js 6.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. // @flow
  2. import React from 'react';
  3. import { setColorScheme } from '../../base/color-scheme';
  4. import { DialogContainer } from '../../base/dialog';
  5. import { CALL_INTEGRATION_ENABLED, SERVER_URL_CHANGE_ENABLED, updateFlags } from '../../base/flags';
  6. import { Platform } from '../../base/react';
  7. import { DimensionsDetector, clientResized } from '../../base/responsive-ui';
  8. import { updateSettings } from '../../base/settings';
  9. import logger from '../logger';
  10. import { AbstractApp } from './AbstractApp';
  11. import type { Props as AbstractAppProps } from './AbstractApp';
  12. // Register middlewares and reducers.
  13. import '../middlewares';
  14. import '../reducers';
  15. declare var __DEV__;
  16. /**
  17. * The type of React {@code Component} props of {@link App}.
  18. */
  19. type Props = AbstractAppProps & {
  20. /**
  21. * An object of colors that override the default colors of the app/sdk.
  22. */
  23. colorScheme: ?Object,
  24. /**
  25. * Identifier for this app on the native side.
  26. */
  27. externalAPIScope: string,
  28. /**
  29. * An object with the feature flags.
  30. */
  31. flags: Object,
  32. /**
  33. * An object with user information (display name, email, avatar URL).
  34. */
  35. userInfo: ?Object
  36. };
  37. /**
  38. * Root app {@code Component} on mobile/React Native.
  39. *
  40. * @extends AbstractApp
  41. */
  42. export class App extends AbstractApp {
  43. _init: Promise<*>;
  44. /**
  45. * Initializes a new {@code App} instance.
  46. *
  47. * @param {Props} props - The read-only React {@code Component} props with
  48. * which the new instance is to be initialized.
  49. */
  50. constructor(props: Props) {
  51. super(props);
  52. // In the Release configuration, React Native will (intentionally) throw
  53. // an unhandled JavascriptException for an unhandled JavaScript error.
  54. // This will effectively kill the app. In accord with the Web, do not
  55. // kill the app.
  56. this._maybeDisableExceptionsManager();
  57. // Bind event handler so it is only bound once per instance.
  58. this._onDimensionsChanged = this._onDimensionsChanged.bind(this);
  59. }
  60. /**
  61. * Initializes the color scheme.
  62. *
  63. * @inheritdoc
  64. *
  65. * @returns {void}
  66. */
  67. componentDidMount() {
  68. super.componentDidMount();
  69. this._init.then(() => {
  70. // We set these early enough so then we avoid any unnecessary re-renders.
  71. const { dispatch } = this.state.store;
  72. // Check if serverURL is configured externally and not allowed to change.
  73. const serverURLChangeEnabled = this.props.flags[SERVER_URL_CHANGE_ENABLED];
  74. if (!serverURLChangeEnabled) {
  75. // As serverURL is provided externally, so we push it to settings.
  76. if (typeof this.props.url !== 'undefined') {
  77. const { serverURL } = this.props.url;
  78. if (typeof serverURL !== 'undefined') {
  79. dispatch(updateSettings({ serverURL }));
  80. }
  81. }
  82. }
  83. dispatch(setColorScheme(this.props.colorScheme));
  84. dispatch(updateFlags(this.props.flags));
  85. dispatch(updateSettings(this.props.userInfo || {}));
  86. // Update settings with feature-flag.
  87. const callIntegrationEnabled = this.props.flags[CALL_INTEGRATION_ENABLED];
  88. if (typeof callIntegrationEnabled !== 'undefined') {
  89. dispatch(updateSettings({ disableCallIntegration: !callIntegrationEnabled }));
  90. }
  91. });
  92. }
  93. /**
  94. * Overrides the parent method to inject {@link DimensionsDetector} as
  95. * the top most component.
  96. *
  97. * @override
  98. */
  99. _createMainElement(component, props) {
  100. return (
  101. <DimensionsDetector
  102. onDimensionsChanged = { this._onDimensionsChanged }>
  103. { super._createMainElement(component, props) }
  104. </DimensionsDetector>
  105. );
  106. }
  107. /**
  108. * Attempts to disable the use of React Native
  109. * {@link ExceptionsManager#handleException} on platforms and in
  110. * configurations on/in which the use of the method in questions has been
  111. * determined to be undesirable. For example, React Native will
  112. * (intentionally) throw an unhandled {@code JavascriptException} for an
  113. * unhandled JavaScript error in the Release configuration. This will
  114. * effectively kill the app. In accord with the Web, do not kill the app.
  115. *
  116. * @private
  117. * @returns {void}
  118. */
  119. _maybeDisableExceptionsManager() {
  120. if (__DEV__) {
  121. // As mentioned above, only the Release configuration was observed
  122. // to suffer.
  123. return;
  124. }
  125. if (Platform.OS !== 'android') {
  126. // A solution based on RTCSetFatalHandler was implemented on iOS and
  127. // it is preferred because it is at a later step of the
  128. // error/exception handling and it is specific to fatal
  129. // errors/exceptions which were observed to kill the app. The
  130. // solution implemented bellow was tested on Android only so it is
  131. // considered safest to use it there only.
  132. return;
  133. }
  134. const oldHandler = global.ErrorUtils.getGlobalHandler();
  135. const newHandler = _handleException;
  136. if (!oldHandler || oldHandler !== newHandler) {
  137. newHandler.next = oldHandler;
  138. global.ErrorUtils.setGlobalHandler(newHandler);
  139. }
  140. }
  141. _onDimensionsChanged: (width: number, height: number) => void;
  142. /**
  143. * Updates the known available size for the app to occupy.
  144. *
  145. * @param {number} width - The component's current width.
  146. * @param {number} height - The component's current height.
  147. * @private
  148. * @returns {void}
  149. */
  150. _onDimensionsChanged(width: number, height: number) {
  151. const { dispatch } = this.state.store;
  152. dispatch(clientResized(width, height));
  153. }
  154. /**
  155. * Renders the platform specific dialog container.
  156. *
  157. * @returns {React$Element}
  158. */
  159. _renderDialogContainer() {
  160. return (
  161. <DialogContainer />
  162. );
  163. }
  164. }
  165. /**
  166. * Handles a (possibly unhandled) JavaScript error by preventing React Native
  167. * from converting a fatal error into an unhandled native exception which will
  168. * kill the app.
  169. *
  170. * @param {Error} error - The (possibly unhandled) JavaScript error to handle.
  171. * @param {boolean} fatal - If the specified error is fatal, {@code true};
  172. * otherwise, {@code false}.
  173. * @private
  174. * @returns {void}
  175. */
  176. function _handleException(error, fatal) {
  177. if (fatal) {
  178. // In the Release configuration, React Native will (intentionally) throw
  179. // an unhandled JavascriptException for an unhandled JavaScript error.
  180. // This will effectively kill the app. In accord with the Web, do not
  181. // kill the app.
  182. logger.error(error);
  183. } else {
  184. // Forward to the next globalHandler of ErrorUtils.
  185. const { next } = _handleException;
  186. typeof next === 'function' && next(error, fatal);
  187. }
  188. }