React native screen size changes and whole layout shrinks when keyboard pops up

Question

this is normal layout this is whats happening on keyboard pop up

---

this is the code for layout

import React, { useState, } from 'react'
import { useNavigation, } from '@react-navigation/native'


import { Text, Slider,ButtonGroup, Button, Icon } from '@rneui/themed';

import { View, Image, ScrollView, StyleSheet ,ImageBackground, Pressable,Modal, TextInput, TouchableWithoutFeedback, Keyboard,KeyboardAvoidingView} from "react-native";


import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

import Charfeatlist from '../component/Charfeatlist';






const Chargeneration = () => {
  const navigation = useNavigation();

  const [value, setValue] = useState(0);
  const [selectedIndex, setSelectedIndex] = useState(0);

  const [isEditing, setIsEditing] = useState(false);
  const [text, setText] = useState('Name');
  const [editedText, setEditedText] = useState(text);

  const handleEditPress = () => {
    setIsEditing(true);
  };

  const handleSavePress = () => {
    setText(editedText);
    setIsEditing(false);
  };



  return (

   
    <ImageBackground source={require("../assets/bg-low-opasity.png")}
    style={styles.backgroundImage}
  >

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>

      <View style={styles.overlay}>
      
      
              <View style={styles.container}>

                <View style={{ flex:1,borderWidth:2,padding:20,borderColor:'lightblue',paddingTop:25,borderRadius:8,backgroundColor:"lightgrey",alignItems:"center",justifyContent:"center"}}>  
                   
                   <Image
                      style={{flex: 4,width:300,height:400,borderRadius:10}}
                      resizeMode="contain"
                      source={require('../assets/char.png')}
                    />
                  
                    {/* Other content goes here */}
                    <View style={{flex:1,justifyContent:'center',alignItems: 'center',paddingBottom:20}}>
                    <TextInput
            placeholder="Enter text here"
            style={{ borderWidth: 1, borderColor: 'gray', margin: 10 }}
          />
         {/*       {isEditing ? (
        <TextInput
          value={editedText}
          onChangeText={setEditedText}
          autoFocus
          style = {styles.changeName}
          
        />
      ) : (
        <Pressable style= {styles.nameText} onPress={handleEditPress}><Text >{text}</Text></Pressable>
      )} */}
      
            </View>

        </View>  
      </View>
      <View style={styles.saveContainer}>
                 <Button 
                 title="Save"

                 containerStyle={{
                      marginHorizontal: 20,
                      height: 50,
                      width: 150,
                    }}
                    buttonStyle={{
                      backgroundColor: '#ff7400',
                      borderRadius: 100,
                    }}
                    titleStyle={{ fontWeight: 'bold', fontSize: 20 }}
                    loading={false}
              loadingProps={{ size: 'small', color: 'white' }} />
              </View>
             
              
       <Charfeatlist />
    
       </View>
      
     
      </TouchableWithoutFeedback>
      
    </ImageBackground>
   

  )
}

export default Chargeneration

this is the characterfeatlist ccomponent inside the above code

import React, { useState, } from 'react'
import { useNavigation } from '@react-navigation/native'


import { Text,Icon, Button, ButtonGroup, BottomSheet, ListItem } from '@rneui/themed';
import { Card } from "@rneui/base";
import { View, Image, ScrollView, StyleSheet, FlatList, TouchableOpacity, TouchableHighlight, Dimensions } from "react-native";
import Svg, { Path } from 'react-native-svg';

import featICONS from './Featicons';
import FeatStylesicons from './FeatStylesicons';
interface CardsData {
  hair: { id: string }[];
  eyes: { id: string }[];
  accesories: { id: string }[];
  cloth: { id: string }[];
}




const Charfeatlist = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [activeLink, setActiveLink] = useState(0);
  const [activeStyle,setActiveStyle] = useState('');

const [activeCardGroup, setActiveCardGroup] = useState('hair');
  
const dataToRender = FeatStylesicons[activeCardGroup];



 

  return (

    <View style={{ flex: 2}}>

      <View style={styles.contentView}>
        <View style={styles.featuresContainer}>
          <FlatList
            data={featICONS}
            
            horizontal
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item) => {
              return item.id;
            }}
            renderItem={({ item ,index}) => <TouchableOpacity style={[styles.features,index === activeLink 
              ? {borderBottomWidth: 1} 
              : {borderBottomWidth: 0}
              ]}
              onPress={() => {
                setActiveLink(index)
                setActiveCardGroup(item.feattype)
             }}>
             
              {item.icon}
            </TouchableOpacity>}
          >

          </FlatList>
        </View>
            
        <View style={styles.buttonsContainer} >
         <FlatList 
              data={dataToRender}
              keyExtractor={(item) => {
                return item.id;
              }}
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{
                
                width:'100%'
             }}
                 numColumns={4}
              renderItem={({ item, index}) => <TouchableOpacity style={[
                styles.styleOptions,
                index === activeStyle ? { borderWidth: 1 } : { borderWidth: 0 },
                (index + 1) % 4 === 0 ? { marginRight: 0 } : { marginRight: 10 },
                index >= item.length - 4 ? { marginBottom: 0 } : { marginBottom: 10 },
              ]}
              onPress={() => {
                setActiveStyle(index);
              }}>
              {item.icon} 
              </TouchableOpacity>}
          ></FlatList>
          
         
        </View>

       

       
      </View>


    </View>


  )
}

export default Charfeatlist

whats happening here is the screen layout or screen size is getting shrinked when keyboard is popping up on screen when we press on text input .how to make the keyboard appear over on top of the component not shrnk the screen size so that thekeyboard will cover the icons container and the save button probably

I have already tried keyboard avoidingview keyboardawarescrollview and none of them are working all of this is working fine on ios but only having problem with android

Answer 1

Use keyboard avoiding view to wrap the component or container, and then play with the adjustment for your keyboard's desired behaviour

For detail check the documentation https://reactnative.dev/docs/keyboardavoidingview