From f828b5dc29d0f9bbc18a97ca9afacdaaa788c311 Mon Sep 17 00:00:00 2001
From: nileshbhingaradiya <bhingaradiyanilesh@gmail.com>
Date: Fri, 17 Sep 2021 13:54:59 +0530
Subject: [PATCH] 16 Add timezone / date format option in 'Settings' area

---
 .editorconfig                        |  25 ++
 .prettierrc.js                       |   1 +
 App.js                               | 480 +++++++++++----------
 components/PlayerError.js            |  22 +-
 components/ToggleNavigationButton.js |  14 +-
 ios/Podfile.lock                     | 612 ++++++++++++++-------------
 lib/api.js                           | 233 +++++-----
 lib/notification.js                  |  26 +-
 lib/storage.js                       | 166 ++++----
 lib/util.js                          |  91 ++--
 notification.js                      |  99 +++--
 package.json                         |   4 +
 screens/CameraScreen.js              | 544 ++++++++++++++++--------
 screens/ConnectServerScreen.js       | 165 ++++----
 screens/EventScreen.js               |  96 ++---
 screens/ServerSettingsScreen.js      | 554 ++++++++++++++----------
 screens/SettingsScreen.js            | 184 ++++++++
 state.js                             |  48 ++-
 stylesheet.js                        |  23 +-
 yarn.lock                            |  34 +-
 20 files changed, 1997 insertions(+), 1424 deletions(-)
 create mode 100644 .editorconfig
 create mode 100644 screens/SettingsScreen.js

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..8bde8ad
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,25 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+root = true
+[*]
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+# editorconfig-tools is unable to ignore longs strings or urls
+max_line_length = 120
+
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+
+# Use tabs for indentation (Makefiles require tabs)
+indent_style = tab
+
diff --git a/.prettierrc.js b/.prettierrc.js
index 5c4de1a..a9c3800 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -3,4 +3,5 @@ module.exports = {
   jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
+  printWidth: 120,
 };
diff --git a/App.js b/App.js
index 956056c..4c1f1af 100644
--- a/App.js
+++ b/App.js
@@ -6,7 +6,6 @@
  * @flow strict-local
  */
 
-
 import 'react-native-gesture-handler';
 import SplashScreen from 'react-native-splash-screen';
 
@@ -15,16 +14,15 @@ import messaging from '@react-native-firebase/messaging';
 import React, {useEffect, useReducer, useRef, useCallback, useState} from 'react';
 
 import {NavigationContainer, DarkTheme, useTheme} from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
-import { createDrawerNavigator} from '@react-navigation/drawer';
+import {createStackNavigator} from '@react-navigation/stack';
+import {createDrawerNavigator} from '@react-navigation/drawer';
 
 import Orientation from 'react-native-orientation-locker';
 import Toast from 'react-native-toast-message';
 
-import styles from './stylesheet';
-
 import ConnectServerScreen from './screens/ConnectServerScreen';
 import ServerSettingsScreen from './screens/ServerSettingsScreen';
+import SettingsScreen from './screens/SettingsScreen';
 
 import SessionContext from './session-context';
 import {CameraScreen, DirectCameraScreen} from './screens/CameraScreen';
@@ -32,14 +30,14 @@ import EventScreen from './screens/EventScreen';
 import DrawerMenu from './menu';
 import {Button, View, Alert, Text, Platform} from 'react-native';
 
-import { MenuProvider } from 'react-native-popup-menu';
+import {MenuProvider} from 'react-native-popup-menu';
 
 import {
-    getAccountInfoList,
-    getActiveAccountInfoByList,
-    getTargetAccountByServerId,
-    removeAccountInfo,
-    getSelectedCameraList
+  getAccountInfoList,
+  getActiveAccountInfoByList,
+  getTargetAccountByServerId,
+  removeAccountInfo,
+  getSelectedCameraList,
 } from './lib/storage';
 
 const Stack = createStackNavigator();
@@ -52,220 +50,266 @@ import {handleNotification, isValidNotificationType} from './notification';
 import {initialState, reducer} from './state';
 
 function ServerRemoveButton({id, name, serverUuid, address, port, navigation, updateAccountList}) {
-    return (<Button title="Remove" color="red" onPress={() => Alert.alert(
-        'Server Removal Confirmation',
-        'Are you sure to remove "' + name + '" server?',
-        [
-            { text: 'Cancel', style: 'cancel'},
-            { text: 'Confirm', style: 'destructive',
-                onPress: async() => {
-
-                    const url = 'https://' + address + (port ? ':' + port : '');
-
-                    try {
-                        await unsaveNotificationToken(url, id, serverUuid);
-                    } catch (err) {
-                        Toast.show({
-                            type: 'error',
-                            text1: 'Notification System',
-                            text2: err.message
-                        });
-                    }
-
-                    await removeAccountInfo(id);
-
-                    await updateAccountList();
-                    navigation.goBack();
+  return (
+    <Button
+      title="Remove"
+      color="red"
+      onPress={() =>
+        Alert.alert(
+          'Server Removal Confirmation',
+          'Are you sure to remove "' + name + '" server?',
+          [
+            {text: 'Cancel', style: 'cancel'},
+            {
+              text: 'Confirm',
+              style: 'destructive',
+              onPress: async () => {
+                const url = 'https://' + address + (port ? ':' + port : '');
+
+                try {
+                  await unsaveNotificationToken(url, id, serverUuid);
+                } catch (err) {
+                  Toast.show({
+                    type: 'error',
+                    text1: 'Notification System',
+                    text2: err.message,
+                  });
                 }
-            }
-        ],
-        {cancelable: true})} />);
-}
 
+                await removeAccountInfo(id);
+
+                await updateAccountList();
+                navigation.goBack();
+              },
+            },
+          ],
+          {cancelable: true},
+        )
+      }
+    />
+  );
+}
 
 const App: () => React$Node = () => {
-
-    const navRef = useRef(null);
-    const [state, dispatch] = useReducer(reducer, initialState);
-    const [notification, setNotification] = useState(null);
-
-    const updateAccountList = async() => {
-        const list = await getAccountInfoList();
-        dispatch({type: 'update_account_list', payload: list});
-        return list;
-    };
-
-    const loginTargetAccount = useCallback((targetAccount, targetDevice) => {
-
-        if (!targetAccount) {
-            SplashScreen.hide();
-            return;
-        }
-
-        const [id, accountRecord] = targetAccount;
-        const {address, login, password, port} = accountRecord;
-
-        checkServerCredentials('https://' + address+ (port ? ':' + port : ''), login, password).then(status => {
-            if (status !== false) {
-                dispatch({
-                    type: 'login',
-                    payload: {id, ...accountRecord},
-                    targetDevice
-                });
-            }
-        });
-    }, []);
-
-    const navigateTargetDevice = useCallback((deviceList, targetDevice) => {
-
-        if (!targetDevice) {
-            SplashScreen.hide();
-            return;
-        }
-
-        SplashScreen.show();
-
-        let params = {};
-
-        if (deviceList.find(({id}) => parseInt(id) === parseInt(targetDevice))) {
-            params = {
-                screen: 'DeviceDirectPlay',
-                params: {
-                    deviceId: targetDevice
-                }
-            };
-        }
-
-        navRef.current?.navigate('DirectCamera', params);
-
-    }, []);
-
-    const onShowCamera = useCallback((deviceId) => {
-
-        SplashScreen.show();
-
-        navRef.current?.navigate('DirectCamera', {
-            screen: 'DeviceDirectPlay',
-            params: {
-                deviceId: deviceId
-            }
-        });
-    }, []);
-
-
-    useEffect(() => {
-        (Platform.OS === 'android') && SplashScreen.show();
-
-        const msg = messaging();
-        msg.onNotificationOpenedApp((message) => setNotification(message));
-        msg.setBackgroundMessageHandler(async message => {});
-    }, []);
-
-
-    useEffect(() => {
-
-        if (!notification) {
-            return;
-        }
-
-        const {serverId, deviceId, eventType} = notification.data;
-
-        if (state.activeAccount && state.activeAccount.serverUuid === serverId) {
-            if (isValidNotificationType(eventType)) {
-                navigateTargetDevice(state.deviceList, deviceId);
-            }
-            return;
-        }
-
-        dispatch({type: 'logout'});
-
-        getTargetAccountByServerId(state.accountList, serverId).then(targetAccount => {
-
-            if (!targetAccount) {
-                return;
-            }
-
-            loginTargetAccount(targetAccount, isValidNotificationType(eventType) ? deviceId : null);
+  const navRef = useRef(null);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [notification, setNotification] = useState(null);
+
+  const updateAccountList = async () => {
+    const list = await getAccountInfoList();
+    dispatch({type: 'update_account_list', payload: list});
+    return list;
+  };
+
+  const loginTargetAccount = useCallback((targetAccount, targetDevice) => {
+    if (!targetAccount) {
+      SplashScreen.hide();
+      return;
+    }
+
+    const [id, accountRecord] = targetAccount;
+    const {address, login, password, port} = accountRecord;
+
+    checkServerCredentials('https://' + address + (port ? ':' + port : ''), login, password).then((status) => {
+      if (status !== false) {
+        dispatch({
+          type: 'login',
+          payload: {id, ...accountRecord},
+          targetDevice,
         });
-
-    }, [notification]);
-
-
-    useEffect(() => {
-
-        if (!state.activeAccount) {
-            Orientation.lockToPortrait();
+      }
+    });
+  }, []);
+
+  const navigateTargetDevice = useCallback((deviceList, targetDevice) => {
+    if (!targetDevice) {
+      SplashScreen.hide();
+      return;
+    }
+
+    SplashScreen.show();
+
+    let params = {};
+
+    if (deviceList.find(({id}) => parseInt(id) === parseInt(targetDevice))) {
+      params = {
+        screen: 'DeviceDirectPlay',
+        params: {
+          deviceId: targetDevice,
+        },
+      };
+    }
+
+    navRef.current?.navigate('DirectCamera', params);
+  }, []);
+
+  const onShowCamera = useCallback((deviceId) => {
+    SplashScreen.show();
+
+    navRef.current?.navigate('DirectCamera', {
+      screen: 'DeviceDirectPlay',
+      params: {
+        deviceId: deviceId,
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    Platform.OS === 'android' && SplashScreen.show();
+
+    const msg = messaging();
+    msg.onNotificationOpenedApp((message) => setNotification(message));
+    msg.setBackgroundMessageHandler(async (message) => {});
+  }, []);
+
+  useEffect(() => {
+    if (!notification) {
+      return;
+    }
+
+    const {serverId, deviceId, eventType} = notification.data;
+
+    if (state.activeAccount && state.activeAccount.serverUuid === serverId) {
+      if (isValidNotificationType(eventType)) {
+        navigateTargetDevice(state.deviceList, deviceId);
+      }
+      return;
+    }
+
+    dispatch({type: 'logout'});
+
+    getTargetAccountByServerId(state.accountList, serverId).then((targetAccount) => {
+      if (!targetAccount) {
+        return;
+      }
+
+      loginTargetAccount(targetAccount, isValidNotificationType(eventType) ? deviceId : null);
+    });
+  }, [notification]);
+
+  useEffect(() => {
+    if (!state.activeAccount) {
+      Orientation.lockToPortrait();
+    }
+
+    updateAccountList().then(async (accountList) => {
+      if (!state.activeAccount) {
+        const initialNotification = await messaging().getInitialNotification();
+        if (initialNotification) {
+          const {serverId, deviceId, eventType} = initialNotification.data;
+          loginTargetAccount(
+            await getTargetAccountByServerId(accountList, serverId),
+            isValidNotificationType(eventType) ? deviceId : null,
+          );
+        } else {
+          loginTargetAccount(await getActiveAccountInfoByList(accountList));
         }
-
-        updateAccountList().then(async (accountList) => {
-
-            if (!state.activeAccount) {
-
-                const initialNotification = await messaging().getInitialNotification();
-                if (initialNotification) {
-                    const {serverId, deviceId, eventType} = initialNotification.data;
-                    loginTargetAccount(await getTargetAccountByServerId(accountList, serverId),
-                        isValidNotificationType(eventType) ? deviceId : null);
-                } else {
-                    loginTargetAccount(await getActiveAccountInfoByList(accountList));
+        return;
+      }
+
+      Promise.all([getAvailableDevices(state.activeAccount), getSelectedCameraList(state.activeAccount.id)]).then(
+        ([deviceList, selectedDeviceList]) => {
+          dispatch({
+            type: 'update_all_device_list',
+            deviceList,
+            selectedDeviceList,
+          });
+
+          navigateTargetDevice(deviceList, state.targetDevice);
+        },
+      );
+    });
+
+    return handleNotification(state, onShowCamera);
+  }, [state.activeAccount]);
+
+  return (
+    <SessionContext.Provider value={{state, dispatch, updateAccountList}}>
+      <MenuProvider>
+        <NavigationContainer ref={navRef} theme={DarkTheme}>
+          {state.activeAccount ? (
+            <Drawer.Navigator drawerContent={(props) => <DrawerMenu {...props} />}>
+              <Drawer.Screen
+                name="Camera"
+                options={{title: 'Screens'}}
+                component={CameraScreen}
+                listeners={{
+                  focus: () => {
+                    SplashScreen.hide();
+                    Orientation.lockToLandscape();
+                  },
+                }}
+              />
+              <Drawer.Screen
+                name="DirectCamera"
+                component={DirectCameraScreen}
+                options={{title: 'Direct Camera'}}
+                listeners={{
+                  focus: () => {
+                    SplashScreen.hide();
+                    Orientation.lockToLandscape();
+                  },
+                }}
+              />
+              <Drawer.Screen
+                name="Event"
+                component={EventScreen}
+                listeners={{
+                  focus: () => {
+                    SplashScreen.hide();
+                    Orientation.lockToLandscape();
+                  },
+                }}
+              />
+              <Drawer.Screen
+                name="Settings"
+                component={SettingsScreen}
+                options={{title: 'Settings'}}
+                listeners={{
+                  focus: () => {
+                    SplashScreen.hide();
+                  },
+                }}
+              />
+            </Drawer.Navigator>
+          ) : (
+            <Stack.Navigator>
+              <Stack.Screen
+                name="Home"
+                component={ConnectServerScreen}
+                options={{headerShown: false}}
+                listeners={{
+                  focus: () => Orientation.lockToPortrait(),
+                }}
+              />
+              <Stack.Screen
+                name="ServerSettings"
+                component={ServerSettingsScreen}
+                options={({route, navigation}) =>
+                  route.params?.id
+                    ? {
+                        title: 'Edit Server',
+                        headerRight: () => (
+                          <ServerRemoveButton
+                            {...route.params}
+                            navigation={navigation}
+                            updateAccountList={updateAccountList}
+                          />
+                        ),
+                      }
+                    : {title: 'Add Server'}
                 }
-                return;
-            }
-
-            Promise.all([
-                getAvailableDevices(state.activeAccount),
-                getSelectedCameraList(state.activeAccount.id)
-            ]).then(([deviceList, selectedDeviceList]) => {
-                dispatch({type: 'update_all_device_list', deviceList, selectedDeviceList});
-
-                navigateTargetDevice(deviceList, state.targetDevice);
-
-            });
-
-        });
-
-        return handleNotification(state, onShowCamera);
-
-    }, [state.activeAccount]);
-
-    return (
-        <SessionContext.Provider value={{state, dispatch, updateAccountList}}>
-            <MenuProvider>
-            <NavigationContainer ref={navRef} theme={DarkTheme}>
-                {state.activeAccount ? (
-                    <Drawer.Navigator drawerContent={(props) => <DrawerMenu {...props} />}>
-                        <Drawer.Screen name="Camera" options={{title: 'Screens'}} component={CameraScreen} listeners={{
-                            focus: () => {SplashScreen.hide(); Orientation.lockToLandscape()}
-                        }} />
-                        <Drawer.Screen name="DirectCamera" component={DirectCameraScreen} options={{title: 'Direct Camera'}} listeners={{
-                            focus: () => {SplashScreen.hide(); Orientation.lockToLandscape()}
-                        }} />
-                        <Drawer.Screen name="Event" component={EventScreen} listeners={{
-                            focus: () => {SplashScreen.hide(); Orientation.lockToLandscape()}
-                        }} />
-                    </Drawer.Navigator>
-                ) : (
-                    <Stack.Navigator>
-                        <Stack.Screen name="Home" component={ConnectServerScreen} options={{headerShown: false}} listeners={{
-                            focus: () => Orientation.lockToPortrait()
-                        }} />
-                        <Stack.Screen name="ServerSettings" component={ServerSettingsScreen}
-                                      options={({route, navigation}) =>
-                                          (route.params?.id ? {title:  'Edit Server',
-                                                  headerRight: () => <ServerRemoveButton {...route.params} navigation={navigation}
-                                                                                         updateAccountList={updateAccountList} />}
-                                              : {title: 'Add Server'})} listeners={{
-                            focus: () => Orientation.lockToPortrait()
-                        }} />
-                    </Stack.Navigator>
-                )}
-            </NavigationContainer>
-            <Toast ref={(ref) => Toast.setRef(ref)} />
-            </MenuProvider>
-        </SessionContext.Provider>
-    );
+                listeners={{
+                  focus: () => Orientation.lockToPortrait(),
+                }}
+              />
+            </Stack.Navigator>
+          )}
+        </NavigationContainer>
+        <Toast ref={(ref) => Toast.setRef(ref)} />
+      </MenuProvider>
+    </SessionContext.Provider>
+  );
 };
 
-
-
 export default App;
diff --git a/components/PlayerError.js b/components/PlayerError.js
index 65ccb4e..2f6a395 100644
--- a/components/PlayerError.js
+++ b/components/PlayerError.js
@@ -1,13 +1,15 @@
-
-import {TouchableOpacity, View} from "react-native";
-import Icon from "react-native-vector-icons/MaterialIcons";
-import React from "react";
+import {TouchableOpacity, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import React from 'react';
 
 export default function PlayerError({onPress}) {
-    return (<View style={{flex: 1}}>
-        <TouchableOpacity style={{flex:1, alignItems: 'center',
-            justifyContent: 'center', backgroundColor: 'red'}} onPress={onPress}>
-            <Icon name="broken-image" size={90} color="#ffffff" />
-        </TouchableOpacity>
-    </View>);
+  return (
+    <View style={{flex: 1}}>
+      <TouchableOpacity
+        style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'red'}}
+        onPress={onPress}>
+        <Icon name="broken-image" size={90} color="#ffffff" />
+      </TouchableOpacity>
+    </View>
+  );
 }
diff --git a/components/ToggleNavigationButton.js b/components/ToggleNavigationButton.js
index cd4bf92..e7e682e 100644
--- a/components/ToggleNavigationButton.js
+++ b/components/ToggleNavigationButton.js
@@ -1,14 +1,16 @@
-
 import React from 'react';
 import {useNavigation} from '@react-navigation/native';
 import {TouchableOpacity} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
 export default function ToggleNavigationButton() {
-    const navigation = useNavigation();
+  const navigation = useNavigation();
 
-    return <TouchableOpacity onPress={() => navigation.toggleDrawer()} style={{backgroundColor: '#333333',
-        borderColor: '#777777', borderStyle: 'solid', borderWidth: 1, padding: 5}}>
-        <Icon name="menu" size={20} color="#ffffff" />
-    </TouchableOpacity>;
+  return (
+    <TouchableOpacity
+      onPress={() => navigation.toggleDrawer()}
+      style={{backgroundColor: '#333333', borderColor: '#777777', borderStyle: 'solid', borderWidth: 1, padding: 5}}>
+      <Icon name="menu" size={20} color="#ffffff" />
+    </TouchableOpacity>
+  );
 }
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index fcf0cde..23eb04c 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1,16 +1,15 @@
 PODS:
   - boost-for-react-native (1.63.0)
   - CocoaAsyncSocket (7.6.5)
-  - CocoaLibEvent (1.0.0)
   - DoubleConversion (1.1.6)
-  - FBLazyVector (0.63.4)
-  - FBReactNativeSpec (0.63.4):
-    - Folly (= 2020.01.13.00)
-    - RCTRequired (= 0.63.4)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
+  - FBLazyVector (0.64.1)
+  - FBReactNativeSpec (0.64.1):
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTRequired (= 0.64.1)
+    - RCTTypeSafety (= 0.64.1)
+    - React-Core (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - ReactCommon/turbomodule/core (= 0.64.1)
   - Firebase/CoreOnly (7.9.0):
     - FirebaseCore (= 7.9.0)
   - Firebase/Messaging (7.9.0):
@@ -42,259 +41,276 @@ PODS:
     - GoogleUtilities/Environment (~> 7.0)
     - GoogleUtilities/Reachability (~> 7.0)
     - GoogleUtilities/UserDefaults (~> 7.0)
-  - Flipper (0.54.0):
-    - Flipper-Folly (~> 2.2)
-    - Flipper-RSocket (~> 1.1)
+  - Flipper (0.75.1):
+    - Flipper-Folly (~> 2.5)
+    - Flipper-RSocket (~> 1.3)
   - Flipper-DoubleConversion (1.1.7)
-  - Flipper-Folly (2.3.0):
+  - Flipper-Folly (2.5.0):
     - boost-for-react-native
-    - CocoaLibEvent (~> 1.0)
     - Flipper-DoubleConversion
     - Flipper-Glog
-    - OpenSSL-Universal (= 1.0.2.20)
+    - libevent (~> 2.1.11)
+    - OpenSSL-Universal (= 1.1.180)
   - Flipper-Glog (0.3.6)
   - Flipper-PeerTalk (0.0.4)
-  - Flipper-RSocket (1.1.1):
-    - Flipper-Folly (~> 2.3)
-  - FlipperKit (0.54.0):
-    - FlipperKit/Core (= 0.54.0)
-  - FlipperKit/Core (0.54.0):
-    - Flipper (~> 0.54.0)
+  - Flipper-RSocket (1.3.1):
+    - Flipper-Folly (~> 2.5)
+  - FlipperKit (0.75.1):
+    - FlipperKit/Core (= 0.75.1)
+  - FlipperKit/Core (0.75.1):
+    - Flipper (~> 0.75.1)
     - FlipperKit/CppBridge
     - FlipperKit/FBCxxFollyDynamicConvert
     - FlipperKit/FBDefines
     - FlipperKit/FKPortForwarding
-  - FlipperKit/CppBridge (0.54.0):
-    - Flipper (~> 0.54.0)
-  - FlipperKit/FBCxxFollyDynamicConvert (0.54.0):
-    - Flipper-Folly (~> 2.2)
-  - FlipperKit/FBDefines (0.54.0)
-  - FlipperKit/FKPortForwarding (0.54.0):
+  - FlipperKit/CppBridge (0.75.1):
+    - Flipper (~> 0.75.1)
+  - FlipperKit/FBCxxFollyDynamicConvert (0.75.1):
+    - Flipper-Folly (~> 2.5)
+  - FlipperKit/FBDefines (0.75.1)
+  - FlipperKit/FKPortForwarding (0.75.1):
     - CocoaAsyncSocket (~> 7.6)
     - Flipper-PeerTalk (~> 0.0.4)
-  - FlipperKit/FlipperKitHighlightOverlay (0.54.0)
-  - FlipperKit/FlipperKitLayoutPlugin (0.54.0):
+  - FlipperKit/FlipperKitHighlightOverlay (0.75.1)
+  - FlipperKit/FlipperKitLayoutPlugin (0.75.1):
     - FlipperKit/Core
     - FlipperKit/FlipperKitHighlightOverlay
     - FlipperKit/FlipperKitLayoutTextSearchable
     - YogaKit (~> 1.18)
-  - FlipperKit/FlipperKitLayoutTextSearchable (0.54.0)
-  - FlipperKit/FlipperKitNetworkPlugin (0.54.0):
+  - FlipperKit/FlipperKitLayoutTextSearchable (0.75.1)
+  - FlipperKit/FlipperKitNetworkPlugin (0.75.1):
     - FlipperKit/Core
-  - FlipperKit/FlipperKitReactPlugin (0.54.0):
+  - FlipperKit/FlipperKitReactPlugin (0.75.1):
     - FlipperKit/Core
-  - FlipperKit/FlipperKitUserDefaultsPlugin (0.54.0):
+  - FlipperKit/FlipperKitUserDefaultsPlugin (0.75.1):
     - FlipperKit/Core
-  - FlipperKit/SKIOSNetworkPlugin (0.54.0):
+  - FlipperKit/SKIOSNetworkPlugin (0.75.1):
     - FlipperKit/Core
     - FlipperKit/FlipperKitNetworkPlugin
-  - Folly (2020.01.13.00):
-    - boost-for-react-native
-    - DoubleConversion
-    - Folly/Default (= 2020.01.13.00)
-    - glog
-  - Folly/Default (2020.01.13.00):
-    - boost-for-react-native
-    - DoubleConversion
-    - glog
   - glog (0.3.5)
   - GoogleDataTransport (8.4.0):
     - GoogleUtilities/Environment (~> 7.2)
     - nanopb (~> 2.30908.0)
     - PromisesObjC (~> 1.2)
-  - GoogleUtilities/AppDelegateSwizzler (7.3.1):
+  - GoogleUtilities/AppDelegateSwizzler (7.6.0):
     - GoogleUtilities/Environment
     - GoogleUtilities/Logger
     - GoogleUtilities/Network
-  - GoogleUtilities/Environment (7.3.1):
-    - PromisesObjC (~> 1.2)
-  - GoogleUtilities/Logger (7.3.1):
+  - GoogleUtilities/Environment (7.6.0):
+    - PromisesObjC (< 3.0, >= 1.2)
+  - GoogleUtilities/Logger (7.6.0):
     - GoogleUtilities/Environment
-  - GoogleUtilities/Network (7.3.1):
+  - GoogleUtilities/Network (7.6.0):
     - GoogleUtilities/Logger
     - "GoogleUtilities/NSData+zlib"
     - GoogleUtilities/Reachability
-  - "GoogleUtilities/NSData+zlib (7.3.1)"
-  - GoogleUtilities/Reachability (7.3.1):
+  - "GoogleUtilities/NSData+zlib (7.6.0)"
+  - GoogleUtilities/Reachability (7.6.0):
     - GoogleUtilities/Logger
-  - GoogleUtilities/UserDefaults (7.3.1):
+  - GoogleUtilities/UserDefaults (7.6.0):
     - GoogleUtilities/Logger
+  - libevent (2.1.12)
   - MobileVLCKit (3.3.14)
   - nanopb (2.30908.0):
     - nanopb/decode (= 2.30908.0)
     - nanopb/encode (= 2.30908.0)
   - nanopb/decode (2.30908.0)
   - nanopb/encode (2.30908.0)
-  - OpenSSL-Universal (1.0.2.20):
-    - OpenSSL-Universal/Static (= 1.0.2.20)
-  - OpenSSL-Universal/Static (1.0.2.20)
+  - OpenSSL-Universal (1.1.180)
   - PromisesObjC (1.2.12)
-  - RCTRequired (0.63.4)
-  - RCTTypeSafety (0.63.4):
-    - FBLazyVector (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTRequired (= 0.63.4)
-    - React-Core (= 0.63.4)
-  - React (0.63.4):
-    - React-Core (= 0.63.4)
-    - React-Core/DevSupport (= 0.63.4)
-    - React-Core/RCTWebSocket (= 0.63.4)
-    - React-RCTActionSheet (= 0.63.4)
-    - React-RCTAnimation (= 0.63.4)
-    - React-RCTBlob (= 0.63.4)
-    - React-RCTImage (= 0.63.4)
-    - React-RCTLinking (= 0.63.4)
-    - React-RCTNetwork (= 0.63.4)
-    - React-RCTSettings (= 0.63.4)
-    - React-RCTText (= 0.63.4)
-    - React-RCTVibration (= 0.63.4)
-  - React-callinvoker (0.63.4)
-  - React-Core (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - RCT-Folly (2020.01.13.00):
+    - boost-for-react-native
+    - DoubleConversion
+    - glog
+    - RCT-Folly/Default (= 2020.01.13.00)
+  - RCT-Folly/Default (2020.01.13.00):
+    - boost-for-react-native
+    - DoubleConversion
     - glog
-    - React-Core/Default (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+  - RCTRequired (0.64.1)
+  - RCTTypeSafety (0.64.1):
+    - FBLazyVector (= 0.64.1)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTRequired (= 0.64.1)
+    - React-Core (= 0.64.1)
+  - React (0.64.1):
+    - React-Core (= 0.64.1)
+    - React-Core/DevSupport (= 0.64.1)
+    - React-Core/RCTWebSocket (= 0.64.1)
+    - React-RCTActionSheet (= 0.64.1)
+    - React-RCTAnimation (= 0.64.1)
+    - React-RCTBlob (= 0.64.1)
+    - React-RCTImage (= 0.64.1)
+    - React-RCTLinking (= 0.64.1)
+    - React-RCTNetwork (= 0.64.1)
+    - React-RCTSettings (= 0.64.1)
+    - React-RCTText (= 0.64.1)
+    - React-RCTVibration (= 0.64.1)
+  - React-callinvoker (0.64.1)
+  - React-Core (0.64.1):
+    - glog
+    - RCT-Folly (= 2020.01.13.00)
+    - React-Core/Default (= 0.64.1)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/CoreModulesHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/CoreModulesHeaders (0.64.1):
     - glog
+    - RCT-Folly (= 2020.01.13.00)
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/Default (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/Default (0.64.1):
     - glog
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/DevSupport (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/DevSupport (0.64.1):
     - glog
-    - React-Core/Default (= 0.63.4)
-    - React-Core/RCTWebSocket (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
-    - React-jsinspector (= 0.63.4)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-Core/Default (= 0.64.1)
+    - React-Core/RCTWebSocket (= 0.64.1)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-jsinspector (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/RCTActionSheetHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTActionSheetHeaders (0.64.1):
     - glog
+    - RCT-Folly (= 2020.01.13.00)
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/RCTAnimationHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTAnimationHeaders (0.64.1):
     - glog
+    - RCT-Folly (= 2020.01.13.00)
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/RCTBlobHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTBlobHeaders (0.64.1):
     - glog
+    - RCT-Folly (= 2020.01.13.00)
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/RCTImageHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTImageHeaders (0.64.1):
     - glog
+    - RCT-Folly (= 2020.01.13.00)
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/RCTLinkingHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTLinkingHeaders (0.64.1):
     - glog
+    - RCT-Folly (= 2020.01.13.00)
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/RCTNetworkHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTNetworkHeaders (0.64.1):
     - glog
+    - RCT-Folly (= 2020.01.13.00)
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/RCTSettingsHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTSettingsHeaders (0.64.1):
     - glog
+    - RCT-Folly (= 2020.01.13.00)
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/RCTTextHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTTextHeaders (0.64.1):
     - glog
+    - RCT-Folly (= 2020.01.13.00)
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/RCTVibrationHeaders (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTVibrationHeaders (0.64.1):
     - glog
+    - RCT-Folly (= 2020.01.13.00)
     - React-Core/Default
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-Core/RCTWebSocket (0.63.4):
-    - Folly (= 2020.01.13.00)
+  - React-Core/RCTWebSocket (0.64.1):
     - glog
-    - React-Core/Default (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-jsiexecutor (= 0.63.4)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-Core/Default (= 0.64.1)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsiexecutor (= 0.64.1)
+    - React-perflogger (= 0.64.1)
     - Yoga
-  - React-CoreModules (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/CoreModulesHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-RCTImage (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-cxxreact (0.63.4):
+  - React-CoreModules (0.64.1):
+    - FBReactNativeSpec (= 0.64.1)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.64.1)
+    - React-Core/CoreModulesHeaders (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-RCTImage (= 0.64.1)
+    - ReactCommon/turbomodule/core (= 0.64.1)
+  - React-cxxreact (0.64.1):
     - boost-for-react-native (= 1.63.0)
     - DoubleConversion
-    - Folly (= 2020.01.13.00)
     - glog
-    - React-callinvoker (= 0.63.4)
-    - React-jsinspector (= 0.63.4)
-  - React-jsi (0.63.4):
+    - RCT-Folly (= 2020.01.13.00)
+    - React-callinvoker (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-jsinspector (= 0.64.1)
+    - React-perflogger (= 0.64.1)
+    - React-runtimeexecutor (= 0.64.1)
+  - React-jsi (0.64.1):
     - boost-for-react-native (= 1.63.0)
     - DoubleConversion
-    - Folly (= 2020.01.13.00)
     - glog
-    - React-jsi/Default (= 0.63.4)
-  - React-jsi/Default (0.63.4):
+    - RCT-Folly (= 2020.01.13.00)
+    - React-jsi/Default (= 0.64.1)
+  - React-jsi/Default (0.64.1):
     - boost-for-react-native (= 1.63.0)
     - DoubleConversion
-    - Folly (= 2020.01.13.00)
     - glog
-  - React-jsiexecutor (0.63.4):
+    - RCT-Folly (= 2020.01.13.00)
+  - React-jsiexecutor (0.64.1):
     - DoubleConversion
-    - Folly (= 2020.01.13.00)
     - glog
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
-  - React-jsinspector (0.63.4)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-perflogger (= 0.64.1)
+  - React-jsinspector (0.64.1)
   - react-native-get-random-values (1.6.0):
     - React-Core
   - react-native-orientation-locker (1.2.0):
@@ -311,70 +327,76 @@ PODS:
   - react-native-vlc-media-player (1.0.6):
     - MobileVLCKit (= 3.3.14)
     - React
-  - React-RCTActionSheet (0.63.4):
-    - React-Core/RCTActionSheetHeaders (= 0.63.4)
-  - React-RCTAnimation (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTAnimationHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTBlob (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - React-Core/RCTBlobHeaders (= 0.63.4)
-    - React-Core/RCTWebSocket (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-RCTNetwork (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTImage (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTImageHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - React-RCTNetwork (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTLinking (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - React-Core/RCTLinkingHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTNetwork (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTNetworkHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTSettings (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - RCTTypeSafety (= 0.63.4)
-    - React-Core/RCTSettingsHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - React-RCTText (0.63.4):
-    - React-Core/RCTTextHeaders (= 0.63.4)
-  - React-RCTVibration (0.63.4):
-    - FBReactNativeSpec (= 0.63.4)
-    - Folly (= 2020.01.13.00)
-    - React-Core/RCTVibrationHeaders (= 0.63.4)
-    - React-jsi (= 0.63.4)
-    - ReactCommon/turbomodule/core (= 0.63.4)
-  - ReactCommon/turbomodule/core (0.63.4):
+  - React-perflogger (0.64.1)
+  - React-RCTActionSheet (0.64.1):
+    - React-Core/RCTActionSheetHeaders (= 0.64.1)
+  - React-RCTAnimation (0.64.1):
+    - FBReactNativeSpec (= 0.64.1)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.64.1)
+    - React-Core/RCTAnimationHeaders (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - ReactCommon/turbomodule/core (= 0.64.1)
+  - React-RCTBlob (0.64.1):
+    - FBReactNativeSpec (= 0.64.1)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-Core/RCTBlobHeaders (= 0.64.1)
+    - React-Core/RCTWebSocket (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-RCTNetwork (= 0.64.1)
+    - ReactCommon/turbomodule/core (= 0.64.1)
+  - React-RCTImage (0.64.1):
+    - FBReactNativeSpec (= 0.64.1)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.64.1)
+    - React-Core/RCTImageHeaders (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-RCTNetwork (= 0.64.1)
+    - ReactCommon/turbomodule/core (= 0.64.1)
+  - React-RCTLinking (0.64.1):
+    - FBReactNativeSpec (= 0.64.1)
+    - React-Core/RCTLinkingHeaders (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - ReactCommon/turbomodule/core (= 0.64.1)
+  - React-RCTNetwork (0.64.1):
+    - FBReactNativeSpec (= 0.64.1)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.64.1)
+    - React-Core/RCTNetworkHeaders (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - ReactCommon/turbomodule/core (= 0.64.1)
+  - React-RCTSettings (0.64.1):
+    - FBReactNativeSpec (= 0.64.1)
+    - RCT-Folly (= 2020.01.13.00)
+    - RCTTypeSafety (= 0.64.1)
+    - React-Core/RCTSettingsHeaders (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - ReactCommon/turbomodule/core (= 0.64.1)
+  - React-RCTText (0.64.1):
+    - React-Core/RCTTextHeaders (= 0.64.1)
+  - React-RCTVibration (0.64.1):
+    - FBReactNativeSpec (= 0.64.1)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-Core/RCTVibrationHeaders (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - ReactCommon/turbomodule/core (= 0.64.1)
+  - React-runtimeexecutor (0.64.1):
+    - React-jsi (= 0.64.1)
+  - ReactCommon/turbomodule/core (0.64.1):
     - DoubleConversion
-    - Folly (= 2020.01.13.00)
     - glog
-    - React-callinvoker (= 0.63.4)
-    - React-Core (= 0.63.4)
-    - React-cxxreact (= 0.63.4)
-    - React-jsi (= 0.63.4)
+    - RCT-Folly (= 2020.01.13.00)
+    - React-callinvoker (= 0.64.1)
+    - React-Core (= 0.64.1)
+    - React-cxxreact (= 0.64.1)
+    - React-jsi (= 0.64.1)
+    - React-perflogger (= 0.64.1)
   - RNCAsyncStorage (1.14.1):
     - React-Core
   - RNCMaskedView (0.1.10):
     - React
+  - RNCPicker (2.1.0):
+    - React-Core
   - RNFBApp (11.2.0):
     - Firebase/CoreOnly (= 7.9.0)
     - React-Core
@@ -384,6 +406,8 @@ PODS:
     - RNFBApp
   - RNGestureHandler (1.10.3):
     - React-Core
+  - RNLocalize (2.1.4):
+    - React-Core
   - RNReanimated (1.13.2):
     - React-Core
   - RNScreens (2.18.0):
@@ -399,28 +423,28 @@ PODS:
 DEPENDENCIES:
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
-  - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
-  - Flipper (~> 0.54.0)
+  - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`)
+  - Flipper (~> 0.75.1)
   - Flipper-DoubleConversion (= 1.1.7)
-  - Flipper-Folly (= 2.3.0)
+  - Flipper-Folly (= 2.5.0)
   - Flipper-Glog (= 0.3.6)
   - Flipper-PeerTalk (~> 0.0.4)
-  - Flipper-RSocket (~> 1.1)
-  - FlipperKit (~> 0.54.0)
-  - FlipperKit/Core (~> 0.54.0)
-  - FlipperKit/CppBridge (~> 0.54.0)
-  - FlipperKit/FBCxxFollyDynamicConvert (~> 0.54.0)
-  - FlipperKit/FBDefines (~> 0.54.0)
-  - FlipperKit/FKPortForwarding (~> 0.54.0)
-  - FlipperKit/FlipperKitHighlightOverlay (~> 0.54.0)
-  - FlipperKit/FlipperKitLayoutPlugin (~> 0.54.0)
-  - FlipperKit/FlipperKitLayoutTextSearchable (~> 0.54.0)
-  - FlipperKit/FlipperKitNetworkPlugin (~> 0.54.0)
-  - FlipperKit/FlipperKitReactPlugin (~> 0.54.0)
-  - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.54.0)
-  - FlipperKit/SKIOSNetworkPlugin (~> 0.54.0)
-  - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
+  - Flipper-RSocket (~> 1.3)
+  - FlipperKit (~> 0.75.1)
+  - FlipperKit/Core (~> 0.75.1)
+  - FlipperKit/CppBridge (~> 0.75.1)
+  - FlipperKit/FBCxxFollyDynamicConvert (~> 0.75.1)
+  - FlipperKit/FBDefines (~> 0.75.1)
+  - FlipperKit/FKPortForwarding (~> 0.75.1)
+  - FlipperKit/FlipperKitHighlightOverlay (~> 0.75.1)
+  - FlipperKit/FlipperKitLayoutPlugin (~> 0.75.1)
+  - FlipperKit/FlipperKitLayoutTextSearchable (~> 0.75.1)
+  - FlipperKit/FlipperKitNetworkPlugin (~> 0.75.1)
+  - FlipperKit/FlipperKitReactPlugin (~> 0.75.1)
+  - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.75.1)
+  - FlipperKit/SKIOSNetworkPlugin (~> 0.75.1)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
   - React (from `../node_modules/react-native/`)
@@ -439,6 +463,7 @@ DEPENDENCIES:
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - react-native-video (from `../node_modules/react-native-video`)
   - react-native-vlc-media-player (from `../node_modules/react-native-vlc-media-player`)
+  - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -448,12 +473,15 @@ DEPENDENCIES:
   - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
+  - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
+  - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNLocalize (from `../node_modules/react-native-localize`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
@@ -464,7 +492,6 @@ SPEC REPOS:
   trunk:
     - boost-for-react-native
     - CocoaAsyncSocket
-    - CocoaLibEvent
     - Firebase
     - FirebaseCore
     - FirebaseCoreDiagnostics
@@ -480,6 +507,7 @@ SPEC REPOS:
     - FlipperKit
     - GoogleDataTransport
     - GoogleUtilities
+    - libevent
     - MobileVLCKit
     - nanopb
     - OpenSSL-Universal
@@ -492,11 +520,11 @@ EXTERNAL SOURCES:
   FBLazyVector:
     :path: "../node_modules/react-native/Libraries/FBLazyVector"
   FBReactNativeSpec:
-    :path: "../node_modules/react-native/Libraries/FBReactNativeSpec"
-  Folly:
-    :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
+    :path: "../node_modules/react-native/React/FBReactNativeSpec"
   glog:
     :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
+  RCT-Folly:
+    :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTRequired:
     :path: "../node_modules/react-native/Libraries/RCTRequired"
   RCTTypeSafety:
@@ -529,6 +557,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-video"
   react-native-vlc-media-player:
     :path: "../node_modules/react-native-vlc-media-player"
+  React-perflogger:
+    :path: "../node_modules/react-native/ReactCommon/reactperflogger"
   React-RCTActionSheet:
     :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -547,18 +577,24 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Text"
   React-RCTVibration:
     :path: "../node_modules/react-native/Libraries/Vibration"
+  React-runtimeexecutor:
+    :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
+  RNCPicker:
+    :path: "../node_modules/@react-native-picker/picker"
   RNFBApp:
     :path: "../node_modules/@react-native-firebase/app"
   RNFBMessaging:
     :path: "../node_modules/@react-native-firebase/messaging"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNLocalize:
+    :path: "../node_modules/react-native-localize"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
@@ -573,69 +609,73 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
-  FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
-  FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
+  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
+  FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
+  FBReactNativeSpec: b3eeb73b1bae9dcea697417c218e7c6a75126060
   Firebase: d8bd6bd34b4c7ed57bfdd056c66ff5adcdde53ab
   FirebaseCore: 0798738ad1ae0fda67e17c7b9081241c431c6859
   FirebaseCoreDiagnostics: 68ad972f99206cef818230f3f3179d52ccfb7f8c
   FirebaseInstallations: a58d4f72ec5861840b84df489f2668d970df558a
   FirebaseInstanceID: ad5135045a498d7775903efd39762d2cdfa1be27
   FirebaseMessaging: 5f83f200a251c44f647f36cb43e557be09889e8d
-  Flipper: be611d4b742d8c87fbae2ca5f44603a02539e365
+  Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
-  Flipper-Folly: e4493b013c02d9347d5e0cb4d128680239f6c78a
+  Flipper-Folly: c55b9328b7ab5716e674926835c2bef6acc5c27d
   Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
-  Flipper-RSocket: a3acb8812d6adf127deb0a5edae2793b97e6b641
-  FlipperKit: ab353d41aea8aae2ea6daaf813e67496642f3d7d
-  Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
+  FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   GoogleDataTransport: cd9db2180fcecd8da1b561aea31e3e56cf834aa7
-  GoogleUtilities: e1d9ed4e544fc32a93e00e721400cbc3f377200d
+  GoogleUtilities: 684ee790a24f73ebb2d1d966e9711c203f2a4237
+  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   MobileVLCKit: 7f5065858eb9c29a91743c3554654d2e81b85db2
   nanopb: a0ba3315591a9ae0a16a309ee504766e90db0c96
-  OpenSSL-Universal: ff34003318d5e1163e9529b08470708e389ffcdd
+  OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
   PromisesObjC: 3113f7f76903778cf4a0586bd1ab89329a0b7b97
-  RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
-  RCTTypeSafety: 8c9c544ecbf20337d069e4ae7fd9a377aadf504b
-  React: b0a957a2c44da4113b0c4c9853d8387f8e64e615
-  React-callinvoker: c3f44dd3cb195b6aa46621fff95ded79d59043fe
-  React-Core: d3b2a1ac9a2c13c3bcde712d9281fc1c8a5b315b
-  React-CoreModules: 0581ff36cb797da0943d424f69e7098e43e9be60
-  React-cxxreact: c1480d4fda5720086c90df537ee7d285d4c57ac3
-  React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
-  React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
-  React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
+  RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
+  RCTRequired: ec2ebc96b7bfba3ca5c32740f5a0c6a014a274d2
+  RCTTypeSafety: 22567f31e67c3e088c7ac23ea46ab6d4779c0ea5
+  React: a241e3dbb1e91d06332f1dbd2b3ab26e1a4c4b9d
+  React-callinvoker: da4d1c6141696a00163960906bc8a55b985e4ce4
+  React-Core: 46ba164c437d7dac607b470c83c8308b05799748
+  React-CoreModules: 217bd14904491c7b9940ff8b34a3fe08013c2f14
+  React-cxxreact: 0090588ae6660c4615d3629fdd5c768d0983add4
+  React-jsi: 5de8204706bd872b78ea646aee5d2561ca1214b6
+  React-jsiexecutor: 124e8f99992490d0d13e0649d950d3e1aae06fe9
+  React-jsinspector: 500a59626037be5b3b3d89c5151bc3baa9abf1a9
   react-native-get-random-values: f0fc24a5887a3341589515a86282a574407b59e4
   react-native-orientation-locker: 47aaa55d59bfc1613804dc22f159e6bb1cca5f30
   react-native-safe-area-context: b6e0e284002381d2ff29fa4fff42b4d8282e3c94
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   react-native-video: 0bb76b6d6b77da3009611586c7dbf817b947f30e
   react-native-vlc-media-player: c4292e8be0e6fa0a973e8bdd53c8fbcea5e0bd42
-  React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
-  React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
-  React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0
-  React-RCTImage: c1b1f2d3f43a4a528c8946d6092384b5c880d2f0
-  React-RCTLinking: 35ae4ab9dc0410d1fcbdce4d7623194a27214fb2
-  React-RCTNetwork: 29ec2696f8d8cfff7331fac83d3e893c95ef43ae
-  React-RCTSettings: 60f0691bba2074ef394f95d4c2265ec284e0a46a
-  React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
-  React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
-  ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
+  React-perflogger: aad6d4b4a267936b3667260d1f649b6f6069a675
+  React-RCTActionSheet: fc376be462c9c8d6ad82c0905442fd77f82a9d2a
+  React-RCTAnimation: ba0a1c3a2738be224a08092fa7f1b444ab77d309
+  React-RCTBlob: f758d4403fc5828a326dc69e27b41e1a92f34947
+  React-RCTImage: ce57088705f4a8d03f6594b066a59c29143ba73e
+  React-RCTLinking: 852a3a95c65fa63f657a4b4e2d3d83a815e00a7c
+  React-RCTNetwork: 9d7ccb8a08d522d71700b4fb677d9fa28cccd118
+  React-RCTSettings: d8aaf4389ff06114dee8c42ef5f0f2915946011e
+  React-RCTText: 809c12ed6b261796ba056c04fcd20d8b90bcc81d
+  React-RCTVibration: 4b99a7f5c6c0abbc5256410cc5425fb8531986e1
+  React-runtimeexecutor: ff951a0c241bfaefc4940a3f1f1a229e7cb32fa6
+  ReactCommon: bedc99ed4dae329c4fcf128d0c31b9115e5365ca
   RNCAsyncStorage: fe58eec522885718d6b297b7b658bf87d7ca557b
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
+  RNCPicker: f7a40b21b915b7a187624d52f52b7bc2f73ea413
   RNFBApp: d9ab9f2e63c70a9974294bb44c749b728cd4028f
   RNFBMessaging: bab6a3073a3ac1ecff593c74b4f797cbc6cca562
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNLocalize: 7f1e5792b65a839af55a9552d05b3558b66d017e
   RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
   RNScreens: f0d7a2a440a8ba9f4574ca1ddb3368f473891be4
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   toolbar-android: 85f3ef4d691469f2d304e7dee4bca013aa1ba1ff
-  Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
+  Yoga: a7de31c64fe738607e7a3803e3f591a4b1df7393
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: a28ca1679fbd3492b55303c650802ddba3c3cfdf
+PODFILE CHECKSUM: 3cddb4fc77e5dfd8597805c52ff775ec5510ac73
 
-COCOAPODS: 1.10.1
+COCOAPODS: 1.10.2
diff --git a/lib/api.js b/lib/api.js
index bbe1dad..e686b32 100644
--- a/lib/api.js
+++ b/lib/api.js
@@ -1,157 +1,154 @@
-
 import Toast from 'react-native-toast-message';
 
 import {parse} from 'fast-xml-parser';
-import {getAddressByCredentials} from "./util";
+import {getAddressByCredentials} from './util';
 
 const rgIdMatch = /id=(\d+)/;
 
 function stripIdUrl(target) {
-    if (!target) {
-        return;
-    }
+  if (!target) {
+    return;
+  }
 
-    const match = rgIdMatch.exec(target);
-    return match ? match[1] : null;
+  const match = rgIdMatch.exec(target);
+  return match ? match[1] : null;
 }
 
 export async function checkServerCredentials(url, login, password, successMessage = 'Connection Successful') {
+  const formData = new FormData();
+
+  formData.append('login', login);
+  formData.append('password', password);
+
+  try {
+    const target = new URL('ajax/loginapp.php', url);
+    const result = await fetch(target, {
+      method: 'POST',
+      credentials: 'include',
+      body: formData,
+    });
 
-    const formData = new FormData();
-
-    formData.append('login', login);
-    formData.append('password', password);
-
-    try {
-        const target = new URL('ajax/loginapp.php', url);
-        const result = await fetch(target, {
-            method: 'POST',
-            credentials: 'include',
-            body: formData
-        });
-
-        const {success, server_uuid, message} = await result.json();
-
-        if (success) {
-            Toast.show({
-                type: 'success',
-                text1: successMessage
-            });
-
-            return server_uuid;
-        } else {
-            Toast.show({
-                type: 'error',
-                text1: 'Auth Error',
-                text2: message
-            });
-        }
-
-    } catch (err) {
-        Toast.show({
-            type: 'error',
-            text1: 'Connection Error',
-            text2: err.message
-        });
+    const {success, server_uuid, message} = await result.json();
+    console.log('success: ', success);
+    console.log('server_uuid: ', server_uuid);
+    console.log('message: ', message);
+    if (success) {
+      Toast.show({
+        type: 'success',
+        text1: successMessage,
+      });
+
+      return server_uuid;
+    } else {
+      Toast.show({
+        type: 'error',
+        text1: 'Auth Error',
+        text2: message,
+      });
     }
+  } catch (err) {
+    Toast.show({
+      type: 'error',
+      text1: 'Connection Error',
+      text2: err.message,
+    });
+  }
 
-    return false;
+  return false;
 }
 
 export async function getDevices(url) {
-    const target = new URL('devices.php?XML=1', url);
+  const target = new URL('devices.php?XML=1', url);
 
-    const result = await fetch(target, {
-        credentials: 'include',
-        redirect: 'error'
-    });
+  const result = await fetch(target, {
+    credentials: 'include',
+    redirect: 'error',
+  });
 
-    const document = parse(await result.text());
+  const document = parse(await result.text());
 
-    if (!document.devices || !document.devices.device) {
-        throw new Error('API response has different XML data');
-    }
+  if (!document.devices || !document.devices.device) {
+    throw new Error('API response has different XML data');
+  }
 
-    return document.devices.device;
+  return document.devices.device;
 }
 
 export async function getAvailableDevices(loggedInAccountId) {
-    const devices = await getDevices(getAddressByCredentials(loggedInAccountId));
-    const available = devices.filter(({status}) => status === 'OK');
-    return available.map(({id, device_name}) => ({id, device_name}));
+  const devices = await getDevices(getAddressByCredentials(loggedInAccountId));
+  const available = devices.filter(({status}) => status === 'OK');
+  return available.map(({id, device_name}) => ({id, device_name}));
 }
 
 export async function getEvents(url, limit = 50) {
-    const target = new URL('events/?limit=' + limit, url);
-
-    const result = await fetch(target, {
-        credentials: 'include',
-        redirect: 'error'
-    });
-
-    const document = parse(await result.text());
-
-    if (!document.feed || !document.feed.entry) {
-        throw new Error('API response has different XML data');
-    }
-
-    return [document.feed.entry.map((item) => {
-        const {id, content} = item;
-        return {...item, id: stripIdUrl(id), content: stripIdUrl(content)};
-    }), document.feed.updated];
+  const target = new URL('events/?limit=' + limit, url);
+
+  const result = await fetch(target, {
+    credentials: 'include',
+    redirect: 'error',
+  });
+
+  const document = parse(await result.text());
+  console.log('Data=======>', document);
+  if (!document.feed || !document.feed.entry) {
+    throw new Error('API response has different XML data');
+  }
+
+  return [
+    document.feed.entry.map((item) => {
+      const {id, content} = item;
+      return {...item, id: stripIdUrl(id), content: stripIdUrl(content)};
+    }),
+    document.feed.updated,
+  ];
 }
 
 export async function getMobileConfig(url) {
+  const target = new URL('mobile-app-config.json', url);
 
-    const target = new URL('mobile-app-config.json', url);
-
-    const result = await fetch(target, {
-        credentials: 'include',
-        redirect: 'error'
-    });
+  const result = await fetch(target, {
+    credentials: 'include',
+    redirect: 'error',
+  });
 
-    return result.json();
+  return result.json();
 }
 
 export async function storeNotificationToken(url, clientUuid, serverUuid, token) {
-
-    const target = new URL('store-token', url);
-
-    const result = await fetch(target, {
-        method: 'POST',
-        credentials: 'include',
-        redirect: 'error',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            client_id: clientUuid,
-            server_id: serverUuid,
-            token: token
-        })
-    });
-
-    return result.json();
+  const target = new URL('store-token', url);
+
+  const result = await fetch(target, {
+    method: 'POST',
+    credentials: 'include',
+    redirect: 'error',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      client_id: clientUuid,
+      server_id: serverUuid,
+      token: token,
+    }),
+  });
+
+  return result.json();
 }
 
 export async function removeNotificationToken(url, clientUuid, serverUuid) {
-
-    const target = new URL('remove-token', url);
-
-    const result = await fetch(target, {
-        method: 'POST',
-        credentials: 'include',
-        redirect: 'error',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            client_id: clientUuid,
-            server_id: serverUuid
-        })
-    });
-
-    return result.json();
-
+  const target = new URL('remove-token', url);
+
+  const result = await fetch(target, {
+    method: 'POST',
+    credentials: 'include',
+    redirect: 'error',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      client_id: clientUuid,
+      server_id: serverUuid,
+    }),
+  });
+
+  return result.json();
 }
-
diff --git a/lib/notification.js b/lib/notification.js
index 3696655..025fc0b 100644
--- a/lib/notification.js
+++ b/lib/notification.js
@@ -1,23 +1,19 @@
-
 import {getMobileConfig, storeNotificationToken, removeNotificationToken} from './api';
 
 export async function saveNotificationToken(url, clientUuid, serverUuid, token) {
+  const {notification_api_endpoint} = await getMobileConfig(url);
+  const {success, message} = await storeNotificationToken(notification_api_endpoint, clientUuid, serverUuid, token);
 
-    const {notification_api_endpoint} = await getMobileConfig(url);
-    const {success, message} = await storeNotificationToken(notification_api_endpoint, clientUuid, serverUuid, token);
-
-    if (!success) {
-        throw new Error(message);
-    }
+  if (!success) {
+    throw new Error(message);
+  }
 }
 
 export async function unsaveNotificationToken(url, clientUuid, serverUuid) {
+  const {notification_api_endpoint} = await getMobileConfig(url);
+  const {success, message} = await removeNotificationToken(notification_api_endpoint, clientUuid, serverUuid);
 
-    const {notification_api_endpoint} = await getMobileConfig(url);
-    const {success, message} = await removeNotificationToken(notification_api_endpoint, clientUuid, serverUuid);
-
-    if (!success) {
-        throw new Error(message);
-    }
-
-}
\ No newline at end of file
+  if (!success) {
+    throw new Error(message);
+  }
+}
diff --git a/lib/storage.js b/lib/storage.js
index 919922d..e527d6e 100644
--- a/lib/storage.js
+++ b/lib/storage.js
@@ -1,148 +1,138 @@
-
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {v4 as uuidv4} from 'uuid';
 
 export async function getAccountInfo(accountId) {
-    const accountInfo = await AsyncStorage.getItem('account_' + accountId);
-    return accountInfo ? JSON.parse(accountInfo) : null;
+  const accountInfo = await AsyncStorage.getItem('account_' + accountId);
+
+  return accountInfo ? JSON.parse(accountInfo) : null;
 }
 
 export async function getAccountIds() {
-    const ids = await AsyncStorage.getItem('account_ids');
-    return !ids ? [] : JSON.parse(ids);
+  const ids = await AsyncStorage.getItem('account_ids');
+  return !ids ? [] : JSON.parse(ids);
 }
 
 export async function setAccountInfo(accountId, accountInfo) {
-    const ids = await getAccountIds();
+  const ids = await getAccountIds();
 
-    const setAccountId = () => AsyncStorage.setItem('account_' + accountId,
-        JSON.stringify(accountInfo));
+  const setAccountId = () => AsyncStorage.setItem('account_' + accountId, JSON.stringify(accountInfo));
 
-    if (ids.includes(accountId)) {
-        return setAccountId();
-    }
+  if (ids.includes(accountId)) {
+    return setAccountId();
+  }
 
-    return Promise.all([
-        AsyncStorage.setItem('account_ids', JSON.stringify(ids.concat(accountId))),
-        setAccountId()
-    ]);
+  return Promise.all([AsyncStorage.setItem('account_ids', JSON.stringify(ids.concat(accountId))), setAccountId()]);
 }
 
 export async function removeAccountInfo(accountId) {
-
-    const ids = await getAccountIds();
-    const targetIndex = ids.indexOf(accountId);
-
-    // account id not in list
-    if (targetIndex === -1) {
-        return false;
-    }
-
-    // remove target id from list
-    ids.splice(targetIndex, 1);
-
-    return Promise.all([
-        AsyncStorage.setItem('account_ids', JSON.stringify(ids)),
-        AsyncStorage.removeItem('account_' + accountId),
-        removeSelectedCameraList(accountId),
-        async () => {
-            const activeAccount = await getActiveAccount();
-            if (activeAccount === accountId) {
-                return removeActiveAccount();
-            }
-        }
-    ]);
+  const ids = await getAccountIds();
+  const targetIndex = ids.indexOf(accountId);
+
+  // account id not in list
+  if (targetIndex === -1) {
+    return false;
+  }
+
+  // remove target id from list
+  ids.splice(targetIndex, 1);
+
+  return Promise.all([
+    AsyncStorage.setItem('account_ids', JSON.stringify(ids)),
+    AsyncStorage.removeItem('account_' + accountId),
+    removeSelectedCameraList(accountId),
+    async () => {
+      const activeAccount = await getActiveAccount();
+      if (activeAccount === accountId) {
+        return removeActiveAccount();
+      }
+    },
+  ]);
 }
 
 export async function getAccountInfoList() {
-    const accountIds = await getAccountIds();
-    return Promise.all(accountIds.map(async id => [id, await getAccountInfo(id)]));
+  const accountIds = await getAccountIds();
+  return Promise.all(accountIds.map(async (id) => [id, await getAccountInfo(id)]));
 }
 
 export async function getFreshAccountId(maxRetry = 10) {
+  if (maxRetry === 0) {
+    throw new Error('reached max retry count');
+  }
 
-    if (maxRetry === 0) {
-        throw new Error('reached max retry count');
-    }
-
-    const accountId = uuidv4();
+  const accountId = uuidv4();
 
-    // check and retry if accountId collide previous one
-    if (await getAccountInfo(accountId)) {
-        return getFreshAccountId(maxRetry - 1);
-    }
+  // check and retry if accountId collide previous one
+  if (await getAccountInfo(accountId)) {
+    return getFreshAccountId(maxRetry - 1);
+  }
 
-    return accountId;
+  return accountId;
 }
 
 export async function setActiveAccount(accountId) {
-    return AsyncStorage.setItem('active_account', accountId);
+  return AsyncStorage.setItem('active_account', accountId);
 }
 
 export async function getActiveAccount() {
-    return AsyncStorage.getItem('active_account');
+  return AsyncStorage.getItem('active_account');
 }
 
 async function removeActiveAccount() {
-    return AsyncStorage.removeItem('active_account');
+  return AsyncStorage.removeItem('active_account');
 }
 
 export async function unsetActiveAccount() {
-     const accountId = await getActiveAccount();
-     if (!accountId) {
-         return false;
-     }
+  const accountId = await getActiveAccount();
+  if (!accountId) {
+    return false;
+  }
 
-     await removeActiveAccount();
+  await removeActiveAccount();
 
-     return accountId;
+  return accountId;
 }
 
 export async function getActiveAccountInfoByList(accountList) {
-    const activeAccount = await getActiveAccount();
+  const activeAccount = await getActiveAccount();
 
-    if (!activeAccount) {
-        return;
-    }
+  if (!activeAccount) {
+    return;
+  }
 
-    for (const info of accountList) {
-        if (activeAccount === info[0]) {
-            return info;
-        }
+  for (const info of accountList) {
+    if (activeAccount === info[0]) {
+      return info;
     }
+  }
 }
 
 export async function getTargetAccountByServerId(accountList, serverId) {
-
-    for (const info of accountList) {
-        if (serverId === info[1].serverUuid) {
-            return info;
-        }
+  for (const info of accountList) {
+    if (serverId === info[1].serverUuid) {
+      return info;
     }
-
+  }
 }
 
 export async function removeSelectedCameraList(accountId) {
-    return AsyncStorage.removeItem('selected_cameras_' + accountId);
+  return AsyncStorage.removeItem('selected_cameras_' + accountId);
 }
 
 export async function getSelectedCameraList(accountId) {
-    const list = await AsyncStorage.getItem('selected_cameras_' + accountId);
+  const list = await AsyncStorage.getItem('selected_cameras_' + accountId);
 
-    if (!list) {
-        return [
-            [null], [null, null], [null, null, null, null]
-        ];
-    }
+  if (!list) {
+    return [[null], [null, null], [null, null, null, null]];
+  }
 
-    return JSON.parse(list);
+  return JSON.parse(list);
 }
 
 export async function setSelectedCamera(accountId, type, index, cameraId = null, list = null) {
-    if (!list) {
-        list = await getSelectedCameraList(accountId)
-    }
-    list[type][index] = cameraId;
-    await AsyncStorage.setItem('selected_cameras_' + accountId, JSON.stringify(list));
-    return list;
-}
\ No newline at end of file
+  if (!list) {
+    list = await getSelectedCameraList(accountId);
+  }
+  list[type][index] = cameraId;
+  await AsyncStorage.setItem('selected_cameras_' + accountId, JSON.stringify(list));
+  return list;
+}
diff --git a/lib/util.js b/lib/util.js
index f6334a6..203ad2e 100644
--- a/lib/util.js
+++ b/lib/util.js
@@ -1,63 +1,56 @@
-
 export function delay(ms) {
-    return new Promise(callback => setTimeout(callback, ms));
+  return new Promise((callback) => setTimeout(callback, ms));
 }
 
 class Url {
-    constructor({scheme, host, port, user, password}) {
-        this.scheme = scheme || '';
-        this.host = host || '';
-        this.port = port || '';
-        this.user = user || '';
-        this.password = password || '';
-    }
-
-    getSchemeString() {
-        return (this.scheme ? this.scheme + ':' : '') + '//';
+  constructor({scheme, host, port, user, password}) {
+    this.scheme = scheme || '';
+    this.host = host || '';
+    this.port = port || '';
+    this.user = user || '';
+    this.password = password || '';
+  }
+
+  getSchemeString() {
+    return (this.scheme ? this.scheme + ':' : '') + '//';
+  }
+
+  getCredentialString() {
+    if (!this.user) {
+      return '';
     }
 
-    getCredentialString() {
-        if (!this.user) {
-            return '';
-        }
+    return this.user + (this.password ? ':' + this.password : '') + '@';
+  }
 
-        return this.user + (this.password ? ':' + this.password : '') + '@';
-    }
-
-    getHostString() {
-        return this.host + (this.port ? ':' + this.port : '');
-    }
+  getHostString() {
+    return this.host + (this.port ? ':' + this.port : '');
+  }
 
-    toString() {
-        return [
-            this.getSchemeString(),
-            this.getCredentialString(),
-            this.getHostString()
-        ].join('');
-    }
+  toString() {
+    return [this.getSchemeString(), this.getCredentialString(), this.getHostString()].join('');
+  }
 }
 
 export function getAddressByCredentials({login, password, address, port = ''}, useAccountInfo = false) {
-
-    const params = {
-        scheme: 'https',
-        host: address,
-        port
-    };
-    const url = new Url(useAccountInfo ? {...params, user:login, password: encodeURIComponent(password)} : params);
-
-    return url.toString();
+  const params = {
+    scheme: 'https',
+    host: address,
+    port,
+  };
+  const url = new Url(useAccountInfo ? {...params, user: login, password: encodeURIComponent(password)} : params);
+
+  return url.toString();
 }
 
 export function getRtspAddressByCredentials({login, password, address, rtspAddress, rtspPort}) {
-
-    const url = new Url({
-        scheme: 'rtsp',
-        host: rtspAddress || address,
-        port: rtspPort,
-        user: login,
-        password: encodeURIComponent(password)
-    });
-
-    return url.toString();
-}
\ No newline at end of file
+  const url = new Url({
+    scheme: 'rtsp',
+    host: rtspAddress || address,
+    port: rtspPort,
+    user: login,
+    password: encodeURIComponent(password),
+  });
+
+  return url.toString();
+}
diff --git a/notification.js b/notification.js
index fdc8ce6..ac05fc2 100644
--- a/notification.js
+++ b/notification.js
@@ -1,72 +1,71 @@
-
 import messaging from '@react-native-firebase/messaging';
 import Toast from 'react-native-toast-message';
 import {saveNotificationToken} from './lib/notification';
 
 const validNotificationTypes = new Map([
-    ['device_state', 'Device State Event'],
-    ['motion_event', 'Motion Event']
+  ['device_state', 'Device State Event'],
+  ['motion_event', 'Motion Event'],
 ]);
 
-
 async function onTokenRefresh(state, token) {
-    const results = await Promise.all(state.accountList.map(async ([id, {serverUuid, address, port}]) => {
-        const url = 'https://' + address + (port ? ':' + port : '');
-
-        try {
-            return await saveNotificationToken(url, id, serverUuid, token);
-        } catch (err) {
-            return {success: false, message: err.message};
-        }
-
-    }));
-
-    const failed = results.filter(({success}) => !success);
-
-    if (failed.length > 0) {
-        Toast.show({
-            type: 'error',
-            text1: 'Notification System',
-            text2: failed.length + ' account could not update notification token'
-        });
-    }
+  const results = await Promise.all(
+    state.accountList.map(async ([id, {serverUuid, address, port}]) => {
+      const url = 'https://' + address + (port ? ':' + port : '');
+      try {
+        return await saveNotificationToken(url, id, serverUuid, token);
+      } catch (err) {
+        return {success: false, message: err.message};
+      }
+    }),
+  );
+
+  const failed = results.filter(({success}) => !success);
+
+  if (failed.length > 0) {
+    Toast.show({
+      type: 'error',
+      text1: 'Notification System',
+      text2: failed.length + ' account could not update notification token',
+    });
+  }
 }
 
 function showInAppNotification(message, onShowCamera) {
-    const {data: {eventType, deviceId, deviceName}} = message;
-
-    if (!isValidNotificationType(eventType)) {
-        Toast.show({
-            type: 'info',
-            text1: eventType,
-        });
-        return;
-    }
+  const {
+    data: {eventType, deviceId, deviceName},
+  } = message;
 
+  if (!isValidNotificationType(eventType)) {
     Toast.show({
-        type: 'info',
-        text1: validNotificationTypes.get(eventType),
-        text2: deviceName,
-        onPress: () => onShowCamera(deviceId)
+      type: 'info',
+      text1: eventType,
     });
+    return;
+  }
+
+  Toast.show({
+    type: 'info',
+    text1: validNotificationTypes.get(eventType),
+    text2: deviceName,
+    onPress: () => onShowCamera(deviceId),
+  });
 }
 
 export function isValidNotificationType(type) {
-    return validNotificationTypes.has(type);
+  return validNotificationTypes.has(type);
 }
 
 export function handleNotification(state, onShowCamera) {
+  const messageHandlerCleanup = messaging().onMessage(async (message) => {
+    if (state.activeAccount && message.data.serverId === state.activeAccount.serverUuid) {
+      showInAppNotification(message, onShowCamera);
+    }
+  });
 
-    const messageHandlerCleanup = messaging().onMessage(async message => {
-        if (state.activeAccount && message.data.serverId === state.activeAccount.serverUuid) {
-            showInAppNotification(message, onShowCamera);
-        }
-    });
-
-    const tokenHandlerCleanup = messaging().onTokenRefresh(async token => onTokenRefresh(state, token));
+  const tokenHandlerCleanup = messaging().onTokenRefresh(async (token) => onTokenRefresh(state, token));
 
-    return () => {
-        messageHandlerCleanup();
-        tokenHandlerCleanup();
-    };
-}
\ No newline at end of file
+  return () => {
+    messageHandlerCleanup();
+    tokenHandlerCleanup();
+  };
+}
diff --git a/package.json b/package.json
index 09be4da..b7c607d 100644
--- a/package.json
+++ b/package.json
@@ -15,17 +15,21 @@
     "@react-native-community/toolbar-android": "0.1.0-rc.2",
     "@react-native-firebase/app": "^11.1.2",
     "@react-native-firebase/messaging": "^11.1.2",
+    "@react-native-picker/picker": "^2.1.0",
     "@react-navigation/bottom-tabs": "^5.11.7",
     "@react-navigation/drawer": "^5.12.3",
     "@react-navigation/material-top-tabs": "^5.3.13",
     "@react-navigation/native": "^5.9.2",
     "@react-navigation/stack": "^5.14.2",
+    "dayjs": "^1.10.7",
     "fast-xml-parser": "^3.18.0",
     "react": "16.13.1",
     "react-native": "0.64.1",
     "react-native-gesture-handler": "^1.9.0",
     "react-native-get-random-values": "^1.5.1",
+    "react-native-localize": "^2.1.4",
     "react-native-orientation-locker": "^1.2.0",
+    "react-native-picker-select": "^8.0.4",
     "react-native-popup-menu": "^0.15.10",
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",
diff --git a/screens/CameraScreen.js b/screens/CameraScreen.js
index eac4757..3d7d79b 100644
--- a/screens/CameraScreen.js
+++ b/screens/CameraScreen.js
@@ -1,21 +1,15 @@
-
 import React, {useEffect, useState, useCallback, useContext} from 'react';
 import {View, Text, TouchableOpacity, FlatList, ActivityIndicator, SafeAreaView} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import SplashScreen from 'react-native-splash-screen';
 
-import {
-    Menu,
-    MenuOptions,
-    MenuOption,
-    MenuTrigger,
-} from 'react-native-popup-menu';
+import {Menu, MenuOptions, MenuOption, MenuTrigger} from 'react-native-popup-menu';
 
 import {setSelectedCamera} from '../lib/storage';
 
-import { VLCPlayer } from 'react-native-vlc-media-player';
+import {VLCPlayer} from 'react-native-vlc-media-player';
 
-import { createStackNavigator } from '@react-navigation/stack';
+import {createStackNavigator} from '@react-navigation/stack';
 
 import SessionContext from '../session-context';
 
@@ -27,211 +21,391 @@ import ToggleNavigationButton from '../components/ToggleNavigationButton';
 
 const Stack = createStackNavigator();
 
-
 function Player({uri}) {
-    const [error, setError] = useState(false);
-
-    if (error) {
-        return <PlayerError onPress={() => setError(false)} />;
-    }
-
-    return (<VLCPlayer
-        source={{
-            initType: 2,
-            hwDecoderEnabled: 1,
-            hwDecoderForced: 1,
-            uri,
-            initOptions: [
-                '--no-audio',
-                '--rtsp-tcp',
-                '--network-caching=150',
-                '--rtsp-caching=150',
-                '--no-stats',
-                '--tcp-caching=150',
-                '--realrtsp-caching=150',
-            ],
-        }}
-        autoplay={true}
-        autoAspectRatio={true}
-        resizeMode="contain"
-        isLive={true}
-        autoReloadLive={true}
-        onError={() => setError(true)}
-        style={{flex: 1}}
-    />);
+  const [error, setError] = useState(false);
+
+  if (error) {
+    return <PlayerError onPress={() => setError(false)} />;
+  }
+
+  return (
+    <VLCPlayer
+      source={{
+        initType: 2,
+        hwDecoderEnabled: 1,
+        hwDecoderForced: 1,
+        uri,
+        initOptions: [
+          '--no-audio',
+          '--rtsp-tcp',
+          '--network-caching=150',
+          '--rtsp-caching=150',
+          '--no-stats',
+          '--tcp-caching=150',
+          '--realrtsp-caching=150',
+        ],
+      }}
+      autoplay={true}
+      autoAspectRatio={true}
+      resizeMode="contain"
+      isLive={true}
+      autoReloadLive={true}
+      onError={() => setError(true)}
+      style={{flex: 1}}
+    />
+  );
 }
 
 function SinglePlayerSection({type = 0, index = 0, onChange, onRemove, screenDevices, rtspUrl}) {
+  const device = screenDevices[type][index];
 
-    const device = screenDevices[type][index];
-
-    if (device) {
-        return (<View style={{flex: 1}}>
-            <Player key={'screen_device_' + device.id} uri={rtspUrl + '/live/' + device.id} />
-            <Menu style={{backgroundColor: '#333333', position: 'absolute', right: 10, top: 10, padding: 5,  borderColor: '#777777', borderStyle: 'solid', borderWidth: 1}}>
-                <MenuTrigger>
-                    <Icon name="tune" size={20} color="#ffffff" />
-                </MenuTrigger>
-                <MenuOptions>
-                    <MenuOption text="Change" onSelect={() => onChange(type, index)} />
-                    <MenuOption text="Remove" onSelect={() => onRemove(type, index)} />
-                    <View style={{marginVertical: 5, marginHorizontal: 2, borderBottomWidth: 1, borderColor: '#cccccc'}}/>
-                    <MenuOption text={'Device: ' + device.device_name } disabled={true} />
-                </MenuOptions>
-            </Menu>
-        </View>);
-    }
-
-    return (<View style={{flex: 1}}>
-        <TouchableOpacity style={{flex:1, alignItems: 'center', justifyContent: 'center'}} onPress={() => onChange(type, index)}>
-            <Icon name="add-circle-outline" size={90} color="#ffffff" />
-        </TouchableOpacity>
-    </View>);
+  if (device) {
+    return (
+      <View style={{flex: 1}}>
+        <Player key={'screen_device_' + device.id} uri={rtspUrl + '/live/' + device.id} />
+        <Menu
+          style={{
+            backgroundColor: '#333333',
+            position: 'absolute',
+            right: 10,
+            top: 10,
+            padding: 5,
+            borderColor: '#777777',
+            borderStyle: 'solid',
+            borderWidth: 1,
+          }}>
+          <MenuTrigger>
+            <Icon name="tune" size={20} color="#ffffff" />
+          </MenuTrigger>
+          <MenuOptions style={{backgroundColor: '#333333'}}>
+            <MenuOption text="Change" onSelect={() => onChange(type, index)} />
+            <MenuOption text="Remove" onSelect={() => onRemove(type, index)} />
+            <View style={{marginVertical: 5, marginHorizontal: 2, borderBottomWidth: 1, borderColor: '#cccccc'}} />
+            <MenuOption text={'Device: ' + device.device_name} disabled={true} />
+          </MenuOptions>
+        </Menu>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{flex: 1}}>
+      <TouchableOpacity
+        style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}
+        onPress={() => onChange(type, index)}>
+        <Icon name="add-circle-outline" size={90} color="#ffffff" />
+      </TouchableOpacity>
+    </View>
+  );
 }
 
 function TwinPlayerSection({type = 1, index = 0, onChange, onRemove, screenDevices, rtspUrl}) {
-    const groupIndex = index * 2;
-    return (<View style={{flex: 1, flexDirection: 'row'}}>
-        <SinglePlayerSection type={type} index={groupIndex} onChange={onChange} onRemove={onRemove} screenDevices={screenDevices} rtspUrl={rtspUrl} />
-        <SinglePlayerSection type={type} index={groupIndex + 1} onChange={onChange} onRemove={onRemove} screenDevices={screenDevices} rtspUrl={rtspUrl} />
-    </View>);
+  const groupIndex = index * 2;
+  return (
+    <View style={{flex: 1, flexDirection: 'row'}}>
+      <SinglePlayerSection
+        type={type}
+        index={groupIndex}
+        onChange={onChange}
+        onRemove={onRemove}
+        screenDevices={screenDevices}
+        rtspUrl={rtspUrl}
+      />
+      <SinglePlayerSection
+        type={type}
+        index={groupIndex + 1}
+        onChange={onChange}
+        onRemove={onRemove}
+        screenDevices={screenDevices}
+        rtspUrl={rtspUrl}
+      />
+    </View>
+  );
 }
 
 function QuadPlayerSection({onChange, onRemove, screenDevices, rtspUrl}) {
-    return (<View style={{flex: 1}}>
-        <TwinPlayerSection type={2} index={0} onChange={onChange} onRemove={onRemove} screenDevices={screenDevices} rtspUrl={rtspUrl} />
-        <TwinPlayerSection type={2} index={1} onChange={onChange} onRemove={onRemove} screenDevices={screenDevices} rtspUrl={rtspUrl} />
-    </View>);
+  return (
+    <View style={{flex: 1}}>
+      <TwinPlayerSection
+        type={2}
+        index={0}
+        onChange={onChange}
+        onRemove={onRemove}
+        screenDevices={screenDevices}
+        rtspUrl={rtspUrl}
+      />
+      <TwinPlayerSection
+        type={2}
+        index={1}
+        onChange={onChange}
+        onRemove={onRemove}
+        screenDevices={screenDevices}
+        rtspUrl={rtspUrl}
+      />
+    </View>
+  );
 }
 
-
 function ScreenButton({onPress, name, active = false}) {
-    return (<TouchableOpacity style={{backgroundColor: active ? '#007700' : '#333333', marginLeft: 5, marginRight: 5, borderColor: '#777777', borderStyle: 'solid', borderWidth: 1}} onPress={onPress}>
-        <Text style={{color: 'white', height: 30, width: 30, textAlignVertical: 'center', textAlign: 'center'}}>{name}</Text>
-    </TouchableOpacity>);
+  return (
+    <TouchableOpacity
+      style={{
+        backgroundColor: active ? '#007700' : '#333333',
+        marginLeft: 5,
+        marginRight: 5,
+        borderColor: '#777777',
+        borderStyle: 'solid',
+        borderWidth: 1,
+      }}
+      onPress={onPress}>
+      <Text style={{color: 'white', height: 30, width: 30, textAlignVertical: 'center', textAlign: 'center'}}>
+        {name}
+      </Text>
+    </TouchableOpacity>
+  );
 }
 
 function PlayerScreen({navigation}) {
-
-    const [activeScreen, setActiveScreen] = useState(0);
-    const {state, dispatch} = useContext(SessionContext);
-
-    const screenDevices = state.selectedDeviceList.map(screens =>
-        screens.map(deviceId => deviceId && state.deviceList.find(({id}) => id === deviceId)));
-
-    const rtspUrl = getRtspAddressByCredentials(state.activeAccount);
-
-    const onAddCamera = useCallback((type, index) =>
-        navigation.navigate('DeviceSetCamera', {
-            type, index
-        }), []);
-
-    const onRemoveCamera = useCallback(async (type, index) => {
-        const selectedDeviceList = await setSelectedCamera(state.activeAccount.id, type, index,
-            null, state.selectedDeviceList);
-        dispatch({type: 'update_selected_device_list', payload: selectedDeviceList});
-    }, [state.selectedDeviceList, state.activeAccount]);
-
-    const screens = [
-        ['1', <SinglePlayerSection onChange={onAddCamera} onRemove={onRemoveCamera} screenDevices={screenDevices} rtspUrl={rtspUrl} />],
-        ['2', <TwinPlayerSection onChange={onAddCamera} onRemove={onRemoveCamera} screenDevices={screenDevices} rtspUrl={rtspUrl} />],
-        ['4', <QuadPlayerSection onChange={onAddCamera} onRemove={onRemoveCamera} screenDevices={screenDevices} rtspUrl={rtspUrl} />]
-    ];
-
-    return (<View style={{flex: 1}}>
-        {screens[activeScreen][1]}
-        <View style={{color: 'white', position: 'absolute', left:10, bottom: 10, flexDirection: 'row'}}>
-            {screens.map(([target], index) =>
-                <ScreenButton key={index} name={target} active={index === activeScreen} onPress={() => setActiveScreen(index)} />)}
-        </View>
-        <View style={{position: 'absolute', top:10, left:20}}>
-            <ToggleNavigationButton />
-        </View>
-    </View>);
+  const [activeScreen, setActiveScreen] = useState(0);
+  const {state, dispatch} = useContext(SessionContext);
+
+  const screenDevices = state.selectedDeviceList.map((screens) =>
+    screens.map((deviceId) => deviceId && state.deviceList.find(({id}) => id === deviceId)),
+  );
+
+  const rtspUrl = getRtspAddressByCredentials(state.activeAccount);
+
+  const onAddCamera = useCallback(
+    (type, index) =>
+      navigation.navigate('DeviceSetCamera', {
+        type,
+        index,
+      }),
+    [],
+  );
+
+  const onRemoveCamera = useCallback(
+    async (type, index) => {
+      const selectedDeviceList = await setSelectedCamera(
+        state.activeAccount.id,
+        type,
+        index,
+        null,
+        state.selectedDeviceList,
+      );
+      dispatch({type: 'update_selected_device_list', payload: selectedDeviceList});
+    },
+    [state.selectedDeviceList, state.activeAccount],
+  );
+
+  const screens = [
+    [
+      '1',
+      <SinglePlayerSection
+        onChange={onAddCamera}
+        onRemove={onRemoveCamera}
+        screenDevices={screenDevices}
+        rtspUrl={rtspUrl}
+      />,
+    ],
+    [
+      '2',
+      <TwinPlayerSection
+        onChange={onAddCamera}
+        onRemove={onRemoveCamera}
+        screenDevices={screenDevices}
+        rtspUrl={rtspUrl}
+      />,
+    ],
+    [
+      '4',
+      <QuadPlayerSection
+        onChange={onAddCamera}
+        onRemove={onRemoveCamera}
+        screenDevices={screenDevices}
+        rtspUrl={rtspUrl}
+      />,
+    ],
+  ];
+
+  return (
+    <View style={{flex: 1}}>
+      {screens[activeScreen][1]}
+      <View style={{color: 'white', position: 'absolute', left: 10, bottom: 10, flexDirection: 'row'}}>
+        {screens.map(([target], index) => (
+          <ScreenButton
+            key={index}
+            name={target}
+            active={index === activeScreen}
+            onPress={() => setActiveScreen(index)}
+          />
+        ))}
+      </View>
+      <View style={{position: 'absolute', top: 10, left: 20}}>
+        <ToggleNavigationButton />
+      </View>
+    </View>
+  );
 }
 
-function DirectPlayScreen({route: {params: {deviceId}}, navigation}) {
-
-    const {state} = useContext(SessionContext);
-
-    const device = state.deviceList.find(({id}) => parseInt(id) === parseInt(deviceId));
-
-    useEffect(() => {
-        SplashScreen.hide();
-    }, []);
-
-    if (!device) {
-        return <PlayerError onPress={() => navigation.navigate('DeviceShowCamera')} />;
-    }
-
-    const rtspUrl = getRtspAddressByCredentials(state.activeAccount);
-
-    return (<View style={{flex: 1}}>
-        <Player key={'device_' + device.id} uri={rtspUrl + '/live/' + device.id} />
-        <Menu style={{backgroundColor: '#333333', position: 'absolute', right: 10, top: 10, padding: 5,  borderColor: '#777777', borderStyle: 'solid', borderWidth: 1}}>
-            <MenuTrigger>
-                <Icon name="tune" size={20} color="#ffffff" />
-            </MenuTrigger>
-            <MenuOptions>
-                <MenuOption text="Close" onSelect={() => navigation.navigate('DeviceShowCamera')} />
-                <View style={{marginVertical: 5, marginHorizontal: 2, borderBottomWidth: 1, borderColor: '#cccccc'}}/>
-                <MenuOption text={'Device: ' + device.device_name } disabled={true} />
-            </MenuOptions>
-        </Menu>
-    </View>);
+function DirectPlayScreen({
+  route: {
+    params: {deviceId},
+  },
+  navigation,
+}) {
+  const {state} = useContext(SessionContext);
+
+  const device = state.deviceList.find(({id}) => parseInt(id) === parseInt(deviceId));
+
+  useEffect(() => {
+    SplashScreen.hide();
+  }, []);
+
+  if (!device) {
+    return <PlayerError onPress={() => navigation.navigate('DeviceShowCamera')} />;
+  }
+
+  const rtspUrl = getRtspAddressByCredentials(state.activeAccount);
+
+  return (
+    <View style={{flex: 1}}>
+      <Player key={'device_' + device.id} uri={rtspUrl + '/live/' + device.id} />
+      <Menu
+        style={{
+          backgroundColor: '#333333',
+          position: 'absolute',
+          right: 10,
+          top: 10,
+          padding: 5,
+          borderColor: '#777777',
+          borderStyle: 'solid',
+          borderWidth: 1,
+        }}>
+        <MenuTrigger>
+          <Icon name="tune" size={20} color="#ffffff" />
+        </MenuTrigger>
+        <MenuOptions>
+          <MenuOption text="Close" onSelect={() => navigation.navigate('DeviceShowCamera')} />
+          <View style={{marginVertical: 5, marginHorizontal: 2, borderBottomWidth: 1, borderColor: '#cccccc'}} />
+          <MenuOption text={'Device: ' + device.device_name} disabled={true} />
+        </MenuOptions>
+      </Menu>
+    </View>
+  );
 }
 
-function SetCameraScreen({route: {params: {index, type}}, navigation}) {
-
-    const [loading, setLoading] = useState(false);
-    const {state, dispatch} = useContext(SessionContext);
-
-    const onSelectCamera = useCallback(async (id) => {
-        setLoading(true);
-
-        const selectedDeviceList = await setSelectedCamera(state.activeAccount.id, type,
-            index, id, state.selectedDeviceList);
-        dispatch({type: 'update_selected_device_list', payload: selectedDeviceList});
-        navigation.goBack();
-
-    }, []);
-
-    return <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
-        {loading ? <ActivityIndicator size="large" color="white"  /> : <FlatList data={state.deviceList} keyExtractor={({id}) => '' + id} renderItem={({item: {id, device_name}}) =>
-            <TouchableOpacity style={{marginTop: 5, paddingLeft: 10, paddingRight: 10, paddingTop: 15,
-                paddingBottom: 15, backgroundColor: '#333333'}} onPress={() => onSelectCamera(id)}>
-                <Text style={{color: 'white'}}>#{id} - {device_name}</Text></TouchableOpacity>} />}
-    </SafeAreaView>;
+function SetCameraScreen({
+  route: {
+    params: {index, type},
+  },
+  navigation,
+}) {
+  const [loading, setLoading] = useState(false);
+  const {state, dispatch} = useContext(SessionContext);
+
+  const onSelectCamera = useCallback(async (id) => {
+    setLoading(true);
+
+    const selectedDeviceList = await setSelectedCamera(
+      state.activeAccount.id,
+      type,
+      index,
+      id,
+      state.selectedDeviceList,
+    );
+    dispatch({type: 'update_selected_device_list', payload: selectedDeviceList});
+    navigation.goBack();
+  }, []);
+
+  return (
+    <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
+      {loading ? (
+        <ActivityIndicator size="large" color="white" />
+      ) : (
+        <FlatList
+          data={state.deviceList}
+          keyExtractor={({id}) => '' + id}
+          renderItem={({item: {id, device_name}}) => (
+            <TouchableOpacity
+              style={{
+                marginTop: 5,
+                paddingLeft: 10,
+                paddingRight: 10,
+                paddingTop: 15,
+                paddingBottom: 15,
+                backgroundColor: '#333333',
+              }}
+              onPress={() => onSelectCamera(id)}>
+              <Text style={{color: 'white'}}>
+                #{id} - {device_name}
+              </Text>
+            </TouchableOpacity>
+          )}
+        />
+      )}
+    </SafeAreaView>
+  );
 }
 
 function ShowCameraScreen({navigation}) {
-
-    const {state} = useContext(SessionContext);
-
-    return <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
-        <FlatList data={state.deviceList} keyExtractor={({id}) => '' + id} renderItem={({item: {id, device_name}}) =>
-            <TouchableOpacity style={{marginTop: 5, paddingLeft: 10, paddingRight: 10, paddingTop: 15,
-                paddingBottom: 15, backgroundColor: '#333333'}} onPress={() => {
-                navigation.navigate('DeviceDirectPlay', {
-                    deviceId: id
-                })
+  const {state} = useContext(SessionContext);
+
+  return (
+    <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
+      <FlatList
+        data={state.deviceList}
+        keyExtractor={({id}) => '' + id}
+        renderItem={({item: {id, device_name}}) => (
+          <TouchableOpacity
+            style={{
+              marginTop: 5,
+              paddingLeft: 10,
+              paddingRight: 10,
+              paddingTop: 15,
+              paddingBottom: 15,
+              backgroundColor: '#333333',
+            }}
+            onPress={() => {
+              navigation.navigate('DeviceDirectPlay', {
+                deviceId: id,
+              });
             }}>
-                <Text style={{color: 'white'}}>#{id} - {device_name}</Text></TouchableOpacity>} />
-    </SafeAreaView>;
+            <Text style={{color: 'white'}}>
+              #{id} - {device_name}
+            </Text>
+          </TouchableOpacity>
+        )}
+      />
+    </SafeAreaView>
+  );
 }
 
 export function CameraScreen() {
-    return (
-        <Stack.Navigator>
-            <Stack.Screen name="DevicePlayer" component={PlayerScreen} options={{headerShown: false}} />
-            <Stack.Screen name="DeviceSetCamera" options={{title: 'Set Camera to Screen'}} component={SetCameraScreen} />
-        </Stack.Navigator>);
+  return (
+    <Stack.Navigator>
+      <Stack.Screen name="DevicePlayer" component={PlayerScreen} options={{headerShown: false}} />
+      <Stack.Screen name="DeviceSetCamera" options={{title: 'Set Camera to Screen'}} component={SetCameraScreen} />
+    </Stack.Navigator>
+  );
 }
 
 export function DirectCameraScreen() {
-    return (<Stack.Navigator>
-        <Stack.Screen name="DeviceShowCamera" options={{title: 'Show Camera', headerLeft: () => <View style={{paddingLeft:15}}><ToggleNavigationButton /></View>}} component={ShowCameraScreen} />
-            <Stack.Screen name="DeviceDirectPlay" options={{headerShown: false}}  component={DirectPlayScreen} />
-        </Stack.Navigator>);
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="DeviceShowCamera"
+        options={{
+          title: 'Show Camera',
+          headerLeft: () => (
+            <View style={{paddingLeft: 15}}>
+              <ToggleNavigationButton />
+            </View>
+          ),
+        }}
+        component={ShowCameraScreen}
+      />
+      <Stack.Screen name="DeviceDirectPlay" options={{headerShown: false}} component={DirectPlayScreen} />
+    </Stack.Navigator>
+  );
 }
-
diff --git a/screens/ConnectServerScreen.js b/screens/ConnectServerScreen.js
index b4a17de..d4e00e6 100644
--- a/screens/ConnectServerScreen.js
+++ b/screens/ConnectServerScreen.js
@@ -1,4 +1,3 @@
-
 import React, {useState, useContext} from 'react';
 import {Button, Image, View, FlatList, Text, ActivityIndicator} from 'react-native';
 
@@ -10,84 +9,100 @@ import {checkServerCredentials} from '../lib/api';
 
 import SessionContext from '../session-context';
 
-
 function ListItem({id, accountInfo, navigation, setLoading, updateActiveAccount}) {
-
-    const {name, address, port, login, password} = accountInfo;
-
-    return (<View style={{flexDirection: 'row'}}>
-        <View style={{flex: 1, padding: 5}}>
-            <Text style={{color: 'white', textAlignVertical: 'center', flex:1}}>{name}</Text>
+  const {name, address, port, login, password} = accountInfo;
+
+  return (
+    <View style={{flexDirection: 'row'}}>
+      <View style={{flex: 1, padding: 5}}>
+        <Text style={{color: 'white', textAlignVertical: 'center', flex: 1}}>{name}</Text>
+      </View>
+      <View style={{flexDirection: 'row'}}>
+        <View>
+          <Button
+            title="Connect"
+            onPress={async () => {
+              setLoading(true);
+
+              const url = 'https://' + address + (port ? ':' + port : '');
+
+              try {
+                const status = await checkServerCredentials(url, login, password);
+                if (status === false) {
+                  // show edit server screen
+                  setLoading(false);
+                  return;
+                }
+
+                await setActiveAccount(id);
+
+                updateActiveAccount({id, ...accountInfo});
+              } catch (err) {
+                Toast.show({
+                  type: 'error',
+                  text1: 'Login Error',
+                  text2: err.message,
+                });
+                setLoading(false);
+              }
+            }}
+          />
         </View>
-        <View style={{flexDirection: 'row'}}>
-            <View>
-                <Button title="Connect" onPress={async() => {
-
-                    setLoading(true);
-
-                    const url = 'https://' + address + (port ? ':' + port : '')
-
-                    try {
-                        const status = await checkServerCredentials(url, login, password);
-                        if (status === false) {
-                            // show edit server screen
-                            setLoading(false);
-                            return;
-                        }
-
-                        await setActiveAccount(id);
-
-                        updateActiveAccount({id, ...accountInfo});
-                    } catch (err) {
-                        Toast.show({
-                            type: 'error',
-                            text1: 'Login Error',
-                            text2: err.message
-                        })
-                        setLoading(false);
-                    }
-
-                }} />
-            </View>
-            <View style={{marginLeft: 5}}>
-                <Button title="Edit" onPress={() => {
-
-                    navigation.navigate('ServerSettings', {
-                        id, ...accountInfo
-                    });
-
-                }} />
-            </View>
+        <View style={{marginLeft: 5}}>
+          <Button
+            title="Edit"
+            onPress={() => {
+              navigation.navigate('ServerSettings', {
+                id,
+                ...accountInfo,
+              });
+            }}
+          />
         </View>
-    </View>);
+      </View>
+    </View>
+  );
 }
 
 export default function ConnectServerScreen({navigation}) {
-    // const {colors} = useTheme();
-
-    const [loading, setLoading] = useState(false);
-    const {state, dispatch} = useContext(SessionContext);
-
-    return (
-        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-            <Image width={320} height={320} source={{uri: 'launch_screen'}} style={{width:320, height:320}} />
-            {loading ?
-                <ActivityIndicator size="large" color="white" /> :
-                <><View style={{backgroundColor: '#222222', alignSelf: 'stretch', marginLeft: 10, marginRight: 10, marginBottom:15}}>
-                        <FlatList
-                            data={state.accountList}
-                            renderItem={({item: [id, accountInfo]}) => <ListItem id={id} accountInfo={accountInfo}
-                                                                                 navigation={navigation}
-                                                                                 setLoading={setLoading}
-                                                                                 updateActiveAccount={(activeAccount) =>
-                                                                                     dispatch({type: 'login', payload: activeAccount})}/>}
-                            keyExtractor={([id]) => id} />
-                    </View>
-                    <Button
-                        title="Add Server"
-                        onPress={() => navigation.navigate('ServerSettings')}
-                    /></>}
-
-        </View>
-    );
+  // const {colors} = useTheme();
+
+  const [loading, setLoading] = useState(false);
+  const {state, dispatch} = useContext(SessionContext);
+  return (
+    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <Image width={320} height={320} source={{uri: 'launch_screen'}} style={{width: 320, height: 320}} />
+      {loading ? (
+        <ActivityIndicator size="large" color="white" />
+      ) : (
+        <>
+          {state.accountList.length > 0 && (
+            <View
+              style={{
+                backgroundColor: '#222222',
+                alignSelf: 'stretch',
+                marginLeft: 10,
+                marginRight: 10,
+                marginBottom: 15,
+              }}>
+              <FlatList
+                data={state.accountList}
+                renderItem={({item: [id, accountInfo]}) => (
+                  <ListItem
+                    id={id}
+                    accountInfo={accountInfo}
+                    navigation={navigation}
+                    setLoading={setLoading}
+                    updateActiveAccount={(activeAccount) => dispatch({type: 'login', payload: activeAccount})}
+                  />
+                )}
+                keyExtractor={([id]) => id}
+              />
+            </View>
+          )}
+          <Button title="Add Server" onPress={() => navigation.navigate('ServerSettings')} />
+        </>
+      )}
+    </View>
+  );
 }
diff --git a/screens/EventScreen.js b/screens/EventScreen.js
index b7ecdaf..7b492e1 100644
--- a/screens/EventScreen.js
+++ b/screens/EventScreen.js
@@ -1,40 +1,27 @@
-import React, {
-  useEffect,
-  useState,
-  useCallback,
-  useContext,
-  useRef,
-} from 'react';
-import {
-  View,
-  Text,
-  FlatList,
-  TouchableOpacity,
-  SafeAreaView,
-  ActivityIndicator,
-  StyleSheet,
-} from 'react-native';
-import {
-  Menu,
-  MenuOption,
-  MenuOptions,
-  MenuTrigger,
-} from 'react-native-popup-menu';
+import React, {useEffect, useState, useCallback, useContext, useRef} from 'react';
+import {View, Text, FlatList, TouchableOpacity, SafeAreaView, ActivityIndicator, StyleSheet} from 'react-native';
+import {Menu, MenuOption, MenuOptions, MenuTrigger} from 'react-native-popup-menu';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import Micon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {createStackNavigator} from '@react-navigation/stack';
 import dayJs from 'dayjs';
 import {VLCPlayer} from 'react-native-vlc-media-player';
-
+import * as RNLocalize from 'react-native-localize';
 import {getEvents} from '../lib/api';
 import {getAddressByCredentials} from '../lib/util';
 import PlayerError from '../components/PlayerError';
 import SessionContext from '../session-context';
 import ToggleNavigationButton from '../components/ToggleNavigationButton';
+const utc = require('dayjs/plugin/utc');
+const timezone = require('dayjs/plugin/timezone');
+dayJs.extend(utc);
+dayJs.extend(timezone);
 
 const Stack = createStackNavigator();
-
-const dateFormat = 'M-D-YY h:mm:s A';
+const getLocalTime = (dateTime, dateFormat) => {
+  const localTimezone = RNLocalize.getTimeZone();
+  return dayJs(dateTime).utc().local().tz(localTimezone).format(dateFormat);
+};
 function Player({uri}) {
   const [error, setError] = useState(false);
   const [stopped, setStopped] = useState(false);
@@ -70,11 +57,7 @@ function Player({uri}) {
   return (
     <View style={{flex: 1}}>
       {loading && (
-        <ActivityIndicator
-          style={{position: 'absolute', top: 0, left: 0, right: 0}}
-          size="large"
-          color="white"
-        />
+        <ActivityIndicator style={{position: 'absolute', top: 0, left: 0, right: 0}} size="large" color="white" />
       )}
       <VLCPlayer
         ref={player}
@@ -91,7 +74,7 @@ function Player({uri}) {
   );
 }
 
-function EventButton({id, title, published, updated, active, current}) {
+function EventButton({id, title, published, updated, active, current, dateFormat}) {
   return (
     <View
       style={{
@@ -107,15 +90,11 @@ function EventButton({id, title, published, updated, active, current}) {
       </View>
       {updated ? (
         <View>
-          <Text style={{color: active ? 'white' : '#777777'}}>
-            Updated: {dayJs(updated).format(dateFormat)}
-          </Text>
+          <Text style={{color: active ? 'white' : '#777777'}}>Updated: {getLocalTime(updated, dateFormat)}</Text>
         </View>
       ) : published ? (
         <View>
-          <Text style={{color: active ? 'white' : '#777777'}}>
-            Published: {published}
-          </Text>
+          <Text style={{color: active ? 'white' : '#777777'}}>Published: {published}</Text>
         </View>
       ) : null}
     </View>
@@ -127,16 +106,16 @@ function EventList({navigation}) {
   const [lastUpdate, setLastUpdate] = useState();
   const [eventList, setEventList] = useState([]);
   const [refreshing, setRefreshing] = useState(false);
+  const dateFormat = state.activeAccount.dateFormat;
 
+  console.log('Timezone=====>', RNLocalize.getTimeZone());
   const onRefresh = useCallback(() => {
     setRefreshing(true);
-    getEvents(getAddressByCredentials(state.activeAccount)).then(
-      ([list, update]) => {
-        setEventList(list);
-        setLastUpdate(dayJs(update).format(dateFormat));
-        setRefreshing(false);
-      },
-    );
+    getEvents(getAddressByCredentials(state.activeAccount)).then(([list, update]) => {
+      setEventList(list);
+      setLastUpdate(getLocalTime(update, dateFormat));
+      setRefreshing(false);
+    });
   }, [state.activeAccount]);
 
   useEffect(() => {
@@ -171,7 +150,7 @@ function EventList({navigation}) {
                   index,
                 })
               }>
-              <EventButton {...item} />
+              <EventButton dateFormat={dateFormat} {...item} />
             </TouchableOpacity>
           )}
         />
@@ -247,25 +226,15 @@ function EventVideoPlayer({
     <View style={{flex: 1}}>
       <Player
         key={'event_video_' + eventId}
-        uri={
-          getAddressByCredentials(state.activeAccount, true) +
-          '/media/request.php?id=' +
-          eventId
-        }
+        uri={getAddressByCredentials(state.activeAccount, true) + '/media/request.php?id=' + eventId}
       />
       <TouchableOpacity
-        style={[
-          eventVideoPlayerStyles.commonNextPreviousButton,
-          eventVideoPlayerStyles.previousButton,
-        ]}
+        style={[eventVideoPlayerStyles.commonNextPreviousButton, eventVideoPlayerStyles.previousButton]}
         onPress={() => previousEvent()}>
         <Micon name="page-previous-outline" size={25} color="#ffffff" />
       </TouchableOpacity>
       <TouchableOpacity
-        style={[
-          eventVideoPlayerStyles.commonNextPreviousButton,
-          eventVideoPlayerStyles.nextButton,
-        ]}
+        style={[eventVideoPlayerStyles.commonNextPreviousButton, eventVideoPlayerStyles.nextButton]}
         onPress={() => nextEvent()}>
         <Micon name="page-next-outline" size={25} color="#ffffff" />
       </TouchableOpacity>
@@ -284,10 +253,7 @@ function EventVideoPlayer({
           <Icon name="tune" size={20} color="#ffffff" />
         </MenuTrigger>
         <MenuOptions>
-          <MenuOption
-            text="Events"
-            onSelect={() => navigation.navigate('EventList')}
-          />
+          <MenuOption text="Events" onSelect={() => navigation.navigate('EventList')} />
         </MenuOptions>
       </Menu>
     </View>
@@ -309,11 +275,7 @@ export default function EventScreen() {
         }}
         component={EventList}
       />
-      <Stack.Screen
-        name="EventVideoPlayer"
-        options={{headerShown: false}}
-        component={EventVideoPlayer}
-      />
+      <Stack.Screen name="EventVideoPlayer" options={{headerShown: false}} component={EventVideoPlayer} />
     </Stack.Navigator>
   );
 }
diff --git a/screens/ServerSettingsScreen.js b/screens/ServerSettingsScreen.js
index ca507a7..fc24da6 100644
--- a/screens/ServerSettingsScreen.js
+++ b/screens/ServerSettingsScreen.js
@@ -1,4 +1,3 @@
-
 import React, {useState, useContext, createContext} from 'react';
 
 import {useTheme} from '@react-navigation/native';
@@ -12,248 +11,361 @@ import {checkServerCredentials} from '../lib/api';
 import {saveNotificationToken} from '../lib/notification';
 import {getFreshAccountId, setAccountInfo, setActiveAccount} from '../lib/storage';
 
-
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 import messaging from '@react-native-firebase/messaging';
 
 const Tab = createMaterialTopTabNavigator();
 
 const ServerConfigContext = createContext({
-    id: '',
-    notificationPerm: (Platform.OS === 'android'), onNotificationPerm: () => {},
-    address: '', onChangeAddress: () => {},
-    port: '', onChangePort: () => {},
-    login: '', onChangeLogin: () => {},
-    password: '', onChangePassword: () => {},
-    name: '', onChangeName: () => {},
-    rtspAddress: '', onChangeRtspAddress: () => {},
-    rtspPort: '', onChangeRtspPort: () => {},
-    disabled: '', setDisabled: () => {},
-    onSubmit: () => {}
+  id: '',
+  notificationPerm: Platform.OS === 'android',
+  onNotificationPerm: () => {},
+  address: '',
+  onChangeAddress: () => {},
+  port: '',
+  onChangePort: () => {},
+  login: '',
+  onChangeLogin: () => {},
+  password: '',
+  onChangePassword: () => {},
+  name: '',
+  onChangeName: () => {},
+  rtspAddress: '',
+  onChangeRtspAddress: () => {},
+  rtspPort: '',
+  onChangeRtspPort: () => {},
+  disabled: '',
+  setDisabled: () => {},
+  onSubmit: () => {},
 });
 
 function BasicInfoView() {
-
-    const {
-        id,
-        address, onChangeAddress,
-        login, onChangeLogin,
-        password, onChangePassword,
-        name, onChangeName,
-        disabled, setDisabled,
-        onSubmit
-    } = useContext(ServerConfigContext);
-
-    const {colors} = useTheme();
-
-    const inputStyle = StyleSheet.flatten([styles.textInput, {
-        borderColor: colors.border,
-        backgroundColor: colors.background,
-        color: colors.text}]);
-
-    return (
-        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }}>
-            <View style={{padding: 10}}>
-                <View style={styles.formRow}>
-                    <Text style={{flex:1, color: colors.text, textAlignVertical: 'center'}}>Server Address:</Text>
-                    <TextInput style={inputStyle} value={address} disabled={disabled} autoCapitalize="none"
-                               autoCorrect={false} autoCompleteType="off" onChangeText={address => onChangeAddress(address)} />
-                </View>
-                <View style={styles.formRow}>
-                    <Text style={{flex:1, color: colors.text, textAlignVertical: 'center'}}>Login:</Text>
-                    <TextInput style={inputStyle} value={login} disabled={disabled} autoCapitalize="none"
-                               autoCorrect={false} autoCompleteType="off" onChangeText={login => onChangeLogin(login)} />
-                </View>
-                <View style={styles.formRow}>
-                    <Text style={{flex:1, color: colors.text, textAlignVertical: 'center'}}>Password:</Text>
-                    <TextInput style={inputStyle} value={password} disabled={disabled} autoCapitalize="none"
-                               autoCorrect={false} onChangeText={password => onChangePassword(password)} />
-                </View>
-                <View style={styles.formRow}>
-                    <Text style={{flex:1, color: colors.text, textAlignVertical: 'center'}}>Server Name:</Text>
-                    <TextInput style={inputStyle} value={name} disabled={disabled}
-                               onChangeText={name => onChangeName(name)}/>
-                </View>
-                <View style={{alignItems: 'center', marginTop: 10}}>
-                    <Button title={id ? 'Save' : 'Connect'} onPress={() => onSubmit(address, login, password, name, setDisabled)}
-                            disabled={disabled || !address || !login || !password || !name} />
-                </View>
-            </View>
-        </KeyboardAvoidingView>
-    );
+  const {
+    id,
+    address,
+    onChangeAddress,
+    login,
+    onChangeLogin,
+    password,
+    onChangePassword,
+    name,
+    onChangeName,
+    disabled,
+    setDisabled,
+    onSubmit,
+  } = useContext(ServerConfigContext);
+
+  const {colors} = useTheme();
+
+  const inputStyle = StyleSheet.flatten([
+    styles.textInput,
+    {
+      borderColor: colors.border,
+      backgroundColor: colors.background,
+      color: colors.text,
+    },
+  ]);
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}>
+      <View style={{padding: 10}}>
+        <View style={styles.formRow}>
+          <Text style={{flex: 1, color: colors.text, textAlignVertical: 'center'}}>Server Address:</Text>
+          <TextInput
+            style={inputStyle}
+            value={address}
+            disabled={disabled}
+            autoCapitalize="none"
+            autoCorrect={false}
+            autoCompleteType="off"
+            onChangeText={(address) => onChangeAddress(address)}
+          />
+        </View>
+        <View style={styles.formRow}>
+          <Text style={{flex: 1, color: colors.text, textAlignVertical: 'center'}}>Login:</Text>
+          <TextInput
+            style={inputStyle}
+            value={login}
+            disabled={disabled}
+            autoCapitalize="none"
+            autoCorrect={false}
+            autoCompleteType="off"
+            onChangeText={(login) => onChangeLogin(login)}
+          />
+        </View>
+        <View style={styles.formRow}>
+          <Text style={{flex: 1, color: colors.text, textAlignVertical: 'center'}}>Password:</Text>
+          <TextInput
+            style={inputStyle}
+            value={password}
+            disabled={disabled}
+            autoCapitalize="none"
+            autoCorrect={false}
+            onChangeText={(password) => onChangePassword(password)}
+          />
+        </View>
+        <View style={styles.formRow}>
+          <Text style={{flex: 1, color: colors.text, textAlignVertical: 'center'}}>Server Name:</Text>
+          <TextInput style={inputStyle} value={name} disabled={disabled} onChangeText={(name) => onChangeName(name)} />
+        </View>
+        <View style={{alignItems: 'center', marginTop: 10}}>
+          <Button
+            title={id ? 'Save' : 'Connect'}
+            onPress={() => onSubmit(address, login, password, name, setDisabled)}
+            disabled={disabled || !address || !login || !password || !name}
+          />
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
 }
 
 function AdvancedInfoView({navigation}) {
-
-    const {
-        id,
-        notificationPerm, onNotificationPerm,
-        disabled,
-        address, onChangeAddress,
-        port, onChangePort,
-        rtspAddress, onChangeRtspAddress,
-        rtspPort, onChangeRtspPort,
-    } = useContext(ServerConfigContext);
-
-    const {colors} = useTheme();
-
-    const inputStyle = StyleSheet.flatten([styles.textInput, {
-        borderColor: colors.border,
-        backgroundColor: colors.background,
-        color: colors.text}]);
-
-    return (
-        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }}>
-            <View style={{padding: 10}}>
-                <View style={styles.formRow}>
-                    <Text style={{flex:1, color: colors.text, textAlignVertical: 'center'}}>Server Address:</Text>
-                    <TextInput style={inputStyle} value={address} disabled={disabled}
-                               autoCorrect={false} autoCompleteType="off" onChangeText={address => onChangeAddress(address)} autoCapitalize="none" />
-                </View>
-                <View style={styles.formRow}>
-                    <Text style={{flex:1, color: colors.text, textAlignVertical: 'center'}}>Server Port:</Text>
-                    <TextInput style={inputStyle} value={port} disabled={disabled} keyboardType="numeric"
-                               autoCorrect={false} autoCompleteType="off" onChangeText={port => onChangePort(port)} />
-                </View>
-                <View style={styles.formRow}>
-                    <Text style={{flex:1, color: colors.text, textAlignVertical: 'center'}}>RTSP Server Address:</Text>
-                    <TextInput style={inputStyle} value={rtspAddress} disabled={disabled} defaultValue={address}
-                               autoCorrect={false} autoCompleteType="off" onChangeText={rtspAddress => onChangeRtspAddress(rtspAddress)} autoCapitalize="none" />
-                </View>
-                <View style={styles.formRow}>
-                    <Text style={{flex:1, color: colors.text, textAlignVertical: 'center'}}>RTSP Server Port:</Text>
-                    <TextInput style={inputStyle} value={rtspPort} disabled={disabled} keyboardType="numeric"
-                               autoCorrect={false} autoCompleteType="off" onChangeText={rtspPort => onChangeRtspPort(rtspPort)}/>
-                </View>
-                <View style={{alignItems: 'center', marginTop: 10}}>
-                    <Button title="Complete" onPress={() => navigation.navigate('Basic')}
-                            disabled={!address} />
-                    {id && !notificationPerm ? <Button title="Allow Notification" onPress={() => requestNotificationPerm().then(perm => onNotificationPerm(perm))}/> : null}
-                </View>
-            </View>
-        </KeyboardAvoidingView>
-    );
+  const {
+    id,
+    notificationPerm,
+    onNotificationPerm,
+    disabled,
+    address,
+    onChangeAddress,
+    port,
+    onChangePort,
+    rtspAddress,
+    onChangeRtspAddress,
+    rtspPort,
+    onChangeRtspPort,
+  } = useContext(ServerConfigContext);
+
+  const {colors} = useTheme();
+  const inputStyle = StyleSheet.flatten([
+    styles.textInput,
+    {
+      borderColor: colors.border,
+      backgroundColor: colors.background,
+      color: colors.text,
+    },
+  ]);
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}>
+      <View style={{padding: 10}}>
+        <View style={styles.formRow}>
+          <Text style={{flex: 1, color: colors.text, textAlignVertical: 'center'}}>Server Address:</Text>
+          <TextInput
+            style={inputStyle}
+            value={address}
+            disabled={disabled}
+            autoCorrect={false}
+            autoCompleteType="off"
+            onChangeText={(address) => onChangeAddress(address)}
+            autoCapitalize="none"
+          />
+        </View>
+        <View style={styles.formRow}>
+          <Text style={{flex: 1, color: colors.text, textAlignVertical: 'center'}}>Server Port:</Text>
+          <TextInput
+            style={inputStyle}
+            value={port}
+            disabled={disabled}
+            keyboardType="numeric"
+            autoCorrect={false}
+            autoCompleteType="off"
+            onChangeText={(port) => onChangePort(port)}
+          />
+        </View>
+        <View style={styles.formRow}>
+          <Text style={{flex: 1, color: colors.text, textAlignVertical: 'center'}}>RTSP Server Address:</Text>
+          <TextInput
+            style={inputStyle}
+            value={rtspAddress}
+            disabled={disabled}
+            defaultValue={address}
+            autoCorrect={false}
+            autoCompleteType="off"
+            onChangeText={(rtspAddress) => onChangeRtspAddress(rtspAddress)}
+            autoCapitalize="none"
+          />
+        </View>
+        <View style={styles.formRow}>
+          <Text style={{flex: 1, color: colors.text, textAlignVertical: 'center'}}>RTSP Server Port:</Text>
+          <TextInput
+            style={inputStyle}
+            value={rtspPort}
+            disabled={disabled}
+            keyboardType="numeric"
+            autoCorrect={false}
+            autoCompleteType="off"
+            onChangeText={(rtspPort) => onChangeRtspPort(rtspPort)}
+          />
+        </View>
+
+        <View style={{alignItems: 'center', marginTop: 10}}>
+          <Button title="Complete" onPress={() => navigation.navigate('Basic')} disabled={!address} />
+          {id && !notificationPerm ? (
+            <Button
+              title="Allow Notification"
+              onPress={() => requestNotificationPerm().then((perm) => onNotificationPerm(perm))}
+            />
+          ) : null}
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
 }
 
 async function requestNotificationPerm() {
-    if (Platform.OS === 'android') {
-        return true;
-    }
+  if (Platform.OS === 'android') {
+    return true;
+  }
 
-    const authStatus = await messaging().requestPermission();
+  const authStatus = await messaging().requestPermission();
 
-    return (authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
-      authStatus === messaging.AuthorizationStatus.PROVISIONAL);
+  return (
+    authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL
+  );
 }
 
 export default function ServerSettingsScreen({route: {params}, navigation}) {
+  const {
+    id,
+    address: prevAddress = '',
+    login: prevLogin = 'admin',
+    password: prevPassword = 'bluecherry',
+    name: prevName,
+    port: prevPort = '7001',
+    rtspAddress: prevRtspAddress,
+    rtspPort: prevRtspPort = '7002',
+    dateFormat: prevDateFormat = 'M-D-YY h:m:s A',
+    notificationPerm: prevNotificationPerm = Platform.OS === 'android',
+  } = params ?? {};
+
+  const [dateFormat] = useState(prevDateFormat);
+  const [address, onChangeAddress] = useState(prevAddress);
+  const [port, onChangePort] = useState(prevPort);
+  const [login, onChangeLogin] = useState(prevLogin);
+  const [password, onChangePassword] = useState(prevPassword);
+  const [rtspAddress, onChangeRtspAddress] = useState(prevRtspAddress);
+  const [rtspPort, onChangeRtspPort] = useState(prevRtspPort);
+  const [notificationPerm, onNotificationPerm] = useState(prevNotificationPerm);
+
+  const [name, onChangeName] = useState(prevName);
+
+  const [disabled, setDisabled] = useState(false);
+
+  const saveAccountInfo = (id, serverUuid, notificationPerm) =>
+    setAccountInfo(id, {
+      address,
+      port,
+      login,
+      password,
+      rtspAddress,
+      rtspPort,
+      name,
+      serverUuid,
+      notificationPerm,
+      dateFormat,
+    });
 
-    const {
-        id,
-        address: prevAddress = '',
-        login: prevLogin = 'admin',
-        password: prevPassword = 'bluecherry',
-        name: prevName,
-        port: prevPort = '7001',
-        rtspAddress: prevRtspAddress,
-        rtspPort: prevRtspPort = '7002',
-        notificationPerm: prevNotificationPerm = (Platform.OS === 'android')
-    } = params ?? {};
-
-
-
-    const [address, onChangeAddress] = useState(prevAddress);
-    const [port, onChangePort] = useState(prevPort);
-    const [login, onChangeLogin] = useState(prevLogin);
-    const [password, onChangePassword] = useState(prevPassword);
-    const [rtspAddress, onChangeRtspAddress] = useState(prevRtspAddress);
-    const [rtspPort, onChangeRtspPort] = useState(prevRtspPort);
-    const [notificationPerm, onNotificationPerm] = useState(prevNotificationPerm);
-
-    const [name, onChangeName] = useState(prevName);
+  const {dispatch, updateAccountList} = useContext(SessionContext);
 
+  const onSubmit = async () => {
+    const url = 'https://' + address + (port ? ':' + port : '');
 
-    const [disabled, setDisabled] = useState(false);
+    setDisabled(true);
+    const serverUuid = await checkServerCredentials(
+      url,
+      login,
+      password,
+      id ? 'Credentials OK' : 'Connection Successful',
+    );
 
-    const saveAccountInfo = (id, serverUuid, notificationPerm) => setAccountInfo(id, {
-        address, port,
-        login, password,
-        rtspAddress, rtspPort,
-        name, serverUuid,
-        notificationPerm
-    });
+    if (serverUuid === false) {
+      setDisabled(false);
+      return;
+    }
 
-    const {dispatch, updateAccountList} = useContext(SessionContext);
-
-    const onSubmit = async () => {
-
-        const url = 'https://' + address + (port ? ':' + port : '');
-
-        setDisabled(true);
-        const serverUuid = await checkServerCredentials(url, login, password,
-            id ? 'Credentials OK' : 'Connection Successful');
-
-        if (serverUuid === false) {
-            setDisabled(false);
-            return;
-        }
-
-        try {
-            if (id) {
-                await saveAccountInfo(id, serverUuid, notificationPerm);
-                await updateAccountList();
-                navigation.goBack();
-                return;
-            }
-
-            const accountId = await getFreshAccountId();
-
-            await Promise.all([
-                saveAccountInfo(accountId, serverUuid, await requestNotificationPerm()),
-                setActiveAccount(accountId)
-            ]);
-
-            try {
-                const token = await messaging().getToken();
-                await saveNotificationToken(url, accountId, serverUuid, token);
-            } catch (err) {
-                Toast.show({
-                    type: 'error',
-                    text1: 'Notification System',
-                    text2: err.message
-                });
-            }
-
-            dispatch({type: 'login', payload: {
-                id: accountId, address, port, login, password, rtspAddress, rtspPort, name
-            }});
-        } catch (err) {
-            Toast.show({
-                type: 'error',
-                text1: 'Storage Error',
-                text2: err.message
-            });
-        }
-    };
-
-
-    const contextValue = {
-        id,
-        onNotificationPerm, notificationPerm,
-        address, onChangeAddress,
-        port, onChangePort,
-        login, onChangeLogin,
-        password, onChangePassword,
-        rtspAddress, onChangeRtspAddress,
-        rtspPort, onChangeRtspPort,
-        name, onChangeName,
-        disabled, setDisabled,
-        onSubmit};
-
-    return ( <ServerConfigContext.Provider value={contextValue}>
-        <Tab.Navigator>
-            <Tab.Screen name="Basic" component={BasicInfoView} />
-            <Tab.Screen name="Advanced" component={AdvancedInfoView} />
-        </Tab.Navigator>
-    </ServerConfigContext.Provider>);
+    try {
+      if (id) {
+        await saveAccountInfo(id, serverUuid, notificationPerm);
+        await updateAccountList();
+        navigation.goBack();
+        return;
+      }
+
+      const accountId = await getFreshAccountId();
+
+      await Promise.all([
+        saveAccountInfo(accountId, serverUuid, await requestNotificationPerm()),
+        setActiveAccount(accountId),
+      ]);
+
+      try {
+        const token = await messaging().getToken();
+        await saveNotificationToken(url, accountId, serverUuid, token);
+      } catch (err) {
+        Toast.show({
+          type: 'error',
+          text1: 'Notification System',
+          text2: err.message,
+        });
+      }
+
+      dispatch({
+        type: 'login',
+        payload: {
+          id: accountId,
+          address,
+          port,
+          login,
+          password,
+          rtspAddress,
+          rtspPort,
+          name,
+          dateFormat,
+        },
+      });
+    } catch (err) {
+      Toast.show({
+        type: 'error',
+        text1: 'Storage Error',
+        text2: err.message,
+      });
+    }
+  };
+
+  const contextValue = {
+    id,
+    onNotificationPerm,
+    notificationPerm,
+    address,
+    onChangeAddress,
+    port,
+    onChangePort,
+    login,
+    onChangeLogin,
+    password,
+    onChangePassword,
+    rtspAddress,
+    onChangeRtspAddress,
+    rtspPort,
+    onChangeRtspPort,
+    name,
+    onChangeName,
+    disabled,
+    setDisabled,
+    onSubmit,
+    dateFormat,
+  };
+
+  return (
+    <ServerConfigContext.Provider value={contextValue}>
+      <Tab.Navigator>
+        <Tab.Screen name="Basic" component={BasicInfoView} />
+        <Tab.Screen name="Advanced" component={AdvancedInfoView} />
+      </Tab.Navigator>
+    </ServerConfigContext.Provider>
+  );
 }
diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js
new file mode 100644
index 0000000..c47f731
--- /dev/null
+++ b/screens/SettingsScreen.js
@@ -0,0 +1,184 @@
+import React, {useState, useContext, createContext} from 'react';
+import {useTheme} from '@react-navigation/native';
+import {Button, StyleSheet, Text, View, KeyboardAvoidingView, Platform} from 'react-native';
+import RNPickerSelect from 'react-native-picker-select';
+import Toast from 'react-native-toast-message';
+import {createStackNavigator} from '@react-navigation/stack';
+
+import SessionContext from '../session-context';
+import {setAccountInfo} from '../lib/storage';
+import ToggleNavigationButton from '../components/ToggleNavigationButton';
+
+const settingContext = createContext({
+  onSubmit: () => {},
+  dateFormat: '',
+  onChangeDateFormat: () => {},
+});
+
+function AdvancedInfoView() {
+  const {onChangeDateFormat, dateFormat, onSubmit} = useContext(settingContext);
+
+  const {colors} = useTheme();
+  const styles = StyleSheet.create({
+    formRow: {
+      flexDirection: 'row',
+      marginBottom: 10,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    inputStyle: {
+      flex: 1,
+      height: 40,
+      borderWidth: 1,
+      borderColor: colors.border,
+      backgroundColor: colors.background,
+      color: colors.text,
+    },
+  });
+
+  const dateFormatList = [
+    {
+      value: 'M-D-YY h:m:s A',
+      label: 'M-D-YY h:m:s A',
+    },
+    {
+      value: 'MM-DD-YYYY hh:mm:ss A',
+      label: 'MM-DD-YYYY hh:mm:ss A',
+    },
+    {
+      value: 'DD-MM-YYYY hh:mm:ss A',
+      label: 'DD-MM-YYYY hh:mm:ss A',
+    },
+  ];
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{flex: 1, alignItems: 'stretch'}}>
+      <View style={{padding: 10}}>
+        <View style={styles.formRow}>
+          <Text style={{flex: 1, color: colors.text, textAlignVertical: 'center'}}>Choose Date Format:</Text>
+          <RNPickerSelect
+            items={dateFormatList}
+            placeholder={{
+              label: 'Select a Date format',
+              value: null,
+              color: '#9EA0A4',
+            }}
+            style={{
+              viewContainer: {
+                flex: 1,
+                height: 40,
+                borderWidth: 1,
+                borderColor: colors.border,
+                backgroundColor: colors.background,
+                color: colors.text,
+                justifyContent: 'center',
+              },
+              inputAndroid: {
+                borderColor: colors.border,
+                backgroundColor: colors.background,
+                color: colors.text,
+                alignContent: 'center',
+                textAlignVertical: 'center',
+              },
+              inputIOS: {
+                borderColor: colors.border,
+                backgroundColor: colors.background,
+                color: colors.text,
+                alignContent: 'center',
+                textAlignVertical: 'center',
+              },
+            }}
+            value={dateFormat}
+            onValueChange={(value) => {
+              onChangeDateFormat(value);
+            }}
+          />
+        </View>
+        <View style={{paddingRight: 0}}>
+          <Button title="Save" onPress={() => onSubmit()} />
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+export default function SettingsScreen({route: {params}, navigation}) {
+  const {updateAccountList, state, dispatch} = useContext(SessionContext);
+  const {activeAccount} = state;
+  const {address, port, login, password, rtspAddress, rtspPort, name} = activeAccount;
+
+  const {dateFormat: prevDateFormat = 'M-D-YY h:m:s A'} = activeAccount ?? {};
+  const Stack = createStackNavigator();
+  const [dateFormat, onChangeDateFormat] = useState(prevDateFormat);
+  const saveAccountInfo = (id, serverUuid, notificationPerm) =>
+    setAccountInfo(id, {
+      address,
+      port,
+      login,
+      password,
+      rtspAddress,
+      rtspPort,
+      name,
+      serverUuid,
+      notificationPerm,
+      dateFormat,
+    });
+
+  const onSubmit = async () => {
+    try {
+      await saveAccountInfo(state.activeAccount.id, state.activeAccount.serverUuid);
+      await updateAccountList();
+      await dispatch({
+        type: 'login',
+        payload: {
+          id: state.activeAccount.id,
+          address,
+          port,
+          login,
+          password,
+          rtspAddress,
+          rtspPort,
+          name,
+          dateFormat,
+        },
+      });
+      Toast.show({
+        type: 'success',
+        text1: 'Success!',
+        text2: 'Settings saved successfully',
+      });
+    } catch (err) {
+      Toast.show({
+        type: 'error',
+        text1: 'Storage Error',
+        text2: err.message,
+      });
+    }
+  };
+
+  const contextValue = {
+    onSubmit,
+    dateFormat,
+    onChangeDateFormat,
+  };
+
+  return (
+    <settingContext.Provider value={contextValue}>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="SettingsScreen"
+          options={{
+            title: 'Settings',
+            headerLeft: () => (
+              <View style={{paddingLeft: 15}}>
+                <ToggleNavigationButton />
+              </View>
+            ),
+          }}
+          component={AdvancedInfoView}
+        />
+      </Stack.Navigator>
+    </settingContext.Provider>
+  );
+}
diff --git a/state.js b/state.js
index cf8be97..c1d9027 100644
--- a/state.js
+++ b/state.js
@@ -1,26 +1,32 @@
-
 export const initialState = {
-    activeAccount: null,
-    accountList: [],
-    deviceList: [],
-    selectedDeviceList: [[null], [null, null], [null, null, null, null]],
-    targetDevice: null
+  activeAccount: null,
+  accountList: [],
+  deviceList: [],
+  selectedDeviceList: [[null], [null, null], [null, null, null, null]],
+  targetDevice: null,
 };
 
 export function reducer(state, action) {
-    switch (action.type) {
-        case 'login':
-            return {...initialState, activeAccount: action.payload, targetDevice: action.targetDevice};
-        case 'logout':
-            return {...initialState};
-        case 'update_account_list':
-            return {...state, accountList: action.payload};
-        case 'update_device_list':
-            return {...state, deviceList: action.payload};
-        case 'update_selected_device_list':
-            return {...state, selectedDeviceList: action.payload};
-        case 'update_all_device_list':
-            return {...state, deviceList: action.deviceList, selectedDeviceList: action.selectedDeviceList};
-    }
+  switch (action.type) {
+    case 'login':
+      return {
+        ...initialState,
+        activeAccount: action.payload,
+        targetDevice: action.targetDevice,
+      };
+    case 'logout':
+      return {...initialState};
+    case 'update_account_list':
+      return {...state, accountList: action.payload};
+    case 'update_device_list':
+      return {...state, deviceList: action.payload};
+    case 'update_selected_device_list':
+      return {...state, selectedDeviceList: action.payload};
+    case 'update_all_device_list':
+      return {
+        ...state,
+        deviceList: action.deviceList,
+        selectedDeviceList: action.selectedDeviceList,
+      };
+  }
 }
-
diff --git a/stylesheet.js b/stylesheet.js
index 5f64002..1b3beb4 100644
--- a/stylesheet.js
+++ b/stylesheet.js
@@ -1,19 +1,18 @@
-
 import {StyleSheet} from 'react-native';
 
 export default StyleSheet.create({
-    formRow: {
-        flexDirection: 'row',
-        marginBottom: 10
-    },
-    textInput: {
-        flex:1,
-        height: 40,
-        borderWidth: 1
-    }
+  formRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+    alignItems: 'center'
+  },
+  textInput: {
+    flex: 1,
+    height: 40,
+    borderWidth: 1,
+  },
 });
 
-
 /*
 const styles = StyleSheet.create({
   scrollView: {
@@ -52,4 +51,4 @@ const styles = StyleSheet.create({
     paddingRight: 12,
     textAlign: 'right',
   },
-});*/
\ No newline at end of file
+});*/
diff --git a/yarn.lock b/yarn.lock
index cadd004..77d1fef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1251,6 +1251,16 @@
   version "11.2.0"
   resolved "https://registry.npmjs.org/@react-native-firebase/messaging/-/messaging-11.2.0.tgz"
 
+"@react-native-picker/picker@^1.8.3":
+  version "1.16.8"
+  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.16.8.tgz#2126ca54d4a5a3e9ea5e3f39ad1e6643f8e4b3d4"
+  integrity sha512-pacdQDX6V6EmjF+HoiIh6u++qx4mTK0WnhgUHRc01B+Qt5eoeUwseBqmqfTSXTx/aHDEd6PiIw7UGvKgFoqgFQ==
+
+"@react-native-picker/picker@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.1.0.tgz#1ef22d4e9b2e555d44b43453f51a46d8631f3182"
+  integrity sha512-iJ/QaDrBMBaW6cFuQyR3DXzcn2h7c5O7mGgmNLCBQHTTtLNBZR+Sxogy6YleFPeToNdysG5mTTkXqBmlWHMQqg==
+
 "@react-native/assets@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
@@ -2292,6 +2302,11 @@ data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 dayjs@^1.8.15:
   version "1.10.4"
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.10.4.tgz"
@@ -4093,13 +4108,13 @@ json5@^2.1.2:
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz"
-  dependencies:
+  optionalDependencies:
     graceful-fs "^4.1.6"
 
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz"
-  dependencies:
+  optionalDependencies:
     graceful-fs "^4.1.6"
 
 jsonify@~0.0.0:
@@ -4149,7 +4164,7 @@ kind-of@^6.0.0, kind-of@^6.0.1, kind-of@^6.0.2:
 klaw@^1.0.0:
   version "1.3.1"
   resolved "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz"
-  dependencies:
+  optionalDependencies:
     graceful-fs "^4.1.9"
 
 kleur@^3.0.3:
@@ -5253,10 +5268,23 @@ react-native-iphone-x-helper@^1.3.0:
   version "1.3.1"
   resolved "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz"
 
+react-native-localize@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-2.1.4.tgz#d4a41d9e03908c739e436dba9499b9e761b4e2f6"
+  integrity sha512-Cvow7TSUsyIPj6ddxqT2GnKexQ//Q2Ur6KAQSXIcrjvE2K7KzbbveMpGsBK0oKvF9X+5DcVVED3EVdZXcrEoBw==
+
 react-native-orientation-locker@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/react-native-orientation-locker/-/react-native-orientation-locker-1.2.0.tgz"
 
+react-native-picker-select@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/react-native-picker-select/-/react-native-picker-select-8.0.4.tgz#3f7f1f42df69b06e7d2c10338288332a6c40fd10"
+  integrity sha512-orBjPIwBkV5oipyVw263YNMI56f6Kj3p/ejabZoCYYNSG3AiLVVhC2RqsxMgDA7IayyURAW+AlV+mDJyVqLBkg==
+  dependencies:
+    "@react-native-picker/picker" "^1.8.3"
+    lodash.isequal "^4.5.0"
+
 react-native-popup-menu@^0.15.10:
   version "0.15.10"
   resolved "https://registry.npmjs.org/react-native-popup-menu/-/react-native-popup-menu-0.15.10.tgz"