skip to Main Content

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={images => {
return (
<View key={images.item.id} style={{padding: 2}}>
<View style={{width: ‘100%’, height: 120}}>
<Image
source={{uri: images.item.source}}
style={{width: ‘100%’, height: 120}}your text
/>

);
}}
keyExtractor={images => {
return images.id;
}}
showsHorizontalScrollIndicator={false}>

);
};

2

Answers


  1. Try using ScrollView

    return ( 
     <ScrollView style={{flex:1}}>
      <View style={{flex: 1}}> 
       <FlatList 
         pagingEnabled 
         horizontal
         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>
     </ScrollView>
    )
    
    Login or Signup to reply.
  2. 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>
      );
    }
    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search