Horizontal scroll not working for my entire app in react native

import React from 'react';
import { FlatList, View, Image } from 'react-native';

const Slider = () => {
  const images = [
    {
      source:
        'https://cdn.pixabay.com/photo/2015/10/29/14/38/web-1012467_1280.jpg',
      id: 1,
    },
    {
      source:
        'https://cdn.pixabay.com/photo/2015/08/27/09/22/banner-909710_1280.jpg',
      id: 2,
    },
    {
      source:
        'https://cdn.pixabay.com/photo/2016/03/27/18/52/flower-1283602_1280.jpg',
      id: 3,
    },
  ];

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        pagingEnabled
        horizontal={true}
        contentContainerStyle={{
          flex: 1,
          paddingTop: '5%',
        }}
        data={images}
        renderItem={({ item }) => {
          return (
            <View key={item.id} style={{ padding: 2 }}>
              <View style={{ width: '100%', height: 120 }}>
                <Image
                  source={{ uri: item.source }}
                  style={{ width: '100%', height: 120 }}
                />
              </View>
            </View>
          );
        }}
        keyExtractor={(item) => {
          return item.id.toString();
        }}
        showsHorizontalScrollIndicator={false}
      />
    </View>
  );
};

export default Slider;

Check this fixed code

export default function App() {
  const images = [
    {
      source:
        'https://cdn.pixabay.com/photo/2015/10/29/14/38/web-1012467_1280.jpg',
      id: 1,
    },
    {
      source:
        'https://cdn.pixabay.com/photo/2015/08/27/09/22/banner-909710_1280.jpg',
      id: 2,
    },
    {
      source:
        'https://cdn.pixabay.com/photo/2016/03/27/18/52/flower-1283602_1280.jpg',
      id: 3,
    },
  ];

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        pagingEnabled
        keyExtractor={(images) => {
          return images.id;
        }}
        showsHorizontalScrollIndicator={false}
        horizontal={true}
        contentContainerStyle={{ flex: 1, paddingTop: '5%' }}
        data={images}
        renderItem={({ item }) => {
          return (
            <View key={item.id} style={{ padding: 12, backgroundColor: 'red' }}>
              <View style={{ width: 100, height: 120 }}>
                <Image
                  source={{ uri: item.source }}
                  style={{ width: '100%', height: 120 }}
                />
              </View>
            </View>
          );
        }}
      />
    </View>
  );
}