custom keyboard animation

src/features/wallet/send/SendForm.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { ScrollView } from 'react-native'
 import { useTranslation } from 'react-i18next'
 import { Address } from '@helium/crypto-react-native'
 import SendInput from './SendInput'
@@ -161,12 +162,13 @@ const SendForm = ({
   )
 
   return (
-    <Box height="100%" justifyContent="space-between">
-      {isLocked && type === 'payment' && renderLockedPaymentForm()}
-      {isLocked && type === 'dc_burn' && renderLockedBurnForm()}
-      {!isLocked && type === 'payment' && renderPaymentForm()}
-      {!isLocked && type === 'dc_burn' && renderBurnForm()}
-
+    <Box height="100%" justifyContent="space-between" paddingBottom="xl">
+      <ScrollView contentInset={{ top: 16 }}>
+        {isLocked && type === 'payment' && renderLockedPaymentForm()}
+        {isLocked && type === 'dc_burn' && renderLockedBurnForm()}
+        {!isLocked && type === 'payment' && renderPaymentForm()}
+        {!isLocked && type === 'dc_burn' && renderBurnForm()}
+      </ScrollView>
       <Button
         onPress={onSubmit}
         title={

src/features/wallet/send/SendHeader.tsx

@@ -1,42 +1,119 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import { Keyboard } from 'react-native'
 import { useTranslation } from 'react-i18next'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated'
 import Box from '../../../components/Box'
 import SendCircle from '../../../assets/images/send-circle.svg'
 import Close from '../../../assets/images/close.svg'
 import TouchableOpacityBox from '../../../components/TouchableOpacityBox'
 import Text from '../../../components/Text'
 import { SendType } from './sendTypes'
 
+const ReanimatedBox = Animated.createAnimatedComponent(Box)
+
 type Props = {
   type: SendType
   onClosePress: () => void
-  flex?: number
 }
 
-const SendHeader = ({ type, onClosePress, flex }: Props) => {
+const SendHeader = ({ type, onClosePress }: Props) => {
   const { t } = useTranslation()
 
+  const keyboardState = useSharedValue(0)
+
+  useEffect(() => {
+    Keyboard.addListener('keyboardWillShow', keyboardShow)
+    Keyboard.addListener('keyboardWillHide', keyboardHide)
+
+    return () => {
+      Keyboard.removeListener('keyboardWillShow', keyboardShow)
+      Keyboard.removeListener('keyboardWillHide', keyboardHide)
+    }
+  })
+
+  const keyboardShow = () => {
+    keyboardState.value = 1
+  }
+
+  const keyboardHide = () => {
+    keyboardState.value = 0
+  }
+
+  const animatedOptions = {
+    duration: 300,
+    easing: Easing.bezier(0.1, 0.76, 0.55, 0.9),
+  }
+
+  const containerStyles = useAnimatedStyle(() => {
+    return {
+      height: withTiming(
+        keyboardState.value === 1 ? 100 : 250,
+        animatedOptions,
+      ),
+    }
+  })
+
+  const miniHeaderStyles = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: withTiming(
+            (1 - keyboardState.value) * -50,
+            animatedOptions,
+          ),
+        },
+      ],
+      opacity: withTiming(keyboardState.value, animatedOptions),
+    }
+  })
+
+  const mainHeaderStyles = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(1 - keyboardState.value, animatedOptions),
+    }
+  })
+
   return (
-    <Box
-      flex={flex}
+    <ReanimatedBox
+      style={containerStyles}
       backgroundColor="primaryBackground"
-      justifyContent="flex-start"
-      alignItems="center"
       padding="l"
     >
-      <Box flexDirection="row" justifyContent="flex-end" width="100%">
+      <Box flexDirection="row" justifyContent="space-between" width="100%">
+        <ReanimatedBox
+          style={miniHeaderStyles}
+          flexDirection="row"
+          alignItems="center"
+        >
+          <SendCircle width={30} />
+          <Text variant="h1" marginLeft="s" fontSize={24}>
+            {type === 'payment' && t('send.title.payment')}
+            {type === 'dc_burn' && t('send.title.dcBurn')}
+          </Text>
+        </ReanimatedBox>
         <TouchableOpacityBox padding="m" onPress={onClosePress}>
           <Close color="white" width={22} height={22} />
         </TouchableOpacityBox>
       </Box>
-      <Box marginBottom="m">
-        <SendCircle />
-      </Box>
-      <Text variant="h1">
-        {type === 'payment' && t('send.title.payment')}
-        {type === 'dc_burn' && t('send.title.dcBurn')}
-      </Text>
-    </Box>
+      <ReanimatedBox
+        style={mainHeaderStyles}
+        justifyContent="flex-start"
+        alignItems="center"
+      >
+        <Box marginBottom="m">
+          <SendCircle />
+        </Box>
+        <Text variant="h1">
+          {type === 'payment' && t('send.title.payment')}
+          {type === 'dc_burn' && t('send.title.dcBurn')}
+        </Text>
+      </ReanimatedBox>
+    </ReanimatedBox>
   )
 }
 

src/features/wallet/send/SendInput.tsx

@@ -60,13 +60,15 @@ const SendInput = ({
             defaultValue={defaultValue}
             editable={!locked}
             multiline
+            blurOnSubmit
             autoCompleteType="off"
             autoCapitalize="none"
             autoCorrect={false}
             dataDetectorTypes="none"
             keyboardAppearance="dark"
             keyboardType={type === 'amount' ? 'numeric' : 'default'}
             style={{ fontFamily: 'InputMono-Regular', fontSize: 15 }}
+            returnKeyType="done"
           />
         </Box>
       </Box>

src/features/wallet/send/SendView.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import { KeyboardAvoidingView } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
 import Box from '../../../components/Box'
 import { triggerNavHaptic } from '../../../utils/haptic'
@@ -60,28 +59,26 @@ const SendView = ({ scanResult }: { scanResult?: QrScanResult }) => {
 
   return (
     <Box flex={1}>
-      <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
-        <SendHeader flex={1.3} type={type} onClosePress={navBack} />
-        <SendAmountAvailableBanner amount={123455.12345678} />
-        <Box flex={3} backgroundColor="white" padding="l">
-          <SendForm
-            type={type}
-            isLocked={isLocked}
-            address={address}
-            amount={amount}
-            dcAmount={dcAmount}
-            memo={memo}
-            onAddressChange={setAddress}
-            onAmountChange={setAmount}
-            onDcAmountChange={setDcAmount}
-            onMemoChange={setMemo}
-            onScanPress={navScan}
-            onSendMaxPress={setMaxAmount}
-            onSubmit={submitTxn}
-            onUnlock={unlockForm}
-          />
-        </Box>
-      </KeyboardAvoidingView>
+      <SendHeader type={type} onClosePress={navBack} />
+      <SendAmountAvailableBanner amount={123455.12345678} />
+      <Box flex={3} backgroundColor="white" paddingHorizontal="l">
+        <SendForm
+          type={type}
+          isLocked={isLocked}
+          address={address}
+          amount={amount}
+          dcAmount={dcAmount}
+          memo={memo}
+          onAddressChange={setAddress}
+          onAmountChange={setAmount}
+          onDcAmountChange={setDcAmount}
+          onMemoChange={setMemo}
+          onScanPress={navScan}
+          onSendMaxPress={setMaxAmount}
+          onSubmit={submitTxn}
+          onUnlock={unlockForm}
+        />
+      </Box>
     </Box>
   )
 }