React-native-gesture-handler: एक मोडल में काम नहीं करता है

+1
कोई काम?

मैं अभी के लिए मोडल का उपयोग नहीं करता, मैं बस इसे पूर्ण स्थिति में एक दृश्य के साथ फिर से बनाता हूं

अब के लिए मोडल स्क्रीन का उपयोग करना, गॉगलिंग के बाद और RN से मोडल चैट करना बहुत छोटी बात है

+1

हाय, @martinezguillaume , @mordaha , @csto
मैंने इस मुद्दे पर एक नज़र डाली और मुझे लगता है कि यह हमारी लाइब्रेरी की बात नहीं है, बल्कि आरएन कोर की है।

@osdnk यह

+1 इशारा मोडल पर काम नहीं करता है

मैं भी आज इस बग में भाग गया।

समान समस्या। एंड्रॉइड पर जेस्चर मोडल पर काम नहीं करता
उदाहरण के लिए एक्सपो

मेरे लिए भी वैसा ही। परीक्षण किए गए प्रतिक्रिया-मूल के PanResponder संचालकों पर मोडल - ठीक काम करता है।

मेरे पास इसके बारे में एक विचार है: जब हम इस लाइब्रेरी को एंड्रॉइड प्रोजेक्ट से जोड़ रहे हैं, तो हम अगला कदम उठा रहे हैं

<strong i="7">@Override</strong>
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }

और हम जानते हैं कि मोडल अलग पैकेज है। इसके साथ कुछ करने के लिए समझदारी हो सकती है?

मैं एक मानक React Native Modal का उपयोग कर रहा था और इस समस्या का सामना कर रहा था।
मैंने एक नई स्क्रीन बनाकर और इसे एक मोडल के रूप में प्रदर्शित करके समस्या के आसपास काम किया। मैं प्रतिक्रिया-मूल-नेविगेशन का उपयोग कर रहा हूं, इसलिए:

Navigation.showModal({
    component: {
      name: navRoutes.ImageModal,
      passProps: { image },
    },
  })

इशारों को आईओएस और एंड्रॉइड दोनों पर अपेक्षित रूप से काम कर रहा है, और मुझे अभी भी पारदर्शी पृष्ठभूमि मिलती है जो मैं अपने मूल मोडल से चाहता था।

मैंने थोड़ी देर के लिए उसमें खोदा है।

1. यह RNGH की समस्या है। क्षमा करें 😒
2. ऐसा होता है कि आरसी रूट दृश्य के नीचे बीसी मोडल प्रदान नहीं किए जाते हैं।
3. यह मॉडल्स के तंत्र को एक समान तरीके से बदलकर ठीक करता है जैसा कि हम कुछ अतिरिक्त तर्क के साथ लपेटकर RNRootView के साथ करते हैं। देखें https://github.com/kmagiera/react-native-gesture-handler/blob/master/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.java
4. मेरे पास अब इसे करने का कोई समय नहीं है, यह समय लेने वाला काम है और शायद एंड्रॉइड के मूल में आरएनजीएच कोर में कुछ कोड को कॉपी करने की आवश्यकता है।

अगर कोई चाहता है और उसके पास करने का समय है, तो मैं खुशी से इसकी समीक्षा करूंगा और तुरंत विलय कर दूंगा यदि यह काम करने योग्य होगा और बहुत अधिक हैक नहीं होगा।

@martinezguillaume @mordaha @csto @ mars-lan @ParhamZare @ewendel @ वाया-लाभ @Dmitrylolo @LaVielle

इसके अलावा, मैंने दो महीने पहले एक कोशिश की है।

https://github.com/kmagiera/react-native-gesture-handler/commit/139da18039683bed3c439c991c7eaf802086bf86

शायद यह किसी के लिए एक प्रेरणा हो सकती है

अरे @osdnk मुझे अपने ऐप के लिए इस सुविधा की आवश्यकता है, इसलिए मैं सोच रहा था कि मैं इसे आज़मा सकता हूं, लेकिन मुझे RNGestureHandler, या Android के साथ बहुत अनुभव नहीं है। क्या आप मुझे कुछ और जानकारी दे सकते हैं कि मुझे इसे काम करने के लिए क्या करना होगा?
इसके अलावा, मैं आपके पिछले प्रयास को देख रहा था, और मैं यह जानना चाहूंगा कि इसे समाप्त करने के लिए क्या गायब है, और यदि इसे एक प्रारंभिक बिंदु के रूप में इस्तेमाल किया जा सकता है।

वही त्रुटि।

@kmagiera @osdnk इस पर कोई अपडेट?
यहां तक ​​कि Touchable* मोडल के अंदर काम नहीं करते हैं और यह निराशाजनक है

+1। मैं मोडल के साथ reanimated-bottom-sheet का उपयोग करता हूं

कोई सुधार? या शायद, कोई अन्य मोडल घटक जो इस मुद्दे से ग्रस्त नहीं है? RN का मोडल ईमानदारी से काफी खराब काम करता है और यह बग्स से भरा होता है (जैसे अगर अलर्ट के साथ जोड़ दिया जाए)

@ क्रिश्चियनोकाज़िन्सप I ने https://github.com/react-native-community/react-native-modal

अजीब। यह घटक अभिक्रिया के तौर-तरीकों का आंतरिक रूप से उपयोग करने वाला है। ने करदी
आपको फर्क पड़ता है?

एल जु।, 30 डे मेयो डे 2019 14:38, मंगल लैन सूचनाएं @github.com
अनुलेख:

@cristianoccazinsp https://github.com/cristianoccazinsp मैं समाप्त हुआ
https://github.com/react-native-community/react-native-modal का उपयोग करना

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का उत्तर सीधे दें, इसे GitHub पर देखें
https://github.com/kmagiera/react-native-gesture-handler/issues/139?email_source=notifications&email_token=ALU263ACF3LNSRSPFWR45ELPYAGJTA5CNFSM4EZ6UZL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWS7SOQ#issuecomment-497416506 ,
या धागा म्यूट करें
https://github.com/notifications/unsubscribe-auth/ALU263GRH2KHBXUZBGHNKA3PYAGJTANCNFSM4EZ6UZLQ
।

@ क्रिस्टियानोकाज़िन्सप केवल स्क्रीन को कवर करने के लिए आरएन के मोडल का उपयोग करता है, जिसे coverScreen से false सेट करके अक्षम किया जा सकता है

@ क्रिस्टियानोकाज़िन्सप केवल स्क्रीन को कवर करने के लिए आरएन के मोडल का उपयोग करता है, जिसे coverScreen से false सेट करके अक्षम किया जा सकता है

लेकिन क्या इस प्रोप के साथ फुलस्क्रीन मोडल दिखाने का कोई तरीका है जो ऐप के रूट कंपोनेंट में रेंडर नहीं है?

@jvaclavik मैंने इसे https://github.com/callstack/react-native-paper के साथ संयोजन में उपयोग किया, जिसमें इस उद्देश्य के लिए विशेष रूप से डिज़ाइन किया गया पोर्टल नामक एक घटक है।

यह सभी उपयोग के मामलों को हल नहीं कर सकता है, लेकिन जब propagateSwipe ।

यह समस्या https://github.com/kmagiera/react-native-screens/issues/61 से संबंधित प्रतीत होती है

एंड्रॉयड में देशी स्क्रीन का उपयोग न करें। परीक्षण और 'reanimated-bottom-sheet' के साथ ठीक काम

अगर (Platform.OS === 'ios') {
useScreens ();
}

पारदर्शी बीजी के लिए यह रिएक्ट नेविगेशन मोडल कॉन्फिग है

स्क्रीनऑन: {
स्क्रीन:
नेविगेशन: {
इशारे सक्षम: गलत
},
}
{{
मोड: 'मोडल',
पारदर्शी कार्ड: सच,
शीर्ष लेख: 'कोई नहीं',
कार्ड स्टाइल: {
पृष्ठभूमि रंग: 'पारदर्शी',
अपारदर्शिता: १
},
ट्रांस्फोन्फिग: () => ({
कंटेनर शैली: {
पृष्ठभूमि रंग: 'पारदर्शी',
}
})
}

@osdnk ने इसे ठीक किया?

यह एक बहुत दर्द था।
मैंने इसे Google में हल करने से पहले कुछ समय बिताया है, अपने बालों को बाहर निकालने की कोशिश कर रहा हूं कि पृथ्वी पर एक ही घटक iOS और एंड्रॉइड पर क्यों काम करता है, लेकिन केवल कुछ स्थानों पर आवेदन के अंदर

हमारे पास एक ही मुद्दा है - यह मोडल पर काम नहीं करता है।
मुझे आश्चर्य है कि अगर कोई इस पर काम कर रहा है या किसी भी स्थिति अद्यतन का पता है?
क्या हमें इस लाइब्रेरी को छोड़ने और RN पैन हैंडलर पर स्विच करने की आवश्यकता है?
कोई भी सुझाव है ?

https://github.com/react-native-community/react-native-modal भी काम नहीं करता है

मुझे भी। RectButton https://github.com/react-native-community/react-native-modal के अंदर काम नहीं करता है

@deflorilemarului @ kesha-antonov @fauker
आप कुछ समय के लिए छोड़ करूंगा, और न Modal , और न ही Modal आधारित संकुल (अगर वे देशी निर्भरता लिंक करने के लिए की आवश्यकता नहीं है - वे पर आधारित होते हैं react-native के Modal ) आपकी मदद करेंगे (मैंने मूल रूप से उन सभी की कोशिश की है)।
सभी gesture- संबंधित घटकों (हमारे लिए बॉटमशीट-व्यवहार) किसी भी छू / स्वाइप आदि को पंजीकृत नहीं करेंगे, जब Android पर <Modal>...</Modal> गया हो;
वहाँ 3 समाधान मैं के बारे में सोच सकते हैं:

1. यदि आप मॉडल्स का उपयोग कर रहे हैं तो किसी अन्य पुस्तकालय का उपयोग करें। आपको PanResponder कुछ स्वाइप-आधारित घटकों को फिर से लिखने की आवश्यकता हो सकती है; यह दर्द है, लेकिन बहुत सीधा है;
2. ऐसे मोडल्स का उपयोग करें जो portals । वे वास्तव में पोर्टल्स नहीं हैं और न ही मोडल्स- पोर्टल्स प्रतिक्रिया-मूल द्वारा समर्थित नहीं हैं, क्योंकि एकल अनुप्रयोग होस्ट है - लेकिन वे होस्ट कंपोनेंट को कहीं न कहीं आपके आवेदन पर काम कर रहे हैं और ऐप स्टैक के ऊपर पूर्ण दृश्य में मोडल सामग्री को रेंडर करते हैं; यह एक समाधान काम कर रहा है, लेकिन आप संदर्भ प्रदाताओं के ऊपर दिए गए बच्चों के कारण useContext() कॉल को ढीला कर देंगे; हमारे लिए काम नहीं करता है, क्योंकि navigation संदर्भ खो गया है;
3. नेविगेशन लाइब्रेरी द्वारा प्रदान किए गए मॉडल का उपयोग करें ( react-navigation ); यह एक काम करता है, लेकिन एपीआई है ... अच्छा नहीं है - एक के लिए आप एक सिंगल स्क्रीन को मोडल नहीं बना सकते हैं, केवल एक स्टैक मोडल मोड में हो सकता है; यह एक समाधान है जिसके साथ मैं छड़ी करता हूं।

खैर, अंतिम समाधान है - पैच देशी एंड्रॉइड कार्यान्वयन (यदि आप एक्सपो का उपयोग कर रहे हैं तो संभव नहीं है) या किसी लाइब्रेरी में पैच का इंतजार करें और तब तक प्रतीक्षा करें जब तक कि यह एक्सपो में विलय न हो जाए।

पी एस
मुझे गलत मत समझो, यह पुस्तकालय अद्भुत है, और मैं इस बात पर जोर नहीं दे सकता कि इसमें काम करने की कितनी सराहना करता हूं और अंत उपयोगकर्ता के लिए कितना बेहतर अनुभव है, लेकिन इस तरह के कीड़े मुझे अपने बालों को बाहर निकालना चाहते हैं।

कुछ पुस्तकालयों के लिए हमें मूल संदर्भ से निपटने की आवश्यकता है, यदि हां:

Android के लिए, हमें RNGH दस्तावेज़ में गई एक विशेष देखभाल की आवश्यकता होगी:

अपनी MainActivity.java फ़ाइल अपडेट करें

आशा करता हूँ की ये काम करेगा

कुछ पुस्तकालयों के लिए हमें मूल संदर्भ से निपटने की आवश्यकता है, यदि हां:

Android के लिए, हमें RNGH दस्तावेज़ में गई एक विशेष देखभाल की आवश्यकता होगी:

अपनी MainActivity.java फ़ाइल अपडेट करें

आशा करता हूँ की ये काम करेगा

हां, यह मेरे लिए पूरी तरह से काम करता है। मैं लगभग अपने एंड्रॉइड ऐप को स्वाइप करने के समाधान की तलाश में निराश हो गया।

अभी भी काम नहीं कर रहा है
अगर सब कुछ ठीक काम देखने के लिए मोडल बदलें ...

हाय @romanonthego ,

खैर, अंतिम समाधान है - पैच देशी एंड्रॉइड कार्यान्वयन (यदि आप एक्सपो का उपयोग कर रहे हैं तो संभव नहीं है) या किसी लाइब्रेरी में पैच का इंतजार करें और तब तक प्रतीक्षा करें जब तक कि यह एक्सपो में विलय न हो जाए।

क्या आप मुझे बता सकते हैं कि मेरे मूल Android कोड को किस पक्ष में पैच करना है?

whop https://github.com/software-mansion/react-native-gesture-handler/pull/937

@osdnk यह रोमांचक है। क्या यह DialogFragment साथ भी काम करेगा?

# 937 की कोशिश के बाद मुझे पता चला कि यह मेरे लिए काम नहीं करता है ...

शायद यह इसलिए है क्योंकि मैं wix के प्रतिक्रिया-मूल-नेविगेशन का उपयोग कर रहा हूं? जहां तक ​​मुझे पता है कि हर स्क्रीन जेस्चरहैंडलररूटएचओसी के साथ पंजीकृत है (लाइब्रेरी पूरी तरह से सामान्य, गैर मोडल विचारों के साथ काम करती है)।

यह स्क्रीन का एक टुकड़ा है जिसमें मैंने एक मोडल में रेक्टबटन की कोशिश की (मूल रूप से यह डॉक्यूमेंट में है)

  renderSearchScreen = () => {
    const { showSearchHistory } = this.state;
    const ExampleWithHoc = gestureHandlerRootHOC(() => {
      return (
        <View style={genericStyles.container}>
          <SearchScreen
            searchBar={{
              ...this.searchBar,
              searchQuery: this.props.searchQuery,
            }}
            onBackPress={() => {
              this.setState({ showSearchHistory: false });
            }}
          />
        </View>
      );
    });

    if (showSearchHistory) {
      return (
        <RNModal
          animationType="fade"
          transparent
          visible={this.state.showSearchHistory}
          onRequestClose={() => {}}>
          <ExampleWithHoc />
        </RNModal>
      );
    }

    return null;
  };

जब यह माना जाता है, तो मोडल लोड होता है, लेकिन रेक्टबटन ऑनस्पैन ईवेंट को फायर नहीं करता है। मैंने एक नए एप्लिकेशन के साथ एक न्यूनतम प्रजनन योग्य डेमो बनाने की कोशिश की, लेकिन फिर मैं # 848 # 676 # 835 (एक दूसरे के संभावित डुप्लिकेट) में भाग गया।

कोड़ा # 937

वह आश्चर्यजनक है! यह अभी भी मेरे लिए react-native-modal के साथ काम नहीं करता है, हालांकि!

_ // संपादित करें: वास्तव में, डिफ़ॉल्ट मोडल या तो काम नहीं करता है, लेकिन यह 1.6.0 से शुरू होना चाहिए,

मैंने लगभग थोड़ा खेला है और इस मुद्दे को खोजने में सक्षम था। हालांकि, मुझे यकीन नहीं है कि यह क्या कारण है और इसे कैसे ठीक किया जाए।

मेरे मामले में समस्या यह है, कि मैं react-native-gesture-handler @react-navigation/stack अंदर काम नहीं करूँगा, अगर इसे एक मोडल के अंदर रखा जाए (तो मूल रूप से Stack.Navigator > SomeScreenComponent > Modal > gestureHandlerRootHOC(PanGestureHandler) विफल)।

अगर मैं स्टैक नेविगेटर को काटता हूं या इसके बजाय टैब नेविगेटर का उपयोग करता हूं, तो यह एक आकर्षण की तरह काम करता है, इसलिए मुझे पूरा यकीन है कि यह स्टैक नेविगेटर की गलती है।

प्रासंगिक पैकेज संस्करण:

[email protected]
@react-navigation/[email protected]
@react-navigation/[email protected]

मैं एक डेमो रेपो ASAP सेटअप करने की कोशिश करूँगा, मुझे बताएं कि क्या मैं कोई और उपयोगी जानकारी प्रदान कर सकता हूं।

यहाँ एक डेमो ऐप है ( npx react-native init से लगभग खाली), जो समस्या को दिखाएगा। आप ऐप के अंदर स्टैक नेविगेटर को टॉगल कर सकते हैं और देख सकते हैं कि PanGestureHandler कार्यात्मक और अनौपचारिक कैसे हो जाता है।

https://github.com/mxmzb/react-native-breakable-app

मेरा भी वही मुद्दा है। ऐसा लगता है कि Stack.Navigator Android पर अच्छा काम नहीं करता है। इससे कोई फर्क नहीं पड़ता कि मैं एक मोड = "मोडल" या "कार्ड" का उपयोग करता हूं।

तो मैं आसपास खेल रहा था और निम्नलिखित कोड था

import { SafeAreaView, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'

import { enableScreens } from 'react-native-screens';
enableScreens(); // <-- this fucked it up

const Screen1 = ({ navigation }) => {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Button title="Open Modal" onPress={() => navigation.push('Modal')} />
      </SafeAreaView>
    )
  }

  const Screen2 = ({ navigation }) => {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Button title="Close Modal" onPress={() => navigation.goBack()} />
      </SafeAreaView>
    )
  }

const App = () => {

return (
        <NavigationContainer>
          <Stack.Navigator headerMode="none">
            <Stack.Screen name="Main" component={Screen1} />
            <Stack.Screen name="Modal" component={Screen2} />
          </Stack.Navigator>
        </NavigationContainer>
  )

}

फिर मैंने यह लाइन हटा दी;
enableScreens();

और फिर इसने एंड्रॉइड पर सही तरीके से काम किया।

मोडल के अंदर इसे हल करने की एक छोटी सी तरकीब:

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

मैं इसी तरह के मुद्दे पर चल रहा हूं। चारों ओर कोई काम?

मैं एक मॉडल के अंदर https://github.com/osdnk/react-native-reanimated-bottom-sheet का उपयोग करने की कोशिश कर रहा था, और यह संभव नहीं है, मैंने आखिरकार प्रतिक्रिया-नेविगेशन स्क्रीन एनीमेशन के साथ हल किया:

https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/143#issuecomment -614300015

मोडल के अंदर इसे हल करने की एक छोटी सी तरकीब:

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

अरे @ गिडयूम । मुझे आश्चर्य है कि आपकी टिप्पणी यहाँ कैसे ध्यान नहीं गई। यह निश्चित रूप से चाल है। धन्यवाद दोस्त!

यहाँ एक डेमो ऐप है ( npx react-native init से लगभग खाली), जो समस्या को दिखाएगा। आप ऐप के अंदर स्टैक नेविगेटर को टॉगल कर सकते हैं और देख सकते हैं कि PanGestureHandler कार्यात्मक और अनौपचारिक कैसे हो जाता है।

https://github.com/mxmzb/react-native-breakable-app

फिर, क्या उपाय है?

मुझे अब भी वही समस्या हो रही है ...।
कोई भी समाधान अभी तक कुछ भी नहीं है?

यह अभी भी 1.6.0 पर एक समस्या है

ऊपर वर्णित हर सुझाव की कोशिश की, लेकिन अभी भी कोई भाग्य नहीं है। कृपया इसकी वास्तव में निराशाजनक मदद करें।
0.62.2 में मेरी प्रतिक्रिया देशी संस्करण दोनों के साथ / प्रतिक्रिया-देशी-इशारा-हैंडलर 1.5.6 और 1.6.0 की कोशिश की।

अभी भी ^1.7.0 पर एक मुद्दा है

अभी भी काम नहीं कर रहा है: -1:

हम wix-नेविगेशन का उपयोग करते हैं। शायद कुछ संबंधित है?

ठीक है, मुझे एक संभव समाधान मिला, यह वही है जो हम चाहते हैं और आईओएस और एंड्रॉइड दोनों के लिए काम करते हैं।

https://www.youtube.com/watch?v=tLQjGHDiRkM

@steniowagner कस्टम मोडल की तरह है? मैं इसकी सिफारिश नहीं करूंगा
बस रिएक्शन-नेवीगेशन या देशी-स्टैक मोडल के साथ जाएं, यह ठीक काम करता है।

हम्म, प्रतिक्रिया-नेवीगेशन के साथ परीक्षण नहीं किया (मेरे मामले के लिए बहुत ज्यादा लग रहा था), लेकिन शायद यह इस समय सबसे अच्छा तरीका है।

शुक्रिया @ ए-ईद!

डॉक्स के अनुसार
https://docs.swmansion.com/react-native-gesture-handler/docs/#usage -with-modals-on-android

लेकिन फिर भी मेरे लिए काम नहीं किया।

@gideaoms जो चालें बटन के लिए काम कर सकती हैं लेकिन मेरा उपयोग मामला मॉडल के अंदर PinchGestureHandler का उपयोग करना है।

मोडल के अंदर इसे हल करने की एक छोटी सी तरकीब:

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

यह मुद्दा 2 साल से अधिक पुराना है, क्या इसे ठीक करने की कोई योजना है?

मैंने अपने ऐप के लिए कस्टम स्लाइडर घटक बनाए हैं और एंड्रॉइड पर उनका उपयोग नहीं कर सकता, क्योंकि मेरे ऐप में बहुत सारे विचार मॉडल हैं

मैंने gestureHandlerRootHoC में प्रत्येक स्क्रीन और मोडल घटक को लपेटा है (wix / प्रतिक्रिया-मूल-नेविगेशन का उपयोग करके)

मैंने स्क्रीन और घटक दोनों को सफलता के बिना gestureHandlerRootHoc साथ लपेटने की कोशिश की है। मैंने मॉडल पर स्वाइप-डाउन-टू-आउट बर्खास्तगी को लागू करने के लिए RectButton दृष्टिकोण की कोशिश नहीं की क्योंकि मुझे PanGestureHandler है। यह निराशाजनक है क्योंकि यह पूरी तरह से iOS पर काम करता है और जब से मैं react-native-modal का उपयोग कर रहा हूं, जो वास्तव में स्वाइप-टू-आउट आउट-ऑफ-द-बॉक्स के साथ आता है, मैंने इसके बजाय उस दृष्टिकोण का उपयोग करने की कोशिश की है और यह तब तक काम करता है जब तक कि आपके पास मोडल के अंदर स्क्रॉल करने योग्य सामग्री न हो क्योंकि तब यह आईओएस और एंड्रॉइड दोनों पर छोटी गाड़ी है, इसलिए मैं अटक गया हूं ...

सारांश में:

1. ❌ RNGH react-native <Modal> घटक में काम नहीं करता (भले ही घटक gestureHandlerRootHOC में लिपटे हो)
2. ✅ RNGH wix/react-native-navigation स्क्रीन से काम करता है जो Navigation.showModal (भले ही स्क्रीन gestureHandlerRootHOC में लिपटी हो) का उपयोग करके दिखाया गया है
3. ✅ RNGH जाहिरा तौर पर react-navigation modal: true साथ enableScreens() / createNativeStackNavigator() ) का उपयोग नहीं किया जाता है।

यदि आवश्यक हो तो मैं अधिक विवरण प्रदान कर सकता हूं।

प्रतिक्रिया-देशी-मोडल-एनिमेटेड प्रतिक्रिया-देशी-जेस्चर-हैंडलर के साथ काम करता है, क्योंकि प्रतिक्रिया-मूल-मोडल-एनिमेटेड केवल एक दृश्य का उपयोग करके एक मॉडल का निर्माण करता है।

@flyskywhy अगर प्रतिक्रिया देशी मोडल एनिमेटेड की तरह एक अलग गतिविधि का उपयोग नहीं करता प्रतिक्रिया देशी मोडल यह तो कैसे सब कुछ के शीर्ष पर प्रस्तुत करना है? अगर यह एक निरपेक्ष स्थिति का उपयोग कर रहा है तो यह कुछ मामलों में एक समस्या बना सकता है।

@ waheedakhtar694 , यह निरपेक्ष का उपयोग कर रहा है। कम से कम मेरे मामले में, कोई समस्या नहीं: अटक_ट_टॉन्ग_क्लोस्ड_येज़:

@jvaclavik मैंने इसे https://github.com/callstack/react-native-paper के साथ संयोजन में उपयोग किया, जिसमें इस उद्देश्य के लिए विशेष रूप से डिज़ाइन किया गया पोर्टल नामक एक घटक है।

@Jvaclavik के अनुसार प्रतिक्रिया-मूल-पत्र से पोर्टल का उपयोग करके हल किया गया।
मैंने अपने ऐप को पेपरप्रॉइडर के साथ मॉडल्स को इशारेहैंडलररूटहॉक और पोर्टल के साथ उन्हें लपेट दिया
अब नीचे-शीट एंड्रॉइड 😍 पर काम करती है

_EDIT: किसी कारणवश पैन जेस्चर काम कर रहे हैं, लेकिन ऑनएप इवेंट्स काम नहीं कर रहे हैं (लेकिन रिपल दिखाया गया है) ...
EDIT 2: यह मेरे द्वारा इस्तेमाल की जाने वाली लाइब्रेरी के साथ एक समस्या थी, मैंने इसे "प्रतिक्रिया-मूलक" से "प्रतिक्रिया-देशी-हावभाव-हैंडलर" _ में बदलने योग्य आयातों को तय किया।

यहाँ कुछ कोड आप आज़मा सकते हैं

/*
 App.js:
 - import { Provider as PaperProvider } from "react-native-paper";
 - wrap your App with PaperProvider
*/

// ModalFixed.js
import { Portal } from 'react-native-paper';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

const ModalFixed = (props) => {
  <View style={styles.modal}>
    <View style={styles.shadow} />
    {/* MODAL CONTENT HERE, you can put props.children to reuse this component */}
  </View>
}

const styles = StyleSheet.create({
  modal: {
    width: "100%",
    height: "100%"
  },
  shadow: {
    position: "absolute",
    width: "100%",
    height: "100%",
    backgroundColor: "rgba(0,0,0,0.3)",
  }
})

const _ModalFixed = gestureHandlerRootHOC(SheetPopup)
export default (props) => {
  return (
    <Portal>
      <_ModalFixed {...props} />
    </Portal>
  )
}

यह मेरे लिए काम कर रहा है:
<TouchableWithoutFeedback onPress={() => { console.log("press"); }} > <Text> <RectButton> ... </RectButton> </Text> </TouchableWithoutFeedback>

इस पर किसी भी अद्यतन? हमारे पास दो परियोजनाएं हैं जहां आईओएस उम्मीद के मुताबिक काम कर रहा है लेकिन एंड्रॉइड मोडल सिरदर्द साबित हो रहे हैं। हम बल्कि परियोजनाओं से तौर-तरीकों को हटाना नहीं चाहेंगे ... यह एक बड़ा डिजाइन ओवरहाल है। : /

@DavidAPears में आपने gestureHandlerRootHOC मॉडल्स लपेटने का प्रयास किया है?

कुछ इस तरह ?

const ModalInner = gestureHandlerRootHOC(function GestureExample() {
  return (
    <View>
      { RNGH components . }
    </View>
  );
});

export default function ModalForX() {
  return (
    <Modal animationType="slide" transparent={false}>
      <ModalInner />
    </Modal>
  );
}

Portal का react-native-portalize और gestureHandlerRootHOC का संयोजन मेरे लिए काम करता है। ऐसा कुछ:

<Portal>
   <Modal>
      <GestureHandlerRootHOCWrappedComponent />
   </Modal>
</Portal>

मोडल कार्यों पर कवरशरीन = {गलत} सेट करना। लेकिन मेरे मोडल को स्क्रीन की जरूरत है

आयात {प्लेटफ़ॉर्म, मोडल} react प्रतिक्रिया-मूल ’से;
'रिएक्ट-देशी-जेस्चर-हैंडलर' से {gureureHandlerRootHOC} आयात करें;
'{/AnimatedBottomSheet' से {{AnimatedBottomSheet} आयात करें;

const AnimatedBottomSheetWrapper = Platform.OS === 'android'? इशारा

यकीन नहीं होता कि यह किसी की मदद करने जा रहा है, मैंने इस लाइब्रेरी का उपयोग प्रतिक्रिया-मूल-मोडल के साथ करने के लिए भी किया था, लेकिन बगल के बच्चों के लपेटने के साथ-साथ हावेलररूटHOC (यह बटन के लिए ठीक काम कर रहा है, लेकिन मुझे मॉडल + से बचने के लिए टेक्स्ट इनपुट जारी करना चाहिए = सही और कुंजी के हर प्रेस पर, कीबोर्ड बंद हो रहा था) तो केवल एक चीज जो मैंने की है, वह है मोडल चिल्ड्रन रैपर, कुछ इस तरह:

import Modal from 'react-native-modal';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

const GestureHandlerWrapper = gestureHandlerRootHOC(
  ({ children }) => <View>{children}</View>,
  { flex: 0 }
);

export const CustomModal: React.FC<Props> = ({
  children,
...rest
}) => {
  return (
    <Modal
      {...rest}
    >
      <GestureHandlerWrapper>    
          {children} 
      </GestureHandlerWrapper>
    </Modal>
  );
};