Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

react-native-viewpager issue on iOS while deleting the last item in array/view

$
0
0

I am able to delete the last view/item from viewPager on android and it would switch the view to the previous screen. But the same thing doesn't work in iOS. On iOS it would delete the last view but wouldn't switch and shows a blank page, but when you scroll old view renders again.

ViewPages.js

import React, { useState, useEffect } from "react";import { Image, ScrollView } from "react-native";import {  Container,  View,  Button,  Text,  Left,  Right,  Content,  Icon,  Header,  Fab} from "native-base";import { useTemplateState } from "../../../contexts/TemplateContext";import {  useScreenTypeState,  useScreenTypeUpdate} from "../../../contexts/ScreenTypeContext";import CardView from "./CardView";import ViewPager from "@react-native-community/viewpager";export const ScreenTypeSelection = ({ route }) => {  let { screenCount } = useTemplateState();  let dispatch = useScreenTypeUpdate();  let value = useScreenTypeState();  const [active, setActive] = useState(false);  useEffect(() => {    dispatch({ type: "screen", payload: { screenCount } });  }, []);  const [currentIndex, setCurrentIndex] = useState(0);  const [currentPage, setCurrentPage] = useState(0);  return (<ScrollView contentContainerStyle={{ flex: 1 }}><ViewPager        style={{ flex: 1 }}        initialPage={currentPage}        onPageSelected={e => setCurrentIndex(e.nativeEvent.position)}        showPageIndicator={true}>        {value.length > 0 &&          value.map((card, index) => {            return (<View style={{ alignItems: "center" }} key={index}><CardView key={card.pageNumber} card={card} /></View>            );          })}</ViewPager><Fab        active={active}        direction="up"        containerStyle={{}}        style={{ backgroundColor: "#5067FF" }}        position="bottomRight"        onPress={() => setActive(!active)}><Icon name="create" /><Button          style={{ backgroundColor: "#3B5998" }}          onPress={() => {            dispatch({              type: "delete_page",              payload: { currentIndex }            });            setCurrentPage(currentIndex - 1 < 0 ? 0 : currentIndex - 1);          }}><Icon name="remove" /></Button><Button          style={{ backgroundColor: "#34A34F" }}          onPress={() => {            dispatch({              type: "add_page",              payload: { currentIndex }            });            setCurrentPage(currentIndex + 1 )          }}><Icon name="add" /></Button></Fab></ScrollView>  );};

package: @react-native-community/react-native-viewpager

Github: https://github.com/react-native-community/react-native-viewpager

After doing some research found that it is an open issue on GitHub

Is there any solution to it or any workaround that helps to reflect the same functionality on iOS as well?

I know there are other third-party packages available as well, but I would like to see if I can do it using react-native core modules.

If there is any more detail needed, let me know.


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>