Add keyboardAvoidingView. Fixes #8 (#72)

* add keyboardAvoidingView. Fixes #8 * update top navigation in contact details
cashubtc · Jun 19, 2023 · 5e61135 · 5e61135
1 parent 1a1d602
commit 5e61135
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 33 deletions.
diff --git a/src/components/InvoiceAmount.tsx b/src/components/InvoiceAmount.tsx
@@ -1,14 +1,15 @@
 import { getDecodedLnInvoice } from '@cashu/cashu-ts'
 import Button from '@comps/Button'
 import useLoading from '@comps/hooks/Loading'
+import { isIOS } from '@consts'
 import type { IInvoiceState } from '@model/ln'
 import { InvoiceAmountModal, InvoiceModal } from '@screens/Lightning/modal'
 import { ThemeContext } from '@src/context/Theme'
 import { globals, highlight as hi } from '@styles'
 import { cleanUpNumericStr, vib } from '@util'
 import { requestMint } from '@wallet'
 import { createRef, useContext, useEffect, useState } from 'react'
-import { Animated, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { Animated, KeyboardAvoidingView, StyleSheet, Text, TextInput, TouchableOpacity } from 'react-native'
 
 import { useShakeAnimation } from './animation/Shake'
 
@@ -90,7 +91,10 @@ export default function LNInvoiceAmountModal({
 						Satoshi
 					</Text>
 				</Animated.View>
-				<View style={styles.invoiceBtns}>
+				<KeyboardAvoidingView
+					style={styles.invoiceBtns}
+					behavior={isIOS ? 'padding' : 'height'}
+				>
 					<Button
 						txt={loading ? 'Invoice incoming...' : 'Create invoice'}
 						onPress={handleAmountSubmit}
@@ -100,7 +104,7 @@ export default function LNInvoiceAmountModal({
 							Cancel
 						</Text>
 					</TouchableOpacity>
-				</View>
+				</KeyboardAvoidingView>
 			</InvoiceAmountModal>
 			<InvoiceModal
 				invoice={invoice}

diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
@@ -1,7 +1,8 @@
+import { isIOS } from '@consts'
 import { ThemeContext } from '@src/context/Theme'
 import { highlight as hi, TPref } from '@styles'
 import { useContext } from 'react'
-import { KeyboardAvoidingView, Modal, Platform, StyleSheet, View } from 'react-native'
+import { KeyboardAvoidingView, Modal, StyleSheet, View } from 'react-native'
 
 interface IMyModalProps {
 	type: 'bottom' | 'question' | 'success' | 'error' | 'invoiceAmount'
@@ -57,7 +58,7 @@ export default function MyModal({
 				>
 					<KeyboardAvoidingView
 						style={getCorrectStyle()}
-						behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+						behavior={isIOS ? 'padding' : 'height'}
 					>
 						<View style={[getViewStyle(), success ? { backgroundColor: hi[highlight] } : {}]}>
 							{children}

diff --git a/src/components/screens/Addressbook/Contact.tsx b/src/components/screens/Addressbook/Contact.tsx
@@ -6,6 +6,7 @@ import { delContact, editContact as editC, getContacts } from '@db'
 import { l } from '@log'
 import MyModal from '@modal'
 import type { IContactPageProps } from '@model/nav'
+import TopNav from '@nav/TopNav'
 import { ContactsContext } from '@src/context/Contacts'
 import { ThemeContext } from '@src/context/Theme'
 import { globals, highlight as hi } from '@styles'
@@ -58,17 +59,7 @@ export default function ContactPage({ navigation, route }: IContactPageProps) {
 	}, [openEdit])
 	return (
 		<View style={[styles.container, { backgroundColor: color.BACKGROUND }]}>
-			{/* Go back button */}
-			<View style={styles.topNav}>
-				<TouchableOpacity
-					style={styles.topIconR}
-					onPress={() => navigation.navigate('Address book')}
-				>
-					<Text style={globals(color, highlight).pressTxt}>
-						Back
-					</Text>
-				</TouchableOpacity>
-			</View>
+			<TopNav withBackBtn />
 			{/* Contact info */}
 			<View style={[styles.contactContainer, { backgroundColor: color.INPUT_BG, borderColor: color.BORDER }]}>
 				<Text style={[styles.contactPic, { backgroundColor: color.INPUT_BG, borderColor: color.BORDER, color: color.TEXT }]}>
@@ -154,19 +145,6 @@ const styles = StyleSheet.create({
 		flex: 1,
 		paddingTop: 100
 	},
-	topNav: {
-		position: 'absolute',
-		top: 75,
-		left: 20,
-		right: 20,
-		flex: 1,
-		flexDirection: 'row',
-		justifyContent: 'flex-end',
-	},
-	topIconR: {
-		paddingLeft: 20,
-		paddingBottom: 20
-	},
 	contactContainer: {
 		borderWidth: 1,
 		borderRadius: 25,

diff --git a/src/components/screens/Lightning/payInvoice.tsx b/src/components/screens/Lightning/payInvoice.tsx
@@ -12,6 +12,7 @@ import type { TPayLNInvoicePageProps } from '@model/nav'
 import TopNav from '@nav/TopNav'
 import AddressbookModal from '@screens/Addressbook/modal'
 import { CoinSelectionModal, CoinSelectionResume } from '@screens/Lightning/modal'
+import { isIOS } from '@src/consts'
 import { useKeyboard } from '@src/context/Keyboard'
 import { ThemeContext } from '@src/context/Theme'
 import { sumProofsValue } from '@src/wallet/proofs'
@@ -21,7 +22,7 @@ import { cleanUpNumericStr, formatExpiry, formatInt, formatMintUrl, getInvoiceFr
 import { checkFees, payLnInvoice } from '@wallet'
 import * as Clipboard from 'expo-clipboard'
 import { useCallback, useContext, useEffect, useState } from 'react'
-import { StyleSheet, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { KeyboardAvoidingView, StyleSheet, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native'
 
 // TODO adapt style
 export default function PayInvoicePage({ navigation, route }: TPayLNInvoicePageProps) {
@@ -342,7 +343,7 @@ export default function PayInvoicePage({ navigation, route }: TPayLNInvoicePageP
 				</View>
 			}
 			{/* Bottom section */}
-			<View style={styles.action}>
+			<KeyboardAvoidingView style={styles.action} behavior={isIOS ? 'padding' : 'height'}>
 				{/* Open LNURL address book */}
 				{invoiceAmount === 0 &&
 					<TouchableOpacity
@@ -399,7 +400,7 @@ export default function PayInvoicePage({ navigation, route }: TPayLNInvoicePageP
 						}}
 					/>
 				}
-			</View>
+			</KeyboardAvoidingView>
 			{/* address book */}
 			{showAddressBook &&
 				<AddressbookModal

diff --git a/src/consts/env.ts b/src/consts/env.ts
@@ -1,6 +1,7 @@
 
 import { IExpoConfig } from '@model'
 import { default as Consts, ExecutionEnvironment as ExecEnv } from 'expo-constants'
+import { Platform } from 'react-native'
 
 const { executionEnvironment: execEnv } = Consts
 // `true` when running in Expo Go.
@@ -63,5 +64,5 @@ export const isTestMode = (typeof __TEST__ === 'boolean' && __TEST__)
 	|| (env?.NODE_ENV === 'test' && env?.NODE_ENV_SHORT === 'test')
 	|| process.env.NODE_ENV === 'test' || config?.extra?.NODE_ENV === 'test'
 
-
+export const isIOS = Platform.OS === 'ios'