Gesture Detector is not working React Native

Question

i am new to React Native. I was following a tutorial about making a bottomsheet from scratch however i have an issue with

const gesture= Gesture.Pan().onUpdate((event)=>{
        console.log(event.translationX);
    });

It isn't detecting the gesture and not showing anything in the terminal.

this the code of the screen that should render the BottomSheet component:

CongeScreen.js

import React from 'react';
import Header from '../../components/Header';    
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Host, Portal } from 'react-native-portalize';
import {
   SafeAreaView,
   StyleSheet,
   Text,
   useColorScheme,
   View,
   Image,
 TextInput,
 TouchableOpacity
 } from 'react-native';
 
 import {
   Colors,
   DebugInstructions,
   LearnMoreLinks,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
import BottomSheet from '../../components/BottomSheet'
import { Modal } from 'react-native-paper';


 const CongeScreen: () => Node = ({navigation}) => {
   return (
     <SafeAreaView style={styles.body}>
          <GestureHandlerRootView style={{ flex: 1 }}>
        
        <View style={styles.container}>
          <Header
          titre={'Mes congés'}
          />

          <View style={styles.viewEmpty}>
          <Text style={styles.textEmpty}>Vous n'avez pas encore de congés</Text>
          <Image style={{marginTop:35}}
            source={require('../../assets/calendar-xmark-solid.png')} />

          </View>
          <View styles={styles.line} />
        </View> 
        <BottomSheet />  
</GestureHandlerRootView>
     </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
   body:{ flex:1,
   backgroundColor:'#202020',
   fontFamily:'Montserrat-Regular',
   color:'#E9E9E9',
   },   
   container:{
    paddingVertical:60, 
    paddingHorizontal:20,
    },
    viewEmpty:{
      alignItems:'center'
    },
    textEmpty:{
      color:'#484848',
      fontFamily:'Montserrat-Bold',
      fontSize:16
    }
   });
 
 export default CongeScreen;

this the BottomSheet Component

BottomSheet.js

import React from 'react';
import { Dimensions,StyleSheet, Text, View } from "react-native";
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const { height:SCREEN_HEIGHT }= Dimensions.get('window');   
import { Host, Portal } from 'react-native-portalize';
import Animated from 'react-native-reanimated';

const BottomSheet =() =>{


    const gesture= Gesture.Pan().onUpdate((event)=>{
        console.log(event.translationX);
    })

    return (
<Portal>
        <GestureDetector gesture={gesture}>
    <Animated.View style={styles.bottomSheetContainer}>
    <View style={styles.line} />

        
            
            
    </Animated.View>
        </GestureDetector>
        </Portal>
    )
}

const styles=StyleSheet.create({
    bottomSheetContainer:{
        height: SCREEN_HEIGHT,
        width:'100%',
        backgroundColor:'white',
        position:'absolute',
        top:SCREEN_HEIGHT/1.5,
        borderRadius:25,

    },
    line:{
        
        height:3,
        width:50,
        backgroundColor:'grey',
        alignSelf:'center',
        marginVertical:10,
        borderRadius:2

        
}
});

export default BottomSheet;

These are my dependecies

  "dependencies": {
    "@gorhom/portal": "^1.0.14",
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "@react-navigation/stack": "^6.2.2",
    "react": "18.0.0",
    "react-native": "0.69.3",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-paper": "^4.12.4",
    "react-native-portalize": "^1.0.7",
    "react-native-reanimated": "^2.9.1",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.15.0",
    "react-native-svg": "^12.4.3",
    "react-native-vector-icons": "^9.2.0"
  }

and this babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
      'react-native-reanimated/plugin',
],
};

Thanks for answering.

Gesture Detector is not working React Native

0 Answers0