Fix keyboard in iot onboarding

helium · Nov 22, 2024 · 6ebaa47 · 6ebaa47
1 parent 25f8803
commit 6ebaa47
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 56 deletions.
diff --git a/src/app/services/HotspotService/pages/ExplorerPage.tsx b/src/app/services/HotspotService/pages/ExplorerPage.tsx
@@ -66,7 +66,7 @@ const ExplorerPage = () => {
       <TotalHotspotPuckContainer />
       <Map onCameraChanged={handleCameraChanged}>
         <Camera
-          zoomLevel={1}
+          minZoomLevel={1}
           maxZoomLevel={22}
           pitch={0}
           centerCoordinate={[
@@ -87,7 +87,7 @@ const ExplorerPage = () => {
               userLocation?.coords.latitude || 0,
             ]}
           >
-            <ImageBox source={require('@assets/images/puck.png')} />
+            <ImageBox source={require('@assets/images/puckNoBearing.png')} />
           </MarkerView>
         </UserLocation>
         {hotspotsWithMeta.map((hotspot) => {

diff --git a/src/features/hotspot-onboarding/screens/iot/ScanHotspots.tsx b/src/features/hotspot-onboarding/screens/iot/ScanHotspots.tsx
@@ -158,6 +158,11 @@ const ScanHotspots = () => {
     }
   }, [scannedDevices.length, scanning, startScan, stopScan])
 
+  useEffect(() => {
+    handleScanPress()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const navNext = useCallback(
     () => carouselRef?.current?.snapToNext(),
     [carouselRef],
@@ -166,6 +171,11 @@ const ScanHotspots = () => {
   const [connecting, setConnecting] = useState(false)
   const connectDevice = useCallback(
     (d: Device) => async () => {
+      if (MOCK) {
+        navNext()
+        return
+      }
+
       try {
         setConnecting(true)
         await connect(d)

diff --git a/src/features/hotspot-onboarding/screens/iot/WifiSetup.tsx b/src/features/hotspot-onboarding/screens/iot/WifiSetup.tsx
@@ -6,7 +6,7 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ScrollBox from '@components/ScrollBox'
 import { useColors, useSpacing } from '@config/theme/themeHooks'
-import { ViewStyle, StyleProp } from 'react-native'
+import { ViewStyle, StyleProp, KeyboardAvoidingView } from 'react-native'
 import Visibility from '@assets/svgs/visibility.svg'
 import VisibilityOff from '@assets/svgs/visibilityOff.svg'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
@@ -85,61 +85,65 @@ const WifiSetup = () => {
 
   return (
     <ScrollBox contentContainerStyle={contentContainer as StyleProp<ViewStyle>}>
-      <Box alignItems="center" marginBottom="2xl" paddingHorizontal="4xl">
-        <ImageBox
-          marginBottom="2xl"
-          source={require('@assets/images/passwordIcon.png')}
-        />
-        <Text variant="displayMdSemibold" color="primaryText">
-          {t('hotspotOnboarding.wifiSetup.title')}
-        </Text>
-        <Text
-          variant="textLgRegular"
-          color="text.quaternary-500"
-          marginTop="2.5"
-          textAlign="center"
-        >
-          {t('hotspotOnboarding.wifiSetup.subtitle', { network })}
-        </Text>
-        {error && (
-          <Text variant="textSmRegular" color="error.500" marginTop="2.5">
-            {error}
-          </Text>
-        )}
-      </Box>
-      <Box
-        flexDirection="row"
-        backgroundColor="cardBackground"
-        borderRadius="2xl"
-        paddingEnd="3xl"
-        padding="2"
+      <KeyboardAvoidingView
+        behavior="padding"
+        style={{ flex: 1, justifyContent: 'center' }}
       >
-        <TextInput
-          variant="transparentSmall"
-          flexGrow={1}
-          textInputProps={{
-            placeholder: t('hotspotOnboarding.wifiSetup.enterPassword'),
-            autoCorrect: false,
-            secureTextEntry,
-            autoComplete: 'off',
-            onChangeText: setPassword,
-            value: password,
-            autoFocus: true,
-            keyboardAppearance: 'dark',
-          }}
-        />
-        <TouchableOpacityBox
-          onPress={toggleSecureEntry}
-          justifyContent="center"
-        >
-          {secureTextEntry ? (
-            <Visibility color={colors.primaryText} />
-          ) : (
-            <VisibilityOff color={colors.primaryText} />
+        <Box alignItems="center" marginBottom="2xl" paddingHorizontal="4xl">
+          <ImageBox
+            marginBottom="2xl"
+            source={require('@assets/images/passwordIcon.png')}
+          />
+          <Text variant="displayMdSemibold" color="primaryText">
+            {t('hotspotOnboarding.wifiSetup.title')}
+          </Text>
+          <Text
+            variant="textLgRegular"
+            color="text.quaternary-500"
+            marginTop="2.5"
+            textAlign="center"
+          >
+            {t('hotspotOnboarding.wifiSetup.subtitle', { network })}
+          </Text>
+          {error && (
+            <Text variant="textSmRegular" color="error.500" marginTop="2.5">
+              {error}
+            </Text>
           )}
-        </TouchableOpacityBox>
-      </Box>
-
+        </Box>
+        <Box
+          flexDirection="row"
+          backgroundColor="cardBackground"
+          borderRadius="2xl"
+          paddingEnd="3xl"
+          padding="2"
+        >
+          <TextInput
+            variant="transparentSmall"
+            flexGrow={1}
+            textInputProps={{
+              placeholder: t('hotspotOnboarding.wifiSetup.enterPassword'),
+              autoCorrect: false,
+              secureTextEntry,
+              autoComplete: 'off',
+              onChangeText: setPassword,
+              value: password,
+              autoFocus: false,
+              keyboardAppearance: 'dark',
+            }}
+          />
+          <TouchableOpacityBox
+            onPress={toggleSecureEntry}
+            justifyContent="center"
+          >
+            {secureTextEntry ? (
+              <Visibility color={colors.primaryText} />
+            ) : (
+              <VisibilityOff color={colors.primaryText} />
+            )}
+          </TouchableOpacityBox>
+        </Box>
+      </KeyboardAvoidingView>
       {!loading && <CheckButton onPress={handleSetWifi} />}
       {loading && <Loading />}
     </ScrollBox>