Implementing Long Press Functionality Using React Native Gesture Handler in React Native Application

npm install react-native-gesture-handler

<p>npx react-native link react-native-gesture-handler</p>

<p>import { gesturehandlerrootview } from 'react-native-gesture-handler';<br>
import { app } from './app';</p>

<p>export default function main() {<br>
  return (<br><gesturehandlerrootview style="{{" flex:><br><app></app><br></gesturehandlerrootview><br>
  );<br>
}</p>

<p>import React, { useState } from 'react';<br>
import { Text, View, Modal, StyleSheet } from 'react-native';<br>
import { LongPressGestureHandler, State } from 'react-native-gesture-handler';</p>

<p>const CustomHeader = ({ microfrontendVersion, appInfo }) =&gt; {<br>
  const [isModalVisible, setModalVisible] = useState(false);</p>

<p>const onLongPress = (event) =&gt; {<br>
    if (event.nativeEvent.state === State.ACTIVE) {<br>
      // Show the modal with app info when long press is detected<br>
      setModalVisible(true);<br>
    }<br>
  };</p>

<p>return (<br><view><br>
      {/* LongPressGestureHandler wraps the part of the UI where long press is to be detected <em>/</em>}<br><longpressgesturehandler onhandlerstatechange="{onLongPress}" mindurationms="{800}"><br><view style="{styles.header}"><br><text style="{styles.headerTitle}">My Custom Header</text><br></view><br></longpressgesturehandler><br><br>
      {/ Modal to show the version and app info */}<br><modal>
        transparent={true}<br>
        visible={isModalVisible}<br>
        onRequestClose={() =&gt; setModalVisible(false)}<br>
      &gt;<br><view style="{styles.modalContainer}"><br><view style="{styles.modalContent}"><br><text>Microfrontend Version: {microfrontendVersion}</text><br><text>App Info: {appInfo}</text><br><text onpress="{()"> setModalVisible(false)} style={styles.closeButton}&gt;Close</text><br></view><br></view><br></modal><br></view><br>
  );<br>
};</p>

<p>const styles = StyleSheet.create({<br>
  header: {<br>
    padding: 16,<br>
    backgroundColor: '#6200EE',<br>
  },<br>
  headerTitle: {<br>
    color: 'white',<br>
    fontSize: 18,<br>
    fontWeight: 'bold',<br>
  },<br>
  modalContainer: {<br>
    flex: 1,<br>
    justifyContent: 'center',<br>
    alignItems: 'center',<br>
    backgroundColor: 'rgba(null, 0, 0, 0.5)',<br>
  },<br>
  modalContent: {<br>
    backgroundColor: 'white',<br>
    padding: 20,<br>
    borderRadius: 10,<br>
  },<br>
  closeButton: {<br>
    marginTop: 10,<br>
    color: 'blue',<br>
    textAlign: 'center',<br>
  },<br>
});</p>

<p>export default CustomHeader;</p>