javascript - Swiper not displaying the right amount of pages -

the swiper component doesn't show right number of pages. in example below there should total of 4 pages see 2.

the first page has t1 , under t2.

the second page has t3 , t4.

i using "react-native-swiper" v1.5.4

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(         <containerview disablebackgroundbutton={true}>             <swiper                 loop={false}                 showspagination={true}                 height={global.constants.height * 0.9}>                 {testitems}                 {testitems2}             </swiper>         </containerview>)     } 

i have 2 solution you,may can you, first 1 if want array looks (your code) can try 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 (        <swiper loop={false}         showspagination={true}>            <view>              {testitems.map((value, index) => {                return(                  <view key={index}>                    {value}                  </view>                )})}            </view>            <view>              {testitems2.map((value, index) => {                return(                  <view key={index}>                    {value}                  </view>                )})}            </view>        </swiper>      );   } 

and if want somethink dynamic data, can change array :

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

and render method :

render() {    let testitems = [       {          "text" : "t1",          "text2" : "t2"       },       {          "text" : "t3",          "text2" : "t4"       }    ];    return (       <swiper loop={false}        showspagination={true}>           {testitems.map((value, index) => {             return(                <view key={index}>                   <text>{value.text}</text>                   <text>{value.text2}</text>                </view>             )})}       </swiper>    ); } 

i hope can aswer problem, let me know if have error, :)