React Native Modal Gesture Handler - AndreiRadchenko/scenery GitHub Wiki

React Native Modal

React Native Modal (Example)

You can add modal window to you screen:

// ModalPreview.js
import {  Modal } from 'react-native';

export const ModalPreview = ({ modalVisible, setModalVisible, item }) => {
  const { image } = item ? item : { image: { url: '/' } };

  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={modalVisible}
      onRequestClose={() => {
        setModalVisible(!modalVisible);
      }}
    >
      <Styled.ViewContainer>
        <Styled.ControlsWrapper>
// in Posts screen:
import { ModalPreview } from '../../../../components/ModalPreview';

  return (
    <>
      <ModalPreview
        modalVisible={modalVisible}
        setModalVisible={setModalVisible}
        item={previewItem}
      />
      <Styled.PostsContainer>
        <FlatList

Image Zooming with Gesture Handler

Image Zooming with Gesture Handler (Article)

To implement gesture handler in Modal on Android you need two additional step:

  1. Wrap component with gesture handler inside Modal in <GestureHandlerRootView style={{ flex: 1 }}>

  2. Add activeOffsetX={[0, 0]} to PanGestureHandler.

import {
  PanGestureHandler,
  PinchGestureHandler,
  State,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

<Modal>
  <GestureHandlerRootView style={{ flex: 1 }}>
    <PanGestureHandler
      onGestureEvent={onPanEvent}
      ref={panRef}
      simultaneousHandlers={[pinchRef]}
      enabled={panEnabled}
      failOffsetX={[-1000, 1000]}
      shouldCancelWhenOutside
      activeOffsetX={[0, 0]}
    >
      <Animated.View>
        <PinchGestureHandler
          ref={pinchRef}
          onGestureEvent={onPinchEvent}
          simultaneousHandlers={[panRef]}
          onHandlerStateChange={handlePinchStateChange}
        >
          <Animated.Image
            source={{
              uri: image.url,
            }}
            style={{
              width: '100%',
              height: '100%',
              transform: [{ scale }, { translateX }, { translateY }],
            }}
            resizeMode="contain"
          />
        </PinchGestureHandler>
      </Animated.View>
    </PanGestureHandler>
  </GestureHandlerRootView>
  );
</Modal>;

LinkedIn | Email!

⚠️ **GitHub.com Fallback** ⚠️