question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextInput is pushed up to the screen

See original GitHub issue

Issue 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: screenshot_1497147614 screenshot_1497147620

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:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:8

github_iconTop GitHub Comments

2reactions
controversialUsercommented, Jun 23, 2017

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

1reaction
d-johancommented, Jul 11, 2017

Similar issue which somehow got solved by removing: <StatusBar hidden={true} />

Additional Information

  • React Native version: 0.45.0
  • react-native-gifted-chat version: ^0.1.4
  • Platform(s) (iOS, Android, or both?): Android
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found