incapaz de desplazarse en scrollView

Question

Tengo una pantalla en la que escribo en el campo de entrada y obtengo resultados de búsqueda en consecuencia. La lista se representa dentro de un ScrollView pero todavía no me permite desplazarme cuando el teclado está abierto (en Android).

¿Cómo puedo arreglar esto?

  return (
    <>
      {addressesFound.length > 0 ? (
        <ScrollView
          style={styles.searchResultsContainer}
          keyboardShouldPersistTaps={'always'}
          keyboardDismissMode={'on-drag'}>
          {addressesFound.map((addressDetails: addressDetailsType) => {
            return (
              <View
                key={addressDetails.placeName}
                style={styles.resultContainer}>
                <Text
                  style={styles.text}>
                  {addressDetails.placeName}
                </Text>
              </View>
            );
          })}
        </ScrollView>
      ) : null}
    </>
  );
};
const styles = StyleSheet.create({
  searchResultsContainer: {
    width: moderateScale(400),
    paddingHorizontal: moderateScale(50),
    paddingRight: moderateScale(65),
    marginTop: moderateScale(10),
   flex:1,
  },
  resultContainer: {
    marginTop: moderateScale(10),
    borderBottomWidth: 1,
    borderBottomColor: 'grey',
  },
  text: {
    fontSize: moderateScale(15),
  },
});

Ya intenté agregar nestedScrollEnabled = {true} pero no hace ninguna diferencia.

Aquí es donde se llama al componente mencionado anteriormente:

        <View style={styles.dropdown}>
          <LocationsFound
            addressesFound={locations.addressesFoundList} />
....
  dropdown: {
    position: 'absolute',
    top: moderateScale(215),
    zIndex: moderateScale(10),
    backgroundColor: '#fff',
    flex: 1,
  },

Intenté agregar altura: 80% a dropdown. Esto permite desplazarse un poco. Sin embargo, cuando el teclado está abierto, puedo desplazarme, pero no hasta el final. Si agrego altura: 100%, no puedo desplazarme en absoluto.

Answer 1

Hice una merienda expo para tu problema y la examiné. Creo que lo resolví. mira esto:

Este es el enlace al snack expo

Para describirlo:

Como descubrí, tu problema era que ScrollViewno cambiaba de altura en ninguna situación, ni siquiera dando más heighto dando paddingBottom.

así que envolví el ScrollViewen una Viewetiqueta y le di este estilo:

scrollViewWrapper: {
     width: '100%',
     minHeight: '100%',
     paddingBottom: 1.3*keyboardHeight
 }

En este estilo, verá el parámetro keyboardHeight, que es un stateque estoy configurando componentDidMountcon los siguientes códigos:

import {Keyboard} from 'react-native';
 
state = {
  keyboardHeight: 0,
}

componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
  'keyboardDidShow',
  this._keyboardDidShow
);
this.keyboardDidHideListener = Keyboard.addListener(
  'keyboardDidHide',
  this._keyboardDidHide
 );
}
_keyboardDidShow = (e) => {
  this.setState({
    keyboardHeight: e.endCoordinates.height,
  });
};

Debo mencionar que no se puede mover el estilo paddingBottom: 1.3*keyboardHeightfuera del componente de la clase y colocarlo en el stylesobjeto, porque keyboardHeightes un state, se puede conocer solo dentro del componente.

Te sugiero que eches un vistazo a mi código en expo snack para comprender mejor mis descripciones.

Espero que esto resuelva tu problema.

Editar para componentes funcionales

use el siguiente código para detectar la altura del teclado mientras escribe componentes funcionales:

const [keyboardHeight, setKeyboardHeight] = useState(0)
const [scrollViewVisibility, setScrollViewVisibility] = useState(false)
useEffect(() => {
  Keyboard.addListener("keyboardDidShow", _keyboardDidShow);

  // cleanup function
  return () => {
    Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
  };
}, []);
const _keyboardDidShow = (e) => {
  console.log("============in keyboardDidShow")
  setKeyboardHeight(e.endCoordinates.height)
};

También edité la merienda de la expo . puedes echarle un vistazo para ver un ejemplo de trabajo.

Answer 2

Puedo pensar en tres soluciones (puedes probar cualquiera):

1-Intente envolver la vista de desplazamiento dentro de una etiqueta de vista con flex = 1, así:

<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>

2-si no desea utilizar una vista, puede establecer ScrollView flex en 1

3 en la primera solución, puede usar una etiqueta vacía en lugar de Ver así:

<> 
</>

Answer 3

Si su problema es solo con el teclado abierto, es posible que desee echar un vistazo a KeyboardAvoidingView

¡He tenido muchos problemas con esto! Quieres probar todos los ajustes del accesorio behavior. ¡probablemente haya uno que funcione para ti!

De sus ejemplos:

import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, 
TouchableWithoutFeedback, Button, Keyboard  } from 'react-native';

const KeyboardAvoidingComponent = () => {
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS == "ios" ? "padding" : "height"}
       style={styles.container}
     >
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={styles.inner}>
           <Text style={styles.header}>Header</Text>
           <TextInput placeholder="Username" style={styles.textInput} />
           <View style={styles.btnContainer}>
             <Button title="Submit" onPress={() => null} />
           </View>
         </View>
       </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

 const styles = StyleSheet.create({
   container: {
     flex: 1
   },
   inner: {
     padding: 24,
     flex: 1,
     justifyContent: "space-around"
   },
   header: {
     fontSize: 36,
     marginBottom: 48
   },
   textInput: {
     height: 40,
     borderColor: "#000000",
     borderBottomWidth: 1,
     marginBottom: 36
   },
   btnContainer: {
     backgroundColor: "white",
     marginTop: 12
   }
 });

 export default KeyboardAvoidingComponent;

Answer 4

Creo que si el contenido de ScrollView es más pequeño que la pantalla, no se desplazará. Entonces puede intentar hacer la altura: "150%" o algo así o agregar una vista vacía con una altura para estirar su ScrollView más alto que su pantalla.

Envolviendo ScrollView en una vista con altura> la pantalla también funcionará.

Answer 5

Creo que puede solucionar este problema siguiendo los siguientes consejos: 1) Al ajustar la posición de la etiqueta ScrollView, lo más probable es que vaya por encima de su condición directamente dentro de <> </> o agregue la etiqueta de vista, por encima de la etiqueta ScrollView como

<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>

2) Ajustando la altura, la propiedad maxHeight y la propiedad flex

Si funcionó para usted, hágamelo saber