chore: Support react-native-netinfo 6 (#326)

Author: colinux

package-lock.json

@@ -41,7 +41,7 @@
   },
   "homepage": "https://github.com/rgommezz/react-native-offline#readme",
   "devDependencies": {
-    "@react-native-community/netinfo": "^5.3.3",
+    "@react-native-community/netinfo": "^6.0.0",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.18",
@@ -103,7 +103,7 @@
     "redux-saga": "^1.0.2"
   },
   "peerDependencies": {
-    "@react-native-community/netinfo": ">= 4.6 < 6",
+    "@react-native-community/netinfo": ">= 6",
     "react-native": ">=0.60",
     "react-redux": ">=7.x",
     "redux": ">=3",

package.json

@@ -11,7 +11,7 @@ export type RequiredProps = {
 } & DefaultProps;
 
 export type DefaultProps = ConnectivityArgs & {
-  onConnectivityChange: (isConnected: boolean) => void;
+  onConnectivityChange: (isConnected: boolean | null) => void;
 };
 
 function validateProps(props: RequiredProps) {
@@ -58,7 +58,7 @@ class NetworkConnectivity extends React.PureComponent<
     super(props);
     validateProps(props);
     this.state = {
-      isConnected: true,
+      isConnected: null,
     };
   }
 

src/components/NetworkConnectivity.tsx

@@ -14,7 +14,7 @@ interface AppState {
 type OwnProps = ConnectivityArgs;
 
 interface StateProps {
-  isConnected: boolean;
+  isConnected: boolean | null;
   dispatch: Dispatch;
 }
 
@@ -25,7 +25,7 @@ type Props = OwnProps &
 class ReduxNetworkProvider extends React.Component<Props> {
   static defaultProps = DEFAULT_ARGS;
 
-  handleConnectivityChange = (isConnected: boolean) => {
+  handleConnectivityChange = (isConnected: boolean | null) => {
     const { isConnected: wasConnected, dispatch } = this.props;
     if (isConnected !== wasConnected) {
       dispatch(connectionChange(isConnected));

src/components/ReduxNetworkProvider.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import NetworkContext from '../components/NetworkContext';
 
-export default function useIsConnected(): boolean {
+export default function useIsConnected(): boolean | null {
   const context = useContext(NetworkContext);
 
   if (!context) {

src/hooks/useIsConnected.ts

@@ -1,7 +1,7 @@
 import * as actionTypes from './actionTypes';
 import { EnqueuedAction, SemaphoreColor } from '../types';
 
-export const connectionChange = (isConnected: boolean) => ({
+export const connectionChange = (isConnected: boolean | null) => ({
   type: actionTypes.CONNECTION_CHANGE as typeof actionTypes.CONNECTION_CHANGE,
   payload: isConnected,
 });

src/redux/actionCreators.ts

@@ -79,7 +79,10 @@ function checkIfActionShouldBeIntercepted(
   );
 }
 
-function didComeBackOnline(action: EnqueuedAction, wasConnected: boolean) {
+function didComeBackOnline(
+  action: EnqueuedAction,
+  wasConnected: boolean | null,
+) {
   if ('type' in action && 'payload' in action) {
     return (
       action.type === networkActionTypes.CONNECTION_CHANGE &&
@@ -146,7 +149,7 @@ function createNetworkMiddleware({
       actionTypes,
     );
 
-    if (shouldInterceptAction && isConnected === false) {
+    if (shouldInterceptAction && isConnected !== true) {
       // Offline, preventing the original action from being dispatched.
       // Dispatching an internal action instead.
       return next(fetchOfflineMode(action));

src/redux/createNetworkMiddleware.ts

@@ -125,7 +125,7 @@ export function* connectionHandler({
   pingServerUrl,
   httpMethod,
   customHeaders,
-}: NetInfoChangeArgs & { isConnected: boolean }) {
+}: NetInfoChangeArgs & { isConnected: boolean | null }) {
   if (shouldPing && isConnected) {
     yield fork(checkInternetAccessSaga, {
       pingTimeout,
@@ -219,7 +219,7 @@ export function* checkInternetAccessSaga({
  * - Flushes the queue of pending actions if we are connected back to the internet
  * @param hasInternetAccess
  */
-export function* handleConnectivityChange(hasInternetAccess: boolean) {
+export function* handleConnectivityChange(hasInternetAccess: boolean | null) {
   const state: NetworkState = yield select(networkSelector);
   if (state.isConnected !== hasInternetAccess) {
     yield put(connectionChange(hasInternetAccess));

src/redux/sagas.ts

@@ -25,7 +25,7 @@ export interface NetworkState extends ConnectivityState {
 }
 
 export type ConnectivityState = {
-  isConnected: boolean;
+  isConnected: boolean | null;
 };
 
 export type HTTPMethod = 'HEAD' | 'OPTIONS';

src/types.ts

@@ -22,7 +22,7 @@ export default async function checkInternetConnection(
   shouldPing = true,
   method: HTTPMethod = DEFAULT_HTTP_METHOD,
   customHeaders: HTTPHeaders = DEFAULT_CUSTOM_HEADERS,
-): Promise<boolean> {
+): Promise<boolean | null> {
   return NetInfo.fetch().then(async connectionState => {
     if (shouldPing) {
       const hasInternetAccess = await checkInternetAccess({

src/utils/checkInternetConnection.ts

@@ -88,7 +88,7 @@ describe('NetworkConnectivity', () => {
   it('passes the connection state into the FACC', () => {
     const children = jest.fn();
     shallow(getElement({ props: { children } }));
-    expect(children).toHaveBeenCalledWith({ isConnected: true });
+    expect(children).toHaveBeenCalledWith({ isConnected: null });
   });
 
   describe('componentDidMount', () => {

test/NetworkConnectivity.test.tsx

@@ -34,6 +34,6 @@ describe.only('NetworkConsumer', () => {
   it('receives isConnected prop from Provider using context', () => {
     const { getByTestId } = render(getElement({ children: <Consumer /> }));
     const textChild = getByTestId('connectionText');
-    expect(textChild.props.children).toBe('Connected: true');
+    expect(textChild.props.children).toBe('Connected: null');
   });
 });