Skip to content

Commit

Permalink
fix: add headerHeight to keyboardVerticalOffset
Browse files Browse the repository at this point in the history
  • Loading branch information
hyochan committed Sep 14, 2024
1 parent 01eb988 commit b1ca38c
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 11 deletions.
32 changes: 22 additions & 10 deletions app/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import {EditText, IconButton, Typography, useDooboo} from 'dooboo-ui';
import {Stack} from 'expo-router';

import {t} from '../src/STRINGS';
import {View} from 'react-native';
import {useState} from 'react';
import {Pressable, View} from 'react-native';
import {ElementRef, useRef, useState} from 'react';
import {KeyboardAvoidingView} from 'react-native-keyboard-controller';
import {useHeaderHeight} from '@react-navigation/elements';

const Container = styled.View`
const Container = styled.SafeAreaView`
background-color: ${({theme}) => theme.bg.basic};
flex: 1;
Expand All @@ -19,6 +20,8 @@ const Container = styled.View`
export default function Index(): JSX.Element {
const {theme} = useDooboo();
const [text, setText] = useState('');
const ref = useRef<ElementRef<typeof EditText>>(null);
const headerHeight = useHeaderHeight();

return (
<Container>
Expand All @@ -28,24 +31,33 @@ export default function Index(): JSX.Element {
}}
/>
<KeyboardAvoidingView
keyboardVerticalOffset={headerHeight}
style={css`
flex: 1;
width: 100%;
`}
behavior="padding"
>
<View
<Pressable
onPress={() => ref?.current?.blur()}
style={css`
flex: 1;
background-color: ${theme.bg.paper};
justify-content: center;
align-items: center;
`}
>
<Typography.Heading5>Hi there!</Typography.Heading5>
</View>
<View
style={css`
flex: 1;
background-color: ${theme.bg.paper};
justify-content: center;
align-items: center;
`}
>
<Typography.Heading5>Hi there!</Typography.Heading5>
</View>
</Pressable>
<EditText
ref={ref}
onChangeText={setText}
value={text}
decoration="boxed"
Expand Down
Binary file modified bun.lockb
Binary file not shown.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,10 @@
"@expo/react-native-action-sheet": "^4.1.0",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/datetimepicker": "8.0.1",
"@react-navigation/elements": "^1.3.31",
"@shopify/flash-list": "1.6.4",
"date-fns": "^3.6.0",
"dooboo-ui": "^0.2.34",
"dooboo-ui": "^0.2.36",
"expo": "~51.0.31",
"expo-constants": "~16.0.2",
"expo-device": "~6.0.2",
Expand Down

0 comments on commit b1ca38c

Please sign in to comment.