ScrollView para desplazamiento vertical y horizontal en React Native

---

import { ScrollView, View, Text, StyleSheet } from 'react-native';

export default function App() {
return (
  <ScrollView style={styles.scrollView}>
    <View style={styles.boxPink}>
      <Text>Sección 1</Text>
    </View>
    <View style={styles.boxBlue}>
      <Text>Sección 2</Text>
    </View>
    <View style={styles.boxGreen}>
      <Text>Sección 3</Text>
    </View>
  </ScrollView>
);
}

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    padding: 10,
    backgroundColor: '#f9f9f9',
  },
  boxPink: {
    height: 200,
    backgroundColor: 'pink',
    marginBottom: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  boxBlue: {
    height: 200,
    backgroundColor: 'skyblue',
    marginBottom: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  boxGreen: {
    height: 200,
    backgroundColor: 'lightgreen',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { ScrollView, View, StyleSheet } from 'react-native';

export default function HorizontalScrollExample() {
return (
  <SafeAreaProvider>
  <SafeAreaView style={styles.safeArea}>
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.container}
    >
      {COLORS.map((color, index) => (
        <View
          key={index}
          style={[styles.card, { backgroundColor: color }]}
        />
      ))}
    </ScrollView>
  </SafeAreaView>
  </SafeAreaProvider>
);
}

const COLORS = [
'red', 'blue', 'green', 'orange', 'purple', 'teal', 'gold', 'pink',
];

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center', // centra en la pantalla si hay poco contenido
  },
  container: {
    paddingHorizontal: 16,
    paddingVertical: 20,
  },
  card: {
    width: 150,
    height: 150,
    marginRight: 12,
    borderRadius: 12,
    elevation: 4, // para sombra en Android
    shadowColor: '#000', // para sombra en iOS
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
  },
});