I have a screen that looks like this:
export const LocationScreen: React.FunctionComponent= () => { useEffect(() => { setLocationsFound(locations.addressesFoundList); }, [locations.addressesFoundList]); useEffect(() => { setUserInputAddress('favouritePoint', ''); setLocationName(''); resetLocationsList(); }, [isFocused]); return (<SafeAreaView style={styles.safeAreaViewContainer}><View style={styles.container}><View style={styles.topTextContainer}><BackArrow handleGoBack={handleGoBack}></BackArrow><Text >Alle Lieblingsorts</Text></View><View style={styles.topMiddleContainer}><Text style={styles.topMiddleText}>Neuer Lieblingsort</Text></View><View style={styles.searchFieldContainer}><AddressSearchInput addressType="favouritePoint" placeholder="Ort eingeben" /></View><View style={Platform.OS === 'ios' ? styles.dropdown: styles.androidDropdown}><LocationsFound addressesFound={locations.addressesFoundList} chooseLocation={chooseLocation} parseGeoJsonData={parseGeoJsonData} /></View></View></SafeAreaView> );}; dropdown: { position: 'absolute', top: moderateScale(152), zIndex: moderateScale(10), backgroundColor: '#fff', flex: 1, height: '80%', },The LocationsFound component is a list like this:
export const LocationsFound: React.FunctionComponent<LocationsFoundProps> = ({ addressesFound, chooseLocation,}) => { const [keyboardHeight, setKeyboardHeight] = useState(0);useEffect(() => { Keyboard.addListener("keyboardDidShow", _keyboardDidShow); return () => { Keyboard.removeListener("keyboardDidShow", _keyboardDidShow); };}, []);const _keyboardDidShow = (e: { endCoordinates: { height: React.SetStateAction<number>; }; }) => { setKeyboardHeight(e.endCoordinates.height)}; const handleLocationSelection = (addressDetails: addressDetailsType) => { Keyboard.dismiss(); const parsedaddressDetails = parseGeoJsonData(addressDetails); chooseLocation(parsedaddressDetails); }; return (<> {addressesFound.length > 0 && (<View style={{ ...styles.scrollViewWrapper, paddingBottom: 1.3 * keyboardHeight, }}><ScrollView style={styles.searchResultsContainer} keyboardShouldPersistTaps={'always'} keyboardDismissMode={'on-drag'}> {addressesFound.map((addressDetails: addressDetailsType) => { return (<View key={addressDetails.placeName} style={styles.resultContainer}><Text> {addressDetails.placeName}</Text></View> ); })}</ScrollView></View> )}</> );};const styles = StyleSheet.create({ scrollViewWrapper: { width: '100%', minHeight: '100%', }, searchResultsContainer: { width: moderateScale(400), paddingHorizontal: moderateScale(50), paddingRight: moderateScale(65), marginTop: moderateScale(10), flex: 1, }, resultContainer: { marginTop: moderateScale(10), borderBottomWidth: 1, borderBottomColor: 'grey', },});
The first time when I visit my screen the length of the locationsList is wrong so I am unable to scroll through the list. However, when I navigate Back, and come again, the list is displayed properly and I can scroll through it too. Why doesnt it work on the first attempt and how can I fix it?