-1

i cannot make the flatlist stay away from my data entry field which is in its footer. here is my code:

import React, { useState, useEffect } from 'react';
import { View, Text, Alert , TextInput, Button, Platform, KeyboardAvoidingView,Animated,Easing} from 'react-native';
import { FlatList } from 'react-native-gesture-handler';


export function PlayAreaScreen({ route, navigation }) {

const [itemsToShow, setitemsToShow] = React.useState([{key:'0',name:"sdfsdfds"}]);

const PopulateTestData = () =>{
const DATA = [];
  for (let index = 0; index < 6; index++) {
    DATA.push({key:index.toString(), name:`index ${index}`});
  }
setitemsToShow(DATA);
console.log(itemsToShow);
}

const MyFooter = (props) =>{
const [sometext, setsometext] = React.useState('');
return(
  <View style={{borderWidth:1}}>
  <TextInput value={sometext} onChangeText={(text) => setsometext(text)} placeholder="Enter data here"></TextInput>
  </View>
)
}

React.useEffect(()=>{

  PopulateTestData();
  }, []);
return (
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "position" : "height"}>
  <FlatList
  data={itemsToShow}
  ListFooterComponent = {MyFooter}
  keyExtractor={(item) => item.key}
  renderItem={(item) => <KeyboardAvoidingView style={{height:80, borderWidth:1}}><Text>{item.item.name}</Text></KeyboardAvoidingView>}
  >

  </FlatList>
  </KeyboardAvoidingView>
)

}

basically it does not scroll the flatlist at all. it obviously works if i have just one or two items in the flatlist so it does not need to scroll to fit the keyboard.

here is a picture showing how the data entry field gets covered:

enter image description here

thanks,

Manish

Manish Shukla
  • 313
  • 1
  • 3
  • 17

1 Answers1

0

let's try KeyboardAwareScrollView from react-native-keyboard-aware-scroll-view, some info here

Jals
  • 280
  • 1
  • 15
  • i have tried that and it does not work. i tried to wrap the flatlist in that view but then i get error that "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead". i tried to wrap the footer component in the keyboardawarescrollview and it does not do anything. i think its an issue with flatlist refusing the make space so textinput can get typed data...i wonder if other people have run into similar issue. also it works fine with android. this is issue only with android. – Manish Shukla Jan 18 '21 at 08:05
  • let's refer [this issue](https://stackoverflow.com/questions/48930413/how-to-use-keyboardavoidingview-with-flatlist) – Jals Jan 18 '21 at 08:18
  • if i follow that scrollawareflatlist it works on ios but then it breaks android as android constantly keeps losing focus when i enter anything on textinput. And it was working in android without me doing any of this scroll aware stuff. i think having a text data entry after a flatlist is just not going to work in both ios and android. (esp if flatlist can be somewhat long..(just one or two full screen worth scrolling) – Manish Shukla Jan 18 '21 at 10:52