carousel

Presentation

Mobile Framework provides a Carousel modal that can be accessed while tapping on photos throughout the app. It allows users to view a batch of images full-screen and interact with them via zooming and panning.

Component

The Carousel is based on the react-native-gesture-handler module, which allows to write code for precise gesture interactions. It is located at /app/src/ui/Carousel.tsx.

Usage

The Carousel is by default included within the app’s main root navigator (/app/src/navigator/RootNavigator.tsx). It is used within a modal instantiated in createStackNavigator, a function provided by the react-navigation module. We have used the following lines of code to do so:

function getMainNavigator(appsInfo: any[]) {
  const mainTabNavigator = createMainTabNavigator(getMainRoutes(appsInfo));
  const RootStack = createStackNavigator({
    mainTabNavigator,
    carouselModal: {
      screen: Carousel,
    },
  }, {
    mode: 'modal',
    headerMode: 'none',
  })
  
  return RootStack;
}

Thus, you will be able to access the Carousel modal within any component located in the app’s mainTabNavigator with this simple line of code: navigation.navigate("carouselModal", { images, startIndex })

• images is an array of objects representing each image to be viewed, an alternative title, as well as an optional link displayed beneath the image (type: Array<{ src: ImageURISource; alt: string; linkTo?: string }>)
• startIndex is the index of the image within the array to display first when the Carousel is launched (typically the one the user has tapped on)

To make things even easier, navigation towards the Carousel modal has already been implemented within the Images component (/app/src/ui/images), which means you can simply use it whenever you want to display a group of images that can be opened in the Carousel.