Swipe to next screen (infinite)

Question

I have a calendar section in my app where I want to be able to swipe right or left to go to the next or previous day.

I know that you can use createMaterialTopTabNavigator from React Navigation to do something similar, but I'm not sure if it would work in this specific scenario (where I would have an infinite number of screens and wouldn't be able to predefine them).

I also considered using react-native-gesture-handler's Swipeable component to navigate to the next/previous day screen on a left/right swipe but I'm not sure if this is the easiest/best way to approach this problem.

score 1 · Accepted Answer · answered Oct 31 '21 at 08:42

As you mentioned, you can use Tabs or Swipable. There are some other options like using <ifaram> or <WebView> and using a web URL instead of RN components but it's can be tricky and hard to manipulate.

As a simple solution, you can use carousels instead of using multi screen defining navigation. It's very simple. assume that your screens are an image in an image gallery and you can swipe left/right.

There are many libraries, one of the best ones is: react-native-snap-carousle

Take a look at it's example:

import Carousel from 'react-native-snap-carousel';
 
export class MyCarousel extends Component {
 
    _renderItem = ({item, index}) => {
        return (
            <View style={styles.slide}>
                <Text style={styles.title}>{ item.title }</Text>
            </View>
        );
    }
 
    render () {
        return (
            <Carousel
              ref={(c) => { this._carousel = c; }}
              data={this.state.entries}
              renderItem={this._renderItem}
              sliderWidth={sliderWidth}
              itemWidth={itemWidth}
            />
        );
    }
}

So you can pass a screen/page as _renderItem to the Carousel

How would this approach solve the infinite screens problem? I can't populate the data prop with all the dates on the initial render, is there some way I can use generators to achieve this? — Ken, Nov 26 '21 at 19:47
You can use FlatList to render over 10,000+ items, It uses some techniques for optimization and more. take a look at https://stackoverflow.com/a/55256341/5737950 @Ken — nima, Nov 27 '21 at 10:42

Swipe to next screen (infinite)

1 Answers1