React Native - adjust scrollview as keyboard shows up (ios) - ios

Question

In my chat application, I am having a trouble animating scrollview(chat view) to slide up/adjust as keyboard shows up from bottom of the view.
If you have used any major chatting apps such as Messengers, WeChat, Line, etc., you will see how your chat screen goes up smoothly as keyboard shows up. Right now, I have imitated KeyboardAvoidingView and implemented something similar to that:
// Triggered by Keyboard.addListener("keyboardWillChangeFrame", onKeyboardChange);
const onKeyboardChange = e => {
if (!e) {
//this is scroll view's contentInset.top
setSpacing(0);
return;
}
const { duration, easing, endCoordinates, startCoordinates } = e;
let offset;
if (startCoordinates) {
offset = startCoordinates.screenY - endCoordinates.screenY;
} else {
offset = endCoordinates.height;
}
const spacing = offset > 0 ? offset : 0;
if (duration && easing) {
LayoutAnimation.configureNext({
// We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
duration: duration > 10 ? duration : 10,
update: {
duration: duration > 10 ? duration : 10,
type: LayoutAnimation.Types[easing] || "keyboard"
}
});
}
//this is scroll view's contentInset.top
setSpacing(spacing);
};
As you can see, I am currently just calculating offset using event passed by KeyboardWillChangeFrame and using LayoutAnimation to animate scrollview slide up.
It works fairly well but I can still see a slight delay.
In native iOS development, it can be achieve by using animateKeyframes:
#objc func keyboardWillShow(notification: NSNotification){
let duration = notification.userInfo![UIResponder.keyboardAnimationDurationUserInfoKey] as! Double
let curve = notification.userInfo![UIResponder.keyboardAnimationCurveUserInfoKey] as! UInt
let curFrame = (notification.userInfo![UIResponder.keyboardFrameBeginUserInfoKey] as! NSValue).cgRectValue
let targetFrame = (notification.userInfo![UIResponder.keyboardFrameEndUserInfoKey] as! NSValue).cgRectValue
let deltaY = targetFrame.origin.y - curFrame.origin.y
UIView.animateKeyframes(withDuration: duration, delay: 0.0, options: UIView.KeyframeAnimationOptions(rawValue: curve), animations: {
self.view.frame.origin.y += deltaY
})
}
But it seems like it is not available in react native.
Is there anyway I can adjust scrollview as keyboard shows up from bottom as smoothly as possible?

Answer 1

You have to do 2 things
1 : First use react-native-keyboard-spacer to make Textinput container scroll
2 : Set offset of ChatList when keyboard show/hide
Complete Code
import React from "react";
import { View, FlatList, Text, TextInput, Keyboard } from "react-native";
import KeyboardSpacer from "react-native-keyboard-spacer";
export default class App extends React.Component {
state = {
chat: [
{ id: 1, text: "Test1 1" },
{ id: 2, text: "Test1 2" },
{ id: 3, text: "Test1 3" },
{ id: 4, text: "Test1 4" },
{ id: 5, text: "Test1 5" },
{ id: 6, text: "Test1 6" },
{ id: 7, text: "Test1 7" },
{ id: 8, text: "Test1 8" },
{ id: 9, text: "Test1 9" },
{ id: 10, text: "Test1 10" },
{ id: 11, text: "Test1 11" },
{ id: 12, text: "Test1 12" },
{ id: 13, text: "Test1 13" },
{ id: 14, text: "Test1 14" },
{ id: 15, text: "Test1 15" },
{ id: 16, text: "Test1 16" },
{ id: 17, text: "Test1 17" },
{ id: 18, text: "Test1 18" },
{ id: 19, text: "Test1 19" },
{ id: 20, text: "Test1 20" },
{ id: 21, text: "Test1 21" },
{ id: 22, text: "Test1 22" },
{ id: 23, text: "Test1 23" },
{ id: 24, text: "Test1 24" }
]
};
scrollOffset = 0;
keyboardHeight = 0;
componentDidMount() {
this.keyboardWillShowListener = Keyboard.addListener(
"keyboardWillShow",
this._keyboardWillShow
);
this.keyboardWillHideListener = Keyboard.addListener(
"keyboardWillHide",
this._keyboardWillHide
);
}
componentWillUnmount() {
this.keyboardWillShowListener.remove();
this.keyboardWillHideListener.remove();
}
_keyboardWillShow = e => {
this.keyboardHeight = e.endCoordinates
? e.endCoordinates.height
: e.end.height;
const newOffset = this.scrollOffset + this.keyboardHeight;
this.chatList.scrollToOffset({ offset: newOffset, animated: true });
};
_keyboardWillHide = e => {
const newOffset = this.scrollOffset - this.keyboardHeight;
this.chatList.scrollToOffset({ offset: newOffset, animated: true });
};
handleScroll = e => {
this.scrollOffset = e.nativeEvent.contentOffset.y;
};
render() {
return (
<View style={{ flex: 1, marginTop: 30 }}>
<FlatList
style={{ flex: 1 }}
ref={ref => {
this.chatList = ref;
}}
data={this.state.chat}
renderItem={({ item }) => (
<Text style={{ padding: 20 }}>{item.text}</Text>
)}
onScroll={this.handleScroll}
/>
<TextInput
placeholder="Enter Message"
style={{ padding: 20, borderTopWidth: 1, borderColor: "black" }}
/>
<KeyboardSpacer />
</View>
);
}
}
App Preview