react-native#AppStateStatus TypeScript Examples

export function useExposureNotificationSystemStatusAutomaticUpdater() {
  const exposureNotificationService = useExposureNotificationService();
  return useCallback(() => {
    const updateStatus = async (newState: AppStateStatus) => {
      if (newState === 'active') {
        await exposureNotificationService.updateSystemStatus();
        await exposureNotificationService.updateExposureStatus();
      }
    };
    AppState.addEventListener('change', updateStatus);

    const bluetoothListenerPromise = SystemSetting.addBluetoothListener(() => {
      exposureNotificationService.updateSystemStatus();
    });

    return () => {
      AppState.removeEventListener('change', updateStatus);
      bluetoothListenerPromise.then(listener => listener.remove()).catch(() => {});
    };
  }, [exposureNotificationService]);
}

_onAppStateChanged = (state: AppStateStatus) => {
        logger.log('AppState =', state);

        if (state === 'inactive') {
            return;
        }

        if (state === 'background') {
            AppController.Instance.setAppActive(false);
            return;
        }

        AppController.Instance.setAppActive(true);
    }

export function useAppState(): [AppStateStatus] {
  const [state, setState] = useState<AppStateStatus>(AppState.currentState);
  const handler = (nextState: AppStateStatus) => {
    setState(nextState);
  };

  useEffect(() => {
    AppState.addEventListener('change', handler);
    return () => {
      AppState.removeEventListener('change', handler);
    };
  }, []);

  return [state];
}

export function useExposureNotificationSystemStatusAutomaticUpdater() {
  const exposureNotificationService = useExposureNotificationService();
  return useCallback(() => {
    const updateStatus = async (newState: AppStateStatus) => {
      if (newState !== 'active') return;
      await exposureNotificationService.updateSystemStatus();
    };
    AppState.addEventListener('change', updateStatus);

    const bluetoothListenerPromise = SystemSetting.addBluetoothListener(() => {
      exposureNotificationService.updateSystemStatus();
    });

    const locationListenerPromise =
      Platform.OS === 'android'
        ? SystemSetting.addLocationListener(() => {
            exposureNotificationService.updateSystemStatus();
          })
        : undefined;

    return () => {
      AppState.removeEventListener('change', updateStatus);
      bluetoothListenerPromise.then(listener => listener.remove()).catch(() => {});
      locationListenerPromise?.then(listener => listener.remove()).catch(() => {});
    };
  }, [exposureNotificationService]);
}

function useAppState(): string {
  const [appState, setAppState] = useState(AppState.currentState)

  useEffect(() => {
    const handleAppStateChange = (nextAppState: AppStateStatus) => {
      setAppState(nextAppState)
    }

    AppState.addEventListener('change', handleAppStateChange)

    return () => {
      AppState.removeEventListener('change', handleAppStateChange)
    }
  }, [])

  return appState
}

LocationIOS = ({ navigation, strings: { locationIOS: { title, subTitle1, subTitle2, goToSettings, set } }, isRTL }: Props) => {
  const appStateStatus = useRef<AppStateStatus>('active');
  const [isLocationAllowed, setIsLocationAllowed] = useState(false);

  useEffect(() => {
    checkIOSLocation();

    AppState.addEventListener('change', onAppStateChange);
    return () => { AppState.removeEventListener('change', onAppStateChange); };
  });

  const onAppStateChange = async (state: AppStateStatus) => {
    if (state === 'active' && appStateStatus.current !== 'active') {
      await checkIOSLocation();
    }

    appStateStatus.current = state;
  };

  const checkIOSLocation = async () => {
    try {
      const res = await check(PERMISSIONS.IOS.LOCATION_ALWAYS);
      setIsLocationAllowed(res === RESULTS.GRANTED);
    } catch (error) {
      onError({ error });
    }
  };

  return (
    <GeneralContainer style={styles.container}>
      <OnboardingHeader />

      <View style={[{ alignItems: 'center' }, IS_SMALL_SCREEN && { paddingHorizontal: 10, paddingTop: 5 }]}>
        <Text style={styles.title} bold>{title}</Text>
        <Text style={styles.subTitle}>{subTitle1}</Text>
      </View>

      <View style={{ alignItems: 'center' }}>
        <Text bold>{subTitle2}</Text>

        <Icon source={require('../../assets/onboarding/locationTutorial.png')} width={SCREEN_WIDTH - 50} height={106} customStyles={{ marginVertical: 25 }} />

        <TouchableOpacity onPress={() => Linking.openURL('app-settings:')}>
          <View style={{ flexDirection: isRTL ? 'row-reverse' : 'row', alignItems: 'center', paddingHorizontal: IS_SMALL_SCREEN ? 20 : 0 }}>
            <Icon source={require('../../assets/onboarding/settings.png')} width={17} customStyles={{ marginHorizontal: 7 }} />
            <Text style={{ color: MAIN_COLOR, textDecorationLine: 'underline' }} bold>{goToSettings}</Text>
          </View>
        </TouchableOpacity>
      </View>

      <ActionButton
        text={set}
        isDisabled={!isLocationAllowed}
        onPress={() => { navigation.navigate('FilterDrivingOnBoarding'); }
        }
        containerStyle={{ marginVertical: IS_SMALL_SCREEN ? 0 : 20 }}
      />
    </GeneralContainer>
  );
}

MainTabStack: React.FC<MainTabStackProps> = ({}) => {
  const { show } = useShowTabs();
  const {
    editorBackground,
    buttonBackground,
    buttonHoverBackground,
  } = useTheme();
  const cache = useQueryCache();

  useEffect(() => {
    const _handleAppStateChange = (nextAppState: AppStateStatus) => {
      if (nextAppState === "active") {
        cache.invalidateQueries(`/matches/0`);
        getSocket().reconnect();
      } else if (nextAppState === "background") {
        getSocket().close();
      }
    };

    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener("change", _handleAppStateChange);
    };
  }, []);

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => {
          const size = 24;
          const color = focused ? buttonHoverBackground : buttonBackground;

          if (route.name === "swiper") {
            return <Entypo name="code" size={size} color={color} />;
          } else if (route.name === "profile") {
            return (
              <MaterialCommunityIcons
                name="account"
                size={size}
                color={color}
              />
            );
          } else if (route.name === "matches") {
            return <MessageIcon size={size} color={color} />;
          }

          return null;
        },
      })}
      swipeEnabled={false}
      tabBarOptions={{
        style: {
          height: show ? undefined : 0,
          backgroundColor: editorBackground,
        },
        indicatorStyle: {
          backgroundColor: buttonHoverBackground,
        },
        showIcon: true,
        showLabel: false,
      }}
      initialRouteName={"swiper"}
    >
      <Tab.Screen name="swiper" component={SwiperScreen} />
      <Tab.Screen name="matches" component={MatchesStack} />
      <Tab.Screen name="profile" component={ProfileStack} />
    </Tab.Navigator>
  );
}

MainTabStack: React.FC<MainTabStackProps> = ({}) => {
  const { show } = useShowTabs();
  const {
    editorBackground,
    buttonBackground,
    buttonHoverBackground,
  } = useTheme();

  useEffect(() => {
    const _handleAppStateChange = (nextAppState: AppStateStatus) => {
      if (nextAppState === "active") {
        getSocket().reconnect();
      } else if (nextAppState === "background") {
        getSocket().close();
      }
    };

    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener("change", _handleAppStateChange);
    };
  }, []);

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => {
          const size = 24;
          const color = focused ? buttonHoverBackground : buttonBackground;

          if (route.name === "swiper") {
            return <Entypo name="code" size={size} color={color} />;
          } else if (route.name === "profile") {
            return (
              <MaterialCommunityIcons
                name="account"
                size={size}
                color={color}
              />
            );
          } else if (route.name === "matches") {
            return <MessageIcon size={size} color={color} />;
          }

          return null;
        },
      })}
      swipeEnabled={false}
      tabBarOptions={{
        style: {
          height: show ? undefined : 0,
          backgroundColor: editorBackground,
        },
        indicatorStyle: {
          backgroundColor: buttonHoverBackground,
        },
        showIcon: true,
        showLabel: false,
      }}
      initialRouteName={"swiper"}
    >
      <Tab.Screen name="swiper" component={SwiperScreen} />
      <Tab.Screen name="matches" component={MatchesStack} />
      <Tab.Screen name="profile" component={ProfileStack} />
    </Tab.Navigator>
  );
}

handleAppStateChange(state: AppStateStatus) {
    if (this.appState !== state) {
      if (state === 'active') {
        refetchJWKs()
      }
    }
    this.appState = state
  }

appState: AppStateStatus

ExposureNotificationServiceProvider = ({
  backendInterface,
  backgroundScheduler = BackgroundScheduler,
  exposureNotification,
  storage,
  secureStorage,
  children,
}: ExposureNotificationServiceProviderProps) => {
  const i18n = useI18nRef();
  const exposureNotificationService = useMemo(
    () =>
      new ExposureNotificationService(
        backendInterface,
        i18n,
        storage || AsyncStorage,
        secureStorage || RNSecureKeyStore,
        exposureNotification || ExposureNotification,
      ),
    [backendInterface, exposureNotification, i18n, secureStorage, storage],
  );

  useEffect(() => {
    backgroundScheduler.registerPeriodicTask(async () => {
      await exposureNotificationService.updateExposureStatusInBackground();
    });
  }, [backgroundScheduler, exposureNotificationService]);

  useEffect(() => {
    const onAppStateChange = async (newState: AppStateStatus) => {
      captureMessage(`ExposureNotificationServiceProvider onAppStateChange: ${newState}`);
      if (newState !== 'active') return;
      exposureNotificationService.updateExposure();
      await exposureNotificationService.updateExposureStatus();
    };

    // Note: The next two lines, calling updateExposure() and startExposureCheck() happen on app launch.
    exposureNotificationService.updateExposure();
    exposureNotificationService.updateExposureStatus();

    AppState.addEventListener('change', onAppStateChange);
    return () => {
      AppState.removeEventListener('change', onAppStateChange);
    };
  }, [exposureNotificationService]);

  return (
    <ExposureNotificationServiceContext.Provider value={exposureNotificationService}>
      {children}
    </ExposureNotificationServiceContext.Provider>
  );
}

NoExposures: FunctionComponent<NoExposuresProps> = ({ exposureState, languages, locale, externalUrls, isRTL, firstPoint, strings, hideLocationHistory, enableBle, batteryDisabled, goToLocationHistory, goToBluetoothPermission, goToBatteryPermission }) => {
  const appState = useRef<AppStateStatus>('active');
  const [showModal, setModalVisibility] = useState(false);

  const [now, setNow] = useState(moment().valueOf());
  const FPDate = useMemo(() => moment(firstPoint).format('D.M.YY'), [firstPoint]);

  const { nowDate, nowHour } = useMemo(() => ({
    nowDate: moment(now).format('D.M.YY'),
    nowHour: moment(now).format('HH:mm')
  }), [now]);

  const { scanHome: { noExposures: { bannerText, bannerTextPristine, workAllTheTime, instructionLinkUpper, instructionLinkLower, bluetoothServiceOff, turnBluetoothOn, canIdentifyWithBluetooth, bluetoothServiceOffTitle, BLESdkOffTitle, BLESdkOff, turnBLESdkOn, moreInformation, card: { title, atHour } } }, locationHistory: { info, moreInfo } } = strings;

  // redundant, ScanHome calls it
  useEffect(() => {
    AppState.addEventListener('change', onStateChange);


    return () => {
      AppState.removeEventListener('change', onStateChange);
    };

  }, []);

  useEffect(() => {
    if (batteryDisabled === null) {
      goToBatteryPermission()
    }
  }, [batteryDisabled])

  const RelevantCard = useMemo(() => {
    if (exposureState !== 'relevant') { return null; }

    const relevantLocale: string = Object.keys(languages.short).includes(locale) ? locale : 'he';

    const furtherInstructions = externalUrls.furtherInstructions[relevantLocale];

    return (
      <TouchableOpacity style={{ flexDirection: isRTL ? 'row' : 'row-reverse', alignContent: 'center', marginTop: IS_SMALL_SCREEN ? 15 : 20 }} onPress={() => Linking.openURL(furtherInstructions)}>
        <View style={{ alignContent: 'flex-end' }}>
          <Text style={{ textAlign: isRTL ? 'right' : 'left', fontSize: IS_SMALL_SCREEN ? 14 : 16 }}>{instructionLinkUpper}</Text>
          <Text bold style={{ textAlign: isRTL ? 'right' : 'left', fontSize: IS_SMALL_SCREEN ? 14 : 16 }}>{instructionLinkLower}</Text>
        </View>
        <Icon
          width={15}
          height={IS_SMALL_SCREEN ? 25 : 30}
          source={require('../../assets/main/isolation.png')}
          customStyles={isRTL ? { marginLeft: 10 } : { marginRight: 10 }}
        />
      </TouchableOpacity>
    );
  }, [exposureState, strings]);

  const onStateChange = async (state: AppStateStatus) => {
    if (state === 'active' && appState.current !== 'active') {
      setNow(moment().valueOf());
    }
    appState.current = state;
  };

  const LocationHistoryInfo = useMemo(() => {
    if (hideLocationHistory) { return null; }
    return (<InfoBubble isRTL={isRTL} info={info} moreInfo={moreInfo} onPress={goToLocationHistory} />);
  }, [hideLocationHistory, locale])

  const EnableBluetooth = useMemo(() => {
    switch (enableBle) {
      case 'false':
        return (<InfoBubble
          isRTL={isRTL}
          title={BLESdkOffTitle}
          info={BLESdkOff}
          moreInfo={turnBLESdkOn}
          onPress={() => toggleBLEService(true)}
        />)
      case 'true':
        return (<BluetoothBubble
          isRTL={isRTL}
          title={bluetoothServiceOffTitle}
          info={bluetoothServiceOff}
          moreInfo={turnBluetoothOn}
        />)
      case null:
        return (
          <InfoBubble
            isRTL={isRTL}
            info={canIdentifyWithBluetooth}
            moreInfo={moreInformation}
            onPress={goToBluetoothPermission}
          />
        )
      case 'blocked':
      default: 
      return null

    }

  },[enableBle, locale])

  return (
    <>
      <FadeInView style={styles.fadeContainer}>
        <ScrollView
          bounces={false}
          contentContainerStyle={{ paddingBottom: PADDING_BOTTOM(10), flexGrow: 1 }}
          showsVerticalScrollIndicator={false}
        >
          <View style={styles.container}>
            {LocationHistoryInfo}
            {EnableBluetooth}
            <LottieView
              style={styles.lottie}
              source={require('../../assets/lottie/magen logo.json')}
              resizeMode="cover"
              autoPlay
              loop
            />

            <Text bold style={styles.workAllTimeTxt}>{workAllTheTime}</Text>
            <Text bold style={styles.bannerText}>{exposureState === 'pristine' ? bannerTextPristine : bannerText}</Text>
          </View>
          <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'space-around' }}>

            <View style={styles.bottomCard}>

              <Text style={styles.cardHeaderText}>{title}</Text>
              <View style={styles.cardBody}>
                <TouchableOpacity
                  onPress={() => setModalVisibility(true)}
                  hitSlop={HIT_SLOP}
                >
                  <Icon
                    width={15}
                    source={require('../../assets/main/moreInfoBig.png')}
                    customStyles={styles.infoIcon}
                  />
                </TouchableOpacity>
                <Text>
                  <Text bold style={styles.toTimeDate}>{nowDate}</Text>
                  <Text style={styles.toTimeText}>{` ${atHour.trim()} `}</Text>
                  <Text bold style={styles.toTimeDate}>{nowHour}</Text>
                </Text>
              </View>

            </View>
            {RelevantCard}
          </View>
        </ScrollView>
      </FadeInView>

      <InfoModal
        strings={strings}
        showModal={showModal}
        firstPointDate={FPDate}
        closeModal={() => setModalVisibility(false)}
      />
    </>
  );
}

ScanHome: FunctionComponent<ScanHomeProps> = (
  {
    navigation,
    route,
    isRTL,
    strings,
    locale,
    languages,
    externalUrls,
    exposures,
    pastExposures,
    firstPoint,
    enableBle,
    batteryDisabled,
    hideLocationHistory,
    checkForceUpdate,
    checkIfHideLocationHistory,
    checkIfBleEnabled,
    checkIfBatteryDisabled
  }
) => {
  const appStateStatus = useRef<AppStateStatus>('active');
  const [{ hasLocation, hasNetwork, hasGPS }, setIsConnected] = useState({ hasLocation: true, hasNetwork: true, hasGPS: true });

  useEffect(() => {
    init();
  }, []);

  const init = async () => {
    checkIfHideLocationHistory();
    checkIfBatteryDisabled();
    checkConnectionStatusOnLoad();
    checkIfBleEnabled();
    SplashScreen.hide();

    if (exposures.length > 0) {
      navigation.navigate('ExposureDetected');
    } else {
      checkForceUpdate();

      await goToFilterDrivingIfNeeded(navigation);

      const url = await Linking.getInitialURL();


      if (url) {
        return onOpenedFromDeepLink(url, navigation);
      }

      await syncLocationsDBOnLocationEvent();
    }
  };

  useEffect(() => {
    AppState.addEventListener('change', onAppStateChange);
    NetInfo.addEventListener((state: NetInfoState) => setIsConnected({ hasLocation, hasNetwork: state.isConnected, hasGPS }));
    DeviceEventEmitter.addListener(RNSettings.GPS_PROVIDER_EVENT, handleGPSProviderEvent);

    return () => {
      AppState.removeEventListener('change', onAppStateChange);
      DeviceEventEmitter.removeListener(RNSettings.GPS_PROVIDER_EVENT, handleGPSProviderEvent);
    };
  }, [hasLocation, hasNetwork, hasGPS]);

  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        BackHandler.exitApp();
        return true;
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);

      return () => {
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
      };
    }, [])
  );

  const checkConnectionStatusOnLoad = async () => {
    const locationPermission = await checkLocationPermissions();
    const networkStatus = await NetInfo.fetch();
    const GPSStatus = await RNSettings.getSetting(RNSettings.LOCATION_SETTING);

    setIsConnected({ hasLocation: locationPermission === RESULTS.GRANTED, hasNetwork: networkStatus.isConnected, hasGPS: GPSStatus === RNSettings.ENABLED });
  };

  const onAppStateChange = async (state: AppStateStatus) => {
    if (state === 'active' && appStateStatus.current !== 'active') {
      checkIfHideLocationHistory();
      checkConnectionStatusOnLoad();
      checkIfBatteryDisabled();
    }

    appStateStatus.current = state;
  };

  const handleGPSProviderEvent = (e: any) => {
    setIsConnected({ hasLocation, hasNetwork, hasGPS: e[RNSettings.LOCATION_SETTING] === RNSettings.ENABLED });
  };

  const exposureState = () => {
    // user never got any exposure detected
    if (exposures.length + pastExposures.length === 0) {
      return 'pristine';
    }

    // check if user past exposures are relevant
    // ie: is less then 14 days old
    if (exposures.some(isAfter14Days) || pastExposures.some(isAfter14Days)) {
      return 'relevant';
    }

    return 'notRelevant';
  };


  const RelevantState = () => {
    if (!hasGPS || !hasLocation) return (<NoGPS {...strings.scanHome.noGPS} />);
    if (!hasNetwork) return (<NoNetwork {...strings.scanHome.noNetwork} />);
    return (
      <NoExposures
        isRTL={isRTL}
        strings={strings}
        firstPoint={firstPoint}
        exposureState={exposureState()}
        hideLocationHistory={hideLocationHistory}
        enableBle={enableBle}
        batteryDisabled={batteryDisabled}
        locale={locale}
        languages={languages}
        externalUrls={externalUrls}
        goToLocationHistory={() => navigation.navigate('LocationHistory')}
        goToBluetoothPermission={() => navigation.navigate('Bluetooth')}
        goToBatteryPermission={() => navigation.navigate('Battery')}
        showBleInfo={route.params?.showBleInfo}
      />
    );
  };


  return (
    <View style={styles.container}>
      <ScanHomeHeader
        enableBle={enableBle}
        languages={languages}
        isRTL={isRTL}
        locale={locale}
        externalUrls={externalUrls}
        strings={strings}
        openDrawer={navigation.openDrawer}
      />
      {RelevantState()}
    </View>
  );
}

ShareLocations = ({ route, navigation }: Props) => {
  const { isRTL, strings: { shareLocation: { title, description, greeting, button, addBleDataText } } } = useSelector<Store, LocaleReducer>(state => state.locale);
  const dispatch = useDispatch();

  const [state, setState] = useState<ShareStates>('beforeShare');
  const [failState, setFailState] = useState<ShareFailState>('');
  const [canRetry, setRetryState] = useState(true);
  const [agreeToBle, onValueSelected] = useState(true);
  const { token } = route.params;

  useEffect(() => {
    const netInfoUnsubscribe = NetInfo.addEventListener((connectionState: NetInfoState) => {
      if (!connectionState.isConnected) {
        setState('shareNoConnection');
      }
    });

    AppState.addEventListener('change', (appState: AppStateStatus) => {
      if (appState === 'background') {
        navigation.pop();
      }
    });

    return () => {
      netInfoUnsubscribe();
      AppState.removeEventListener('change', () => { });
    };
  }, []);

  const onButtonPress = async () => {
    try {
      if (canRetry) {
        if (state === 'shareNoConnection') {
          const connectionState: NetInfoState = await NetInfo.fetch();
          if (!connectionState.isConnected) return;
        }
        const { statusCode, statusDesc }: any = await dispatch(shareUserLocations(token, agreeToBle));

        switch (statusCode) {
          case 'CompleteSuccessfully':
          case 'CompletSuccessfully': {
            setState('shareSuccess');
            setRetryState(false);
            break;
          }
          case 'CompleteWithWarnings': {
            setState('shareFail');
            setFailState('WithWarnings');
            setRetryState(false);
            break;
          }
          case 'RunTimeError': {
            setState('shareFail');
            setFailState('TokenError');
            break;
          }
          case 'InvalidOperation': {
            switch (statusDesc) {
              case '1':
              case '2':
              case 1:
              case 2: {
                setState('shareFail');
                setFailState('TokenError');
                break;
              }
              case '3':
              case 3: {
                setState('shareSuccess');
                setRetryState(false);
                break;
              }
              default: {
                setState('shareFail');
                setFailState('MissingToken');
                break;
              }
            }
            break;
          }
          default: {
            setState('shareFail');
          }
        }
      } else {
        navigation.goBack();
      }
    } catch (error) {
      setState('shareFail');
      setRetryState(false);
    }
  };

  const Header = canRetry ? <HeaderButton type="close" onPress={() => navigation.pop()} /> : null;
  // @ts-ignore
  const combinedState: ShareStates & ShareFailState = state + failState;

  const AgreeToBleCheckbox = () => {
    if (!IS_IOS && ENABLE_BLE && state === 'beforeShare') {
      return (
        <TouchableOpacity style={{ flexDirection: isRTL ? 'row-reverse' : 'row', marginBottom: 23, paddingHorizontal: 30, alignItems: 'center' }} onPress={() => onValueSelected(!agreeToBle)} accessibilityRole="checkbox" checked={agreeToBle}>
          <View style={styles.box}>
            {agreeToBle && <Icon source={require('../../assets/onboarding/checked.png')} height={8} width={12} customStyles={{ tintColor: TEXT_COLOR }} />}
          </View>

          <Text style={[styles.text, { textAlign: isRTL ? 'right' : 'left' }]}>{addBleDataText}</Text>

        </TouchableOpacity>
      );
    }

    return null;
  };

  return (
    <View style={styles.container}>
      {Header}

      <View style={{ alignItems: 'center' }}>
        <Icon source={ICON[state]} width={IS_SMALL_SCREEN ? 66 : 88} height={IS_SMALL_SCREEN ? 45 : 60} />

        <Text style={styles.title} bold>{title[state]}</Text>
        <Text style={{ ...styles.description, fontSize: IS_SMALL_SCREEN ? 14 : 16 }}>{description[combinedState]}</Text>
        <Text style={{ fontSize: IS_SMALL_SCREEN ? 14 : 16 }} bold>{greeting[state]}</Text>
      </View>
      <View style={{ alignItems: 'center' }}>
        <AgreeToBleCheckbox />
        <ActionButton text={button[combinedState]} onPress={onButtonPress} />
      </View>
    </View>
  );
}

App: () => ReactElement = () => {
  // Register log listener
  const [messages, setMessages] = useState<Array<string> | null>(null);

  const logListener = (message: string) => {
    setMessages(oldMessages => {
      if (oldMessages == null) {
        return [];
      }
      return [...oldMessages, message];
    });
  };

  useEffect(() => {
    addLogListener(logListener);
    collectLogs()
      .then(logs => {
        setMessages(oldMessages => {
          if (oldMessages == null) {
            return logs;
          } else {
            return [...logs, ...oldMessages];
          }
        });
      })
      .catch();
    return () => {
      removeLogListener(logListener);
    };
  }, []);

  // Handle connection
  const [device, setDevice] = useState<Device | null>(null);
  const [connecting, setConnecting] = useState<boolean>(false);

  // Handle execution
  const [executing, setExecuting] = useState<boolean>(false);

  // Handle forground / background modes for logs.
  useEffect(() => {
    const appListener = (state: AppStateStatus) => {
      if (state === 'active') {
        collectLogs()
          .then(logs => {
            setMessages(oldMessages => {
              if (oldMessages == null) {
                return logs;
              } else {
                return [...logs, ...oldMessages];
              }
            });
          })
          .catch();
      } else {
        setMessages([]);
      }
    };
    AppState.addEventListener('change', appListener);
    return () => {
      AppState.removeEventListener('change', appListener);
    };
  }, []);

  return (
    <SafeAreaView style={styles.mainView}>
      <View style={styles.header}>
        <Button
          title={'Connect'}
          disabled={device != null || connecting}
          onPress={() => {
            setConnecting(true);
            establishConnection(() => {
              setDevice(null);
              setExecuting(false);
            })
              .then(connectedDevice => {
                setDevice(connectedDevice);
                setConnecting(false);
              })
              .catch(error => {
                log(`Failed to connect: ${error.message}`);
                setDevice(null);
                setExecuting(false);
                setConnecting(false);
              });
          }}
        />
        <Button
          title={'Disconnect'}
          disabled={device == null}
          onPress={() => {
            if (device != null) {
              cancelAllConnections()
                .then(() => {
                  setDevice(null);
                  setExecuting(false);
                })
                .catch(error => {
                  log(`Failed to disconnect: ${error.message}`);
                  setDevice(null);
                  setExecuting(false);
                });
            }
          }}
        />
        <Button
          title={'Execute'}
          disabled={device == null || executing}
          onPress={() => {
            if (device != null) {
              setExecuting(true);
              executeJob(device)
                .then(() => {
                  setExecuting(false);
                })
                .catch(error => {
                  log(`Failed to execute: ${error.message}`);
                  setExecuting(false);
                });
            }
          }}
        />
        <Button
          title={'Schedule'}
          onPress={() => {
            scheduleBackgroundProcessingTask()
              .then(() => {
                log('Schedule registered');
              })
              .catch(error => {
                log(`Schedule failed with error: ${error.message}`);
              });
          }}
        />
        <Button
          title={'Clear'}
          onPress={() => {
            clearAllLogs();
            setMessages([]);
          }}
        />
      </View>
      {messages == null ? (
        <Text>Waiting for messages...</Text>
      ) : (
        <FlatList
          style={styles.flatList}
          data={messages}
          renderItem={({item}) => {
            return (
              <View style={styles.messageBox}>
                <Text style={styles.messageText}>{item}</Text>
              </View>
            );
          }}
          keyExtractor={(_item, index) => {
            return index.toString();
          }}
        />
      )}
    </SafeAreaView>
  );
}

Main = ({
  loadAccount,
  loadProperties,
  loadPrices,
  fetchPhishingAccounts,
  user,
  properties,
  accounts,
  lastAccount,
  navigation,
  hive_authentication_service,
}: PropsFromRedux & {navigation: WalletNavigation}) => {
  const styles = getDimensionedStyles(useWindowDimensions());

  useEffect(() => {
    loadAccount(lastAccount || accounts[0].name);
    loadProperties();
    loadPrices();
    fetchPhishingAccounts();
  }, [
    loadAccount,
    accounts,
    loadProperties,
    loadPrices,
    fetchPhishingAccounts,
    lastAccount,
  ]);

  useLockedPortrait(navigation);

  const appState = useRef(AppState.currentState);

  useEffect(() => {
    const handler = (nextAppState: AppStateStatus) => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === 'active'
      ) {
        if (
          hive_authentication_service.instances.length &&
          !hive_authentication_service.instances.filter(
            (e) => e.init && e.connected,
          ).length
        ) {
          restartHASSockets();
        }
      }

      appState.current = nextAppState;
    };
    AppState.addEventListener('change', handler);

    return () => {
      AppState.removeEventListener('change', handler);
    };
  }, []);

  if (!user) {
    return null;
  }

  return (
    <WalletPage>
      <>
        <UserPicker
          accounts={accounts.map((account) => account.name)}
          username={user.name!}
          onAccountSelected={loadAccount}
        />
        <View style={styles.resourcesWrapper}>
          <PercentageDisplay
            name={translate('wallet.rc')}
            percent={user.rc.percentage / 100 || 100}
            color="#E59D15"
          />
          <PercentageDisplay
            name={translate('wallet.vp')}
            percent={getVP(user.account) || 100}
            color="#3BB26E"
            secondary={`$${
              getVotingDollarsPerAccount(
                100,
                properties,
                user.account,
                false,
              ) || '0'
            }`}
          />
        </View>
        <ScreenToggle
          style={styles.toggle}
          menu={[
            translate(`wallet.menu.hive`),
            translate(`wallet.menu.history`),
            translate(`wallet.menu.tokens`),
          ]}
          toUpperCase
          components={[<Primary />, <Transactions user={user} />, <Tokens />]}
        />
      </>
    </WalletPage>
  );
}