TextInput is pushed up to the screen
See original GitHub issueIssue Description
I searched through previous issues and found one related to this. It said to add android:windowSoftInputMode=“adjustResize” to the AndroidManifest.xml file which I have already done and have also rebuild the project but it cant seem to fix the problem still.
Steps to Reproduce / Code Snippets
This is my component in which Im using the GiftedChat component:
import React, { Component } from 'react';
import {
View
} from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
import FirebaseHelper from '../../api/FirebaseHelper';
export default class ChatScreen extends Component {
constructor(props) {
super(props);
this.state = {
messages: []
}
this.onSend = this.onSend.bind(this);
}
onSend(message) {
FirebaseHelper.sendMessage(message);
}
componentDidMount() {
FirebaseHelper.loadMessages((message) => {
this.setState((prevState) => {
return {
messages: GiftedChat.append(prevState.messages, message)
}
})
});
}
render() {
return (
<GiftedChat
messages={this.state.messages}
onSend={this.onSend}
user={{
_id: FirebaseHelper.getUId()
}}
/>
);
}
componentWillUnmount() {
FirebaseHelper.closeChat();
}
}
And this is the FirebaseHelper class:
import * as firebase from 'firebase';
import {FIREBASE_CONFIG, CHAT_TYPES} from '../AppConstants';
class FirebaseHelper {
uid = '';
messagesRef = null;
constructor() {
firebase.initializeApp(FIREBASE_CONFIG);
this.uid = Math.round(Math.random()*1000000000000000);
}
setUId(uid) {
this.uid = uid;
}
getUId() {
return this.uid;
}
loadMessages(callback) {
this.messagesRef = firebase.database().ref("messages");
this.messagesRef.off();
const onReceive = (data) => {
const message = data.val();
callback({
_id: data.key,
text: message.text,
createdAt: new Date(message.createdAt),
user: {
_id: message.user._id,
name: message.user.name
},
});
};
this.messagesRef.on('child_added', onReceive);
}
sendMessage(message) {
for(let i = 0; i < message.length; i++) {
this.messagesRef.push({
text: message[i].text,
user: message[i].user,
createdAt: firebase.database.ServerValue.TIMESTAMP
});
}
}
closeChat() {
if(this.messagesRef) {
this.messagesRef.off();
}
}
createUser(chat_type, gender, age) {
let userRef = userRef = firebase.database().ref("users/anonymous/"+this.getUId());
return userRef.set({
roomId: 0,
age: age,
name: 'X',
gender: gender
});
}
}
export default new FirebaseHelper();
This is the output right now:
This is my AndroidManifest.xml file:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.chatapp"
android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-sdk
android:minSdkVersion="16"
android:targetSdkVersion="22" />
<application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:windowSoftInputMode="adjustResize"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
Expected Results
I can’t seem to fix the problem which is causing that textinput to push up the screen its not even in a modal. How do I fix it so it becomes like the one shown in the readme?
Additional Information
- React Native version: 0.45.0
- react-native-gifted-chat version: ^0.1.4
- Platform(s) (iOS, Android, or both?): Android
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:8
Top Results From Across the Web
When a textinput focuses, how to avoid pushing a view up and ...
I have a screen where there is a FlatList sandwiched between a Header and a Footer component. The FlatList has rows that when...
Read more >Text input control in Power Apps - Microsoft Learn
Learn about the details, properties and examples of the text input control in Power Apps.
Read more >How to avoid keyboard pushing layout with TextInput - YouTube
How to avoid keyboard pushing layout with TextInput =========================☕ if you feel good video, you can gift me a cup coffee:Paypal: ...
Read more >Canvas Power Apps - Resetting A Text Input Field - YouTube
This is a video aimed at showing you how easily it is to clear and reenter data into a text input field on...
Read more >How to make your React Native app respond gracefully when ...
So I added a new element to “bump” everything up a few pixels. The image at the top gets pushed out of the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
well i made a small change in GiftedChat.js … i removed this :
this.invertibleScrollViewProps = { inverted: true, keyboardShouldPersistTaps: this.props.keyboardShouldPersistTaps, onKeyboardWillShow: this.onKeyboardWillShow, onKeyboardWillHide: this.onKeyboardWillHide, onKeyboardDidShow: this.onKeyboardDidShow, onKeyboardDidHide: this.onKeyboardDidHide, };
and added this
this.invertibleScrollViewProps = { inverted: true, keyboardShouldPersistTaps: this.props.keyboardShouldPersistTaps, onKeyboardWillShow: this.onKeyboardWillShow, onKeyboardWillHide: this.onKeyboardWillHide, onKeyboardDidHide: this.onKeyboardDidHide, };
and it is working for me
Similar issue which somehow got solved by removing:
<StatusBar hidden={true} />
Additional Information