Swiper Not Displaying The Right Amount Of Pages

The swiper component doesn't show the right number of pages. In the example below there should be a total of 4 pages but I only see 2. The first page has t1 and under t2. The secon

Solution 1:

i have 2 solution for you,may it can help you, the first one if you want your array looks like that (your code) then you can try this code :

render() {
   let testItems = [];
   testItems.push(<Text>t1</Text>)
   testItems.push(<Text>t2</Text>)
   let testItems2 = [];
   testItems2.push(<Text>t3</Text>)
   testItems2.push(<Text>t4</Text>)
   return (
       <Swiperloop={false}showsPagination={true}><View>
             {testItems.map((value, index) => {
               return(
                 <Viewkey={index}>
                   {value}
                 </View>
               )})}
           </View><View>
             {testItems2.map((value, index) => {
               return(
                 <Viewkey={index}>
                   {value}
                 </View>
               )})}
           </View></Swiper>
     );
  }

and if you want somethink like dynamic data, you can change your array to be like this :

let testItems = [
   {
     "text" : "t1",
     "text2" : "t2"
   },
   {
     "text" : "t3",
     "text2" : "t4"
   }
];

and this is for the render method :

render() {
   let testItems = [
      {
         "text" : "t1",
         "text2" : "t2"
      },
      {
         "text" : "t3",
         "text2" : "t4"
      }
   ];
   return (
      <Swiperloop={false}showsPagination={true}>
          {testItems.map((value, index) => {
            return(
               <Viewkey={index}><Text>{value.text}</Text><Text>{value.text2}</Text></View>
            )})}
      </Swiper>
   );
}

i hope this can aswer your problem, let me know if you have an error, thanks :)