Componente React Native ScrollView

El componente ScrollView es un componente nativo de reacción incorporado que sirve como un contenedor desplazable genérico, con la capacidad de desplazar componentes secundarios y vistas dentro de él. Proporciona la funcionalidad de desplazamiento en ambas direcciones: vertical y horizontal (predeterminado: vertical). Es esencial proporcionar el componente ScrollView con una altura limitada, ya que contienen elementos secundarios de altura ilimitada en un contenedor limitado.

Ventaja de usar el componente ScrollView: el uso más popular del componente ScrollView es mostrar algunos elementos de un tamaño limitado. Todos los componentes secundarios (texto, vistas, imágenes, etc.) de un componente ScrollView se representan, incluso si no están visibles actualmente en la pantalla. 

Desventaja de usar el componente ScrollView: el principal inconveniente de usar el componente ScrollView son sus problemas de rendimiento. Dado que el componente ScrollView representa todos sus componentes secundarios a la vez, genera una representación lenta y un mayor uso de la memoria.

Accesorios en ScrollView:

• StickyHeaderComponent: componente utilizado para representar encabezados fijos. Si no se proporciona, se utilizará el componente ScrollViewStickyHeader predeterminado.
• alwaysBounceHorizontal: si es verdadero, ScrollView rebota horizontalmente cuando llega al final, independientemente de si el contenido es más pequeño que ScrollView.
• alwaysBounceVertical: si es verdadero, ScrollView rebota verticalmente cuando llega al final, independientemente de si el contenido es más pequeño que ScrollView.
• automaticAdjustContentInsets: controla si iOS debe ajustar automáticamente el recuadro de contenido para las vistas de desplazamiento que se colocan detrás de una barra de navegación o una barra de pestañas/barra de herramientas.
• rebotes : si es verdadero, ScrollView rebota cuando llega al final del contenido solo cuando el contenido es más grande que ScrollView a lo largo del eje de la dirección de desplazamiento.
• bouncesZoom : si es verdadero, los gestos pueden llevar el zoom más allá del mínimo/máximo y el zoom se animará al valor mínimo/máximo al final del gesto.
• canCancelContentTouches : si es falso, una vez que comience el seguimiento, no intentará arrastrar si el toque se mueve.
• centerContent : si es verdadero, ScrollView centra automáticamente el contenido cuando el contenido es más pequeño que los límites de la vista de desplazamiento.
• contentContainerStyle : estos estilos se aplicarán al contenedor de contenido de la vista de desplazamiento que envuelve todas las vistas secundarias.
• contentInset : especifica la cantidad en la que el contenido de ScrollView se inserta desde los bordes de ScrollView.
• contentInsetAdjustmentBehavior : se usa para especificar cómo se usan las inserciones de área segura para modificar el área de contenido de ScrollView.
• contentOffset : establece manualmente el desplazamiento de desplazamiento inicial.
• decelerationRate : un número de punto flotante que determina qué tan rápido se desacelera la vista de desplazamiento después de que el usuario levanta el dedo.
• direccionalLockEnabled : ScrollView intentará bloquear solo el desplazamiento vertical u horizontal mientras se arrastra si esto se establece en verdadero.
• disabledIntervalMomentum : ScrollView se detiene en el siguiente índice si se establece en verdadero.
• disabledScrollViewPanResponder : si es verdadero, el respondedor panorámico JS predeterminado en ScrollView está deshabilitado, y el control total sobre los toques dentro de ScrollView se deja a sus componentes secundarios.
• endFillColor : a veces, una vista de desplazamiento ocupa más espacio del que llena su contenido.
• fadingEdgeLength : desvanece los bordes del contenido que se desplaza.
• horizontal : si es verdadero, los hijos de la vista de desplazamiento se organizan horizontalmente en una fila en lugar de verticalmente en una columna.
• indicadorStyle : El estilo de los indicadores de desplazamiento.
• invertStickyHeaders : esto generalmente se usa con ScrollViews invertidas. Si los encabezados adhesivos deben pegarse en la parte inferior en lugar de en la parte superior de ScrollView. 
• keyboardDismissMode : se utiliza para determinar si el teclado se descarta en respuesta a un arrastre.
• keyboardShouldPersistTaps : se usa para determinar cuándo el teclado debe permanecer visible después de un toque.
• keepVisibleContentPosition : la vista de desplazamiento ajustará la posición de desplazamiento para que el primer elemento secundario que esté actualmente visible y en o más allá de minIndexForVisible no cambie de posición si esto se establece en verdadero.
• maximumZoomScale : se utiliza para indicar la escala de zoom máxima permitida.
• minimalZoomScale : se utiliza para indicar la escala de zoom mínima permitida.
• nestedScrollEnabled : habilita el desplazamiento anidado para el nivel 21 o superior de la API de Android.
• onContentSizeChange : es una función de devolución de llamada que se llama cuando cambia la vista de contenido desplazable de ScrollView.
• onMomentumScrollBegin : es una función de devolución de llamada que se llama cuando comienza el desplazamiento de impulso.
• onMomentumScrollEnd : es una función de devolución de llamada que se llama cuando finaliza el desplazamiento de impulso.
• onScroll : se activa como máximo una vez por cuadro durante el desplazamiento.
• onScrollBeginDrag : es una función de devolución de llamada que se llama cuando el usuario comienza a arrastrar la vista de desplazamiento.
• onScrollEndDrag : es una función de devolución de llamada que se llama cuando el usuario deja de arrastrar la vista de desplazamiento y se detiene o comienza a deslizarse.
• onScrollToTop : se activa cuando la vista de desplazamiento se desplaza hacia arriba después de tocar la barra de estado.
• overScrollMode : se utiliza para anular el valor predeterminado del modo overScroll.
• pagingEnabled : esto se puede usar para la paginación horizontal. Si se establece en verdadero, la vista de desplazamiento se detiene en múltiplos del tamaño de la vista de desplazamiento al desplazarse. 
• persistenteScrollbar : hace que las barras de desplazamiento no se vuelvan transparentes cuando no están en uso.
• pinchGestureEnabled : si es verdadero, ScrollView permite el uso de gestos de pellizco para acercar y alejar.
• refreshControl : un componente RefreshControl que se usa para proporcionar la funcionalidad de extracción para actualizar para ScrollView. 
• scrollEnabled : si es falso, la vista no se puede desplazar a través de la interacción táctil.
• scrollEventThrottle: esto controla la frecuencia con la que se activará el evento de desplazamiento mientras se desplaza.
• scrollIndicatorInsets : la cantidad en la que los indicadores de la vista de desplazamiento se insertan desde los bordes de la vista de desplazamiento.
• scrollPerfTag : es la etiqueta utilizada para registrar el rendimiento de desplazamiento en esta vista de desplazamiento. 
• scrollToOverflowEnabled : si es verdadero, la vista de desplazamiento se puede desplazar mediante programación más allá del tamaño de su contenido.
• scrollsToTop : si es verdadero, la vista de desplazamiento se desplaza hacia la parte superior cuando se toca la barra de estado.
• showsHorizontalScrollIndicator : si es verdadero, muestra un indicador de desplazamiento horizontal.
• showsVerticalScrollIndicator : si es verdadero, muestra un indicador de desplazamiento vertical.
• snapToAlignment : snapToAlignment definirá la relación del ajuste con la vista de desplazamiento cuando snapToInterval se establece en verdadero.
• snapToEnd : se usa junto con snapToOffsets. El final de la lista cuenta como un desplazamiento rápido por defecto.
• snapToInterval : si se establece, hace que la vista de desplazamiento se detenga en múltiplos del valor de snapToInterval.
• snapToOffsets : si se establece, hace que la vista de desplazamiento se detenga en los desplazamientos definidos.
• snapToStart : se usa junto con snapToOffsets. El comienzo de la lista cuenta como un desplazamiento rápido por defecto.
• stickyHeaderIndices : una array de índices secundarios que determina qué elementos secundarios se acoplan a la parte superior de la pantalla al desplazarse.
• zoomScale : se utiliza para indicar la escala actual del contenido de la vista de desplazamiento.

Métodos:

• flashScrollIndicators(): este método se utiliza para mostrar los indicadores de desplazamiento momentáneamente.
• scrollTo(): ​​este método se usa para desplazarse a un desplazamiento x, y dado, ya sea inmediatamente, con una animación suave.
• scrollToEnd(): si esto es vertical, ScrollView se desplaza hacia abajo. Si es horizontal, ScrollView se desplaza hacia la derecha.
• scrollWithoutAnimationTo(): ​​en desuso, use scrollTo en su lugar.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: Ahora implementemos ScrollView. En el siguiente ejemplo, tenemos una lista desplazable de todos los elementos de muestra.

import React, { Component } from "react";
import { Text, Button, View, StyleSheet, ScrollView } from "react-native";
  
class App extends Component {
  state = {
    // Sample data
    items: [
      { item: "Item 1", price: "10", id: 1 },
      { item: "Item 2", price: "20", id: 2 },
      { item: "Item 3", price: "30", id: 3 },
      { item: "Item 4", price: "40", id: 4 },
      { item: "Item 5", price: "50", id: 5 },
      { item: "Item 6", price: "60", id: 6 },
      { item: "Item 7", price: "70", id: 7 },
      { item: "Item 8", price: "80", id: 8 },
      { item: "Item 9", price: "90", id: 9 },
      { item: "Item 10", price: "100", id: 10 },
      { item: "Item 11", price: "110", id: 11 },
      { item: "Item 12", price: "120", id: 12 },
      { item: "Item 13", price: "130", id: 13 },
      { item: "Item 14", price: "140", id: 14 },
      { item: "Item 15", price: "150", id: 15 },
    ],
  };
  render() {
    return (
      <View style={styles.screen}>
        <ScrollView> // use of ScrollView Component
          {this.state.items.map((item, index) => (
            <View key={item.id}>
              <View style={styles.summary}>
                <Text style={styles.summaryText}>
                  {item.item} <Text style={styles.amount}>
                      ${item.price}</Text>
                </Text>
                <Button title="Order" color="#FFC107" 
                      onPress={() => { }} />
              </View>
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}
  
// Screen styles
const styles = StyleSheet.create({
  screen: {
    margin: 20,
  },
  summary: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 20,
    padding: 10,
    shadowColor: "black",
    shadowOpacity: 0.26,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 8,
    elevation: 5,
    borderRadius: 10,
    backgroundColor: "white",
  },
  summaryText: {
    fontFamily: "openSansBold",
    fontSize: 18,
  },
  amount: {
    color: "#C2185B",
  },
});
  
export default App;

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. Podremos ver la lista desplazable de todos los elementos (datos ficticios) como se muestra a continuación.

Referencia: https://reactnative.dev/docs/scrollview