🐛 (Observers) fix typing errors after mobx-reaxt update

Author: tpucci

src/FullScreenPortal.tsx

@@ -1,6 +1,6 @@
 import React, { Component as ReactComponent, Fragment } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Observer } from 'mobx-react/native';
+import { Observer } from 'mobx-react';
 import { fromStream } from 'mobx-utils';
 import { Navigation } from './Navigation';
 
@@ -15,13 +15,19 @@ export class FullScreenPortal extends ReactComponent {
           {() => {
             if (this.fullScreenStack.current) {
               return (
-                this.fullScreenStack.current &&
-                this.fullScreenStack.current.map(({ Component, name, isAuthorized }) => (
-                  <Component isAuthorized={isAuthorized} key={name} />
-                ))
+                <Fragment>
+                  {this.fullScreenStack.current &&
+                    this.fullScreenStack.current.map(({ Component, name, isAuthorized }) => (
+                      <Component isAuthorized={isAuthorized} key={name} />
+                    ))}
+                </Fragment>
               );
             }
-            return null;
+            /**
+             * @todo Improve typing of <Observer /> to accept null JSXElement.
+             * Expected: `return null;`
+             */
+            return <Fragment />;
           }}
         </Observer>
       </View>

src/createCanal.tsx

@@ -1,6 +1,6 @@
-import React, { ComponentType, Component as ReactComponent } from 'react';
+import React, { ComponentType, Component as ReactComponent, Fragment } from 'react';
 import { ViewStyle, View, StyleSheet, StyleProp } from 'react-native';
-import { Observer } from 'mobx-react/native';
+import { Observer } from 'mobx-react';
 import { fromStream } from 'mobx-utils';
 import { Subject, Observable, ConnectableObservable } from 'rxjs';
 import { map, distinctUntilChanged, withLatestFrom, publish } from 'rxjs/operators';
@@ -140,11 +140,13 @@ export const createCanal = <
       return (
         <View style={this.props.style}>
           <Observer>
-            {() =>
-              this.stack.current.map(({ name, Component, isAuthorized }) => (
-                <Component key={name} isAuthorized={isAuthorized} />
-              ))
-            }
+            {() => (
+              <Fragment>
+                {this.stack.current.map(({ name, Component, isAuthorized }) => (
+                  <Component key={name} isAuthorized={isAuthorized} />
+                ))}
+              </Fragment>
+            )}
           </Observer>
         </View>
       );