Skip to content

Commit c3124a3

Browse files
pweglikNorbertKlockiewicz
pweglik
and
NorbertKlockiewicz
authored
fix: Fix keyboard covering input bar issue (#248)
Keyboard was covering the input bar. The bug was introduced when I added multiple tabs in llm example app. ### Type of change - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Documentation update (improves or adds clarity to existing documentation) ### Tested on - [x] iOS - [ ] Android ### Related issues #245 ### Checklist - [x] I have performed a self-review of my code - [x] My changes generate no new warnings --------- Co-authored-by: Norbert Klockiewicz <[email protected]>
1 parent 4369341 commit c3124a3

File tree

2 files changed

+85
-81
lines changed

2 files changed

+85
-81
lines changed

‎examples/llm/App.tsx

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ import SWMIcon from './assets/icons/swm_icon.svg';
55
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
66
import { useState } from 'react';
77
import ColorPalette from './colors';
8-
import { View, StyleSheet, Text } from 'react-native';
8+
import {
9+
View,
10+
StyleSheet,
11+
Text,
12+
KeyboardAvoidingView,
13+
Platform,
14+
} from 'react-native';
915
import LLMScreen from './screens/LLMScreen';
1016
import LLMToolCallingScreen from './screens/LLMToolCallingScreen';
1117

@@ -41,26 +47,32 @@ export default function App() {
4147
return (
4248
<SafeAreaProvider>
4349
<SafeAreaView style={styles.container}>
44-
<View style={styles.topContainer}>
45-
<SWMIcon width={45} height={45} />
46-
<Text style={styles.textModelName}>LLM on device demo</Text>
47-
<View style={styles.wheelPickerContainer}>
48-
<ScrollPicker
49-
dataSource={['Chat with LLM', 'Tool calling']}
50-
onValueChange={(_, selectedIndex) => {
51-
handleModeChange(selectedIndex);
52-
}}
53-
wrapperHeight={120}
54-
highlightColor={ColorPalette.primary}
55-
wrapperBackground="#fff"
56-
highlightBorderWidth={3}
57-
itemHeight={40}
58-
activeItemTextStyle={styles.activeScrollItem}
59-
/>
50+
<KeyboardAvoidingView
51+
style={styles.keyboardAvoidingView}
52+
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
53+
keyboardVerticalOffset={Platform.OS === 'android' ? 30 : 0}
54+
>
55+
<View style={styles.topContainer}>
56+
<SWMIcon width={45} height={45} />
57+
<Text style={styles.textModelName}>LLM on device demo</Text>
58+
<View style={styles.wheelPickerContainer}>
59+
<ScrollPicker
60+
dataSource={['Chat with LLM', 'Tool calling']}
61+
onValueChange={(_, selectedIndex) => {
62+
handleModeChange(selectedIndex);
63+
}}
64+
wrapperHeight={120}
65+
highlightColor={ColorPalette.primary}
66+
wrapperBackground="#fff"
67+
highlightBorderWidth={3}
68+
itemHeight={40}
69+
activeItemTextStyle={styles.activeScrollItem}
70+
/>
71+
</View>
6072
</View>
61-
</View>
6273

63-
{renderScreen()}
74+
{renderScreen()}
75+
</KeyboardAvoidingView>
6476
</SafeAreaView>
6577
</SafeAreaProvider>
6678
);
@@ -72,6 +84,7 @@ const styles = StyleSheet.create({
7284
justifyContent: 'space-between',
7385
backgroundColor: '#fff',
7486
},
87+
keyboardAvoidingView: { flex: 1 },
7588
topContainer: {
7689
marginTop: 5,
7790
height: 165,

‎examples/llm/screens/LLMScreen.tsx

Lines changed: 53 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { useEffect, useRef, useState } from 'react';
22
import {
33
Keyboard,
4-
KeyboardAvoidingView,
5-
Platform,
64
StyleSheet,
75
Text,
86
TextInput,
@@ -57,73 +55,66 @@ export default function LLMScreen() {
5755
textContent={`Loading the model ${(llm.downloadProgress * 100).toFixed(0)} %`}
5856
/>
5957
) : (
60-
<SafeAreaView style={styles.container}>
61-
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
62-
<KeyboardAvoidingView
63-
style={styles.keyboardAvoidingView}
64-
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
65-
keyboardVerticalOffset={Platform.OS === 'android' ? 30 : 0}
66-
>
67-
{llm.messageHistory.length ? (
68-
<View style={styles.chatContainer}>
69-
<Messages
70-
chatHistory={llm.messageHistory}
71-
llmResponse={llm.response}
72-
isGenerating={llm.isGenerating}
73-
deleteMessage={llm.deleteMessage}
74-
/>
75-
</View>
76-
) : (
77-
<View style={styles.helloMessageContainer}>
78-
<Text style={styles.helloText}>Hello! 👋</Text>
79-
<Text style={styles.bottomHelloText}>
80-
What can I help you with?
81-
</Text>
82-
</View>
83-
)}
84-
85-
<View style={styles.bottomContainer}>
86-
<TextInput
87-
onFocus={() => setIsTextInputFocused(true)}
88-
onBlur={() => setIsTextInputFocused(false)}
89-
style={{
90-
...styles.textInput,
91-
borderColor: isTextInputFocused
92-
? ColorPalette.blueDark
93-
: ColorPalette.blueLight,
94-
}}
95-
placeholder="Your message"
96-
placeholderTextColor={'#C1C6E5'}
97-
multiline={true}
98-
ref={textInputRef}
99-
onChangeText={(text: string) => setUserInput(text)}
58+
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
59+
<SafeAreaView style={styles.container}>
60+
{llm.messageHistory.length ? (
61+
<View style={styles.chatContainer}>
62+
<Messages
63+
chatHistory={llm.messageHistory}
64+
llmResponse={llm.response}
65+
isGenerating={llm.isGenerating}
66+
deleteMessage={llm.deleteMessage}
10067
/>
101-
{userInput && (
102-
<TouchableOpacity
103-
style={styles.sendChatTouchable}
104-
onPress={async () => !llm.isGenerating && (await sendMessage())}
105-
>
106-
<SendIcon height={24} width={24} padding={4} margin={8} />
107-
</TouchableOpacity>
108-
)}
109-
{llm.isGenerating && (
110-
<TouchableOpacity
111-
style={styles.sendChatTouchable}
112-
onPress={llm.interrupt}
113-
>
114-
<PauseIcon height={24} width={24} padding={4} margin={8} />
115-
</TouchableOpacity>
116-
)}
11768
</View>
118-
</KeyboardAvoidingView>
119-
</TouchableWithoutFeedback>
120-
</SafeAreaView>
69+
) : (
70+
<View style={styles.helloMessageContainer}>
71+
<Text style={styles.helloText}>Hello! 👋</Text>
72+
<Text style={styles.bottomHelloText}>
73+
What can I help you with?
74+
</Text>
75+
</View>
76+
)}
77+
78+
<View style={styles.bottomContainer}>
79+
<TextInput
80+
onFocus={() => setIsTextInputFocused(true)}
81+
onBlur={() => setIsTextInputFocused(false)}
82+
style={{
83+
...styles.textInput,
84+
borderColor: isTextInputFocused
85+
? ColorPalette.blueDark
86+
: ColorPalette.blueLight,
87+
}}
88+
placeholder="Your message"
89+
placeholderTextColor={'#C1C6E5'}
90+
multiline={true}
91+
ref={textInputRef}
92+
onChangeText={(text: string) => setUserInput(text)}
93+
/>
94+
{userInput && (
95+
<TouchableOpacity
96+
style={styles.sendChatTouchable}
97+
onPress={async () => !llm.isGenerating && (await sendMessage())}
98+
>
99+
<SendIcon height={24} width={24} padding={4} margin={8} />
100+
</TouchableOpacity>
101+
)}
102+
{llm.isGenerating && (
103+
<TouchableOpacity
104+
style={styles.sendChatTouchable}
105+
onPress={llm.interrupt}
106+
>
107+
<PauseIcon height={24} width={24} padding={4} margin={8} />
108+
</TouchableOpacity>
109+
)}
110+
</View>
111+
</SafeAreaView>
112+
</TouchableWithoutFeedback>
121113
);
122114
}
123115

124116
const styles = StyleSheet.create({
125117
container: { flex: 1 },
126-
keyboardAvoidingView: { flex: 1 },
127118
chatContainer: { flex: 10, width: '100%' },
128119
helloMessageContainer: {
129120
flex: 10,

0 commit comments

Comments
 (0)