The issue of the flex: 1 view not expanding to its full height persists, along with the KeyboardAvoidingView functioning unre

My concern lies with a ScrollView that is not occupying the full remaining height, as shown here.

The red-bordered view should extend all the way down, but it fails to adjust properly when the keyboard is visible like in the case of selecting the 5th item.

This is the code for the component in question :


<Container>
      <Header navigation={this.props.navigation} title="Header" />
        <ScrollView style={{
          flexGrow: 1,
          borderColor: '#F00',
          borderWidth: 1,
        }}>
          <KeyboardAvoidingView behaviour="padding" keyboardVerticalOffset={50} style={{
            flex: 1,
          }}>
            <InputWithLabel label="1st item" editable={true} onTextChange={this.textChange} />
            <InputWithLabel label="2nd item" editable={true} onTextChange={this.textChange} />
            <InputWithLabel label="3rd item" editable={true} onTextChange={this.textChange} />
            <InputWithLabel label="4th item" editable={true} onTextChange={this.textChange} />
            <InputWithLabel label="5th item" editable={true} onTextChange={this.textChange} />
          </KeyboardAvoidingView>

        </ScrollView>
    </Container>	

Additionally, this is my root component where I make use of react-navigation to render components :

      
<Root>
        <StatusBar translucent={false} barStyle="light-content" />
        <Provider store={store}>
          <AppRoot/>
        </Provider>
      </Root>

I have tried adjusting the keyboardVerticalOffset parameter and also switching from "flexGrow: 1" to "flex: 1" in the scrollview, but the issue still persists.

What could be causing this problem?

Answer №1

import {
  ScreenSize,  
  ...
} from 'react-native'

const { screenHeight } = ScreenSize.get('window')  

<Wrapper>
  <TopBar navigation={this.props.navigation} title="Header" />
    <ScrollContainer style={{
      flex: 1,
      borderColor: '#F00',
      borderWidth: 1,
    }}>
      <KeyboardAvoidingBlock behavior="padding" keyboardVerticalOffset={50} style={{
        flex: 1,
      }}>
         <CustomSection style={{ minHeight: screenHeight }}>      
           <InputField label="1st item" editable={true} onChange={this.textChange} />
           <InputField label="2nd item" editable={true} onChange={this.textChange} />
           <InputField label="3rd item" editable={true} onChange={this.textChange} />
           <InputField label="4th item" editable={true} onChange={this.textChange} />
           <InputField label="5th item" editable={true} onChange={this.textChange} />
        </CustomSection>
      </KeyboardAvoidingBlock>

    </ScrollContainer>
</Wrapper>

Answer №2

I found a solution by increasing the flexibility of the form using KeyboardAvoidingView and setting the behavior to "position" as other options were not working for me.

Here is an example implementation:

import React from "react";
import Wrapper from "../../components/auth/authBackWrapper";
import SignInTitle from "../../components/auth/signIn/signInTitle";
import SignInForm from "../../components/auth/signIn/signInForm";
import SignInLinks from "../../components/auth/signIn/signInLinks";
import SignInButton from "../../components/auth/signIn/SignInButton";
import { Content } from "../../components/commonStyledComponents/commonStyledComponents";

import styled from "styled-components/native";

const KeyboarAvoid = styled.KeyboardAvoidingView`
    flex: 2.4;
`;

export default ({ }) =>
    <Wrapper>
        <Content p={20}>
            <SignInTitle />
            <KeyboarAvoid behavior='position'>
                <SignInForm />
            </KeyboarAvoid>
            <SignInButton />
            <SignInLinks />
        </Content>
    </Wrapper>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for avoiding content shift caused by image loading

I am working on a 4 column layout with image thumbnails. https://i.sstatic.net/ZNaNg.png Here is the code snippet: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>KTM Cart</title> ...

Customizing Bootstrap CSS styles using CSS: A step-by-step guide

I am encountering an issue with the navbar in my Bootstrap project. Despite having specified the background color to be aqua in my boot.css file, it is not overriding the default dark color set in the Bootstrap CSS. To customize the styling of the navbar ...

What is the best way to adjust the width of a column to perfectly fit its contents when using IE9 compatibility mode?

Within my HTML code, I've included the table displayed below. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <style type="text/css"> table, td, tr, th{ border:1px; } .onepx{ ...

Arranging buttons that are generated dynamically in a vertical alignment

Currently, I am in the process of creating a webpage for various items, and everything is going well so far. However, I have encountered an issue while attempting to vertically align the buttons that I am generating using JavaScript within the document. I ...

Modifying element size using jQuery causes issues with maintaining a 100% height

I am facing an issue with a sidebar that is styled using the following css properties: background:#164272; position:absolute; left:0px; top:70px; width:250px; height:100%; When I use jQuery to display a table that is initially hidden and on ...

MUI component with a stylish gradient border

I'm struggling to locate the alternative for the border-image-source in CSS My objective is to create a button component with a gradient border ...

Tips for changing the text color to stand out from the color of the input field

My input field undergoes color changes depending on whether it's in dark mode or light mode. However, I'm struggling to maintain a distinct color for the input field border and text. The client prefers a very light border for the input field but ...

How do I build a camera that can scan and interpret numerical sequences using react-native?

Looking for a library that can read a sequence of numbers, such as 123456789 on a piece of paper. I am specifically interested in extracting only the first 3 digits using a camera, but have struggled to find a suitable library for this task. I attempted ...

Why does my Bootstrap 4 grid column seem to be devouring the rest of the columns?

Currently, I am delving into the world of Bootstrap 4 grid. My focus right now is experimenting with creating responsive boxes that adjust based on window size changes. In my design, these are how the boxes should respond: Large: Box 1, Box 2, Box 3, Box ...

Issues arise when attempting to smoothly scroll to an anchor point in a webpage

While working on my website, I have encountered a challenge. The issue arises when dealing with multiple div items. Upon scrolling slightly, the entire page focuses on the div with a height of 100vh, which works perfectly fine. However, my attempts to ...

The header appears distorted on older versions of Internet Explorer, specifically IE 7 and IE

The website I am currently working on looks great in Chrome, Firefox, Opera, and Safari on both Mac and Windows. However, it is not displaying correctly in IE 7 & 8. The header should appear like this: But in Internet Explorer, it's showing up like t ...

What is the best way to center a Bootstrap login form within the viewport?

Struggling to get the login view centered on the screen, no matter what I try. As a newcomer to Bootstrap and coding, it's proving to be a challenge. Attempts to use align items center and justify haven't yielded the desired result. <h2 style ...

Animate failed due to the appending and adding of class

$('#clickMe').click(function() { $('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('fadeIn'); }); <link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/> <script ...

What is the best way to ensure email address validation is done perfectly every time?

Can someone assist me with validating email addresses correctly? I am able to handle empty fields, but now I need a way to identify and display an error message for invalid email addresses. How can I modify my validation process to check for improper email ...

Retrieving an image from a JSON file based on its corresponding URL

I am trying to extract the URL and display it as an image: This is how it appears in JSON: https://i.sstatic.net/vpxPK.png This is my HTML code: <ul> <li *ngFor="let product of store.Products"> <p>Product Image: {{ product.Pr ...

What causes jquery-ui resizable to set the width of the div with the "alsoResize" property?

I have created a series of divs structured like this: <div id="body_container"> <div id="top_body"> </div> <div id="bottom_body"> </div> </div> Additionally, I have implemented the following funct ...

Styles in NEXT.js are not loading properly due to issues with the Module

I have been attempting to apply module.css to one of my components by following the instructions provided in this tutorial https://nextjs.org/learn/basics/assets-metadata-css/layout-component. /*/components/Livestream/App.js*/ import styles from './A ...

Unable to generate a menu with bootstrap

Hey there, I've been experimenting with creating a responsive menu using Bootstrap, but I'm struggling with the implementation. My vision is to have a logo on the left side and a menu on the right side. Below is the concept for my menu design. ...

Instructions on creating an "already clicked" style for an <a> href

Is there a solution to display my href as already clicked? I'm looking for a property or method that does not involve css or javascript. ...

Ensure the item chosen is displayed on a single line, not two

I've encountered an issue with my select menu. When I click on it, the options are displayed in a single line. However, upon selecting an item, it appears on two lines - one for the text and another for the icon. How can I ensure that the selection re ...