feat(BottomSheet): add onBackdropPress handler by kedar09 · Pull Request #3074 · react-native-elements/react-native-elements

kedar09 · 2021-06-09T16:25:36Z

What kind of change does this PR introduce?

I have added the onBackdropPress function for close bottomsheet.

Did you add tests for your changes?
Yes
If relevant, did you update the documentation?

Summary

I have used react-native-elements package and I need the onBackdropPress function for bottomsheet like in overlay onBackdropPress

Does this PR introduce a breaking change?
No

Other information

codecov · 2021-06-09T16:28:25Z

Codecov Report

Merging #3074 (5327822) into next (f859d68) will increase coverage by 0.01%.
The diff coverage is 100.00%.

❗ Current head 5327822 differs from pull request most recent head 5c1a6a5. Consider uploading reports for the commit 5c1a6a5 to get more accurate results

@@            Coverage Diff             @@
##             next    #3074      +/-   ##
==========================================
+ Coverage   79.96%   79.97%   +0.01%     
==========================================
  Files          88       88              
  Lines        1662     1663       +1     
  Branches      731      732       +1     
==========================================
+ Hits         1329     1330       +1     
  Misses        328      328              
  Partials        5        5

Impacted Files	Coverage Δ
packages/base/src/BottomSheet/BottomSheet.tsx	`100.00% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5a173d1...5c1a6a5. Read the comment docs.

khushal87

Please resolve merge conflicts.

arpitBhalla · 2021-06-21T13:07:53Z

src/bottomSheet/BottomSheet.tsx

+      <TouchableWithoutFeedback
+        onPress={onBackdropPress}
+        testID="RNE__Overlay__backdrop"
+      >
+        <View
+          testID="backdrop"
+          style={StyleSheet.flatten([styles.backdrop, backdropStyle])}
+        />
+      </TouchableWithoutFeedback>
+


Could you use Pressable?

TouchableWithoutFeedback to Pressable

kedar09 · 2021-07-08T17:44:17Z

@kedar09 Can you resolve conflict
I have updated the code with the latest code in the next branch and push that changes

jorgegvallejo · 2021-08-03T19:17:51Z

Hope this gets added to the next release 🙏

flyingcircle

Tested this in the demo app. Did not work.

arpitBhalla · 2021-08-10T16:07:23Z

We need to use pointerEvents

diff --git a/src/BottomSheet/BottomSheet.tsx b/src/BottomSheet/BottomSheet.tsx
index fb5019c3f..32edd5468 100644
--- a/src/BottomSheet/BottomSheet.tsx
+++ b/src/BottomSheet/BottomSheet.tsx
@@ -28,6 +28,8 @@ export type BottomSheetProps = {
 
   /** Is the modal component shown. */
   isVisible?: boolean;
+
+  /** Props for ScrollView */
   scrollViewProps?: ScrollViewProps;
 };
 
@@ -54,14 +56,13 @@ export const BottomSheet: RneFunctionComponent<BottomSheetProps> = ({
       visible={isVisible}
       {...modalProps}
     >
-      <Pressable onPress={onBackdropPress} testID="RNE__Overlay__backdrop">
-        <View
-          testID="backdrop"
-          style={StyleSheet.flatten([styles.backdrop, backdropStyle])}
-        />
-      </Pressable>
-
+      <Pressable
+        style={[StyleSheet.absoluteFill, styles.backdrop, backdropStyle]}
+        onPress={onBackdropPress}
+        testID="RNE__Overlay__backdrop"
+      />
       <SafeAreaView
+        pointerEvents={'none'}
         style={StyleSheet.flatten([
           styles.safeAreaView,
           containerStyle && containerStyle,
~
~
~
(END)

kedar09 · 2021-08-11T21:09:26Z

pointerEvents={'none'}

@arpitBhalla i have used
style={[StyleSheet.absoluteFill, styles.backdrop, backdropStyle]}
and pointerEvents="box-none"
its worked


return (<Modal onRequestClose={onBackdropPress} animationType="slide" transparent={true} visible={isVisible} {...modalProps}>
    <Pressable onPress={onBackdropPress}   
    style={[StyleSheet.absoluteFill, styles.backdrop, backdropStyle]}
     testID="RNE__Overlay__backdrop" />
    
      <SafeAreaView style={StyleSheet.flatten([
        styles.safeAreaView,
        containerStyle && containerStyle,
    ])} {...props} pointerEvents="box-none">
        <View>
          <ScrollView {...scrollViewProps}>{children}</ScrollView>
        </View>
      </SafeAreaView>
    </Modal>);

netlify · 2021-08-12T06:12:33Z

✔️ Deploy Preview for react-native-elements canceled.

🔨 Explore the source changes: 7a5e406

🔍 Inspect the deploy log: https://app.netlify.com/sites/react-native-elements/deploys/612f867b21e9f7000872917e

…pPress

arpitBhalla · 2022-02-05T14:26:23Z

Thank you for your contribution 🎉

Co-authored-by: kedar09 <kedar@cleverground.com> Co-authored-by: Arpit Bhalla <arpitbhalla2001@gmail.com>

bottomsheet- added onBackdropPress for close bottomsheet

9a5c238

khushal87 reviewed Jun 20, 2021

View reviewed changes

arpitBhalla reviewed Jun 21, 2021

View reviewed changes

Update BottomSheet.tsx

3f74cd3

TouchableWithoutFeedback to Pressable

arpitBhalla approved these changes Jul 5, 2021

View reviewed changes

conflicts resolved

3eb65ea

arpitBhalla approved these changes Jul 8, 2021

View reviewed changes

flyingcircle requested changes Aug 9, 2021

View reviewed changes

kedar09 added 2 commits August 12, 2021 02:20

added pointerEvents={none}

8c98e71

added pointerEvents="box-none"

99f142c

updates styles

916693e

kedar09 requested a review from flyingcircle August 12, 2021 10:33

Merge branch 'next' into bottomsheet_onBackdropPress

7a5e406

arpitBhalla changed the title ~~bottomsheet- added onBackdropPress for close bottomsheet~~ feat(BottomSheet): add onBackdropPress handler Jan 25, 2022

ridie001 approved these changes Feb 3, 2022

View reviewed changes

arpitBhalla added 2 commits February 5, 2022 00:58

Merge remote-tracking branch 'origin/next' into bottomsheet_onBackdro…

405f153

…pPress

Merge remote-tracking branch 'origin/next' into bottomsheet_onBackdro…

23c7191

…pPress

arpitBhalla self-requested a review February 5, 2022 14:09

arpitBhalla added the PR: New Feature 🎉 label Feb 5, 2022

arpitBhalla added 2 commits February 5, 2022 19:46

update styles

f989fb7

update test

5327822

arpitBhalla approved these changes Feb 5, 2022

View reviewed changes

update docs

5c1a6a5

arpitBhalla merged commit de1a02b into react-native-elements:next Feb 5, 2022

arpitBhalla added this to the v4.0.0 milestone Feb 5, 2022

github-actions bot pushed a commit that referenced this pull request Feb 5, 2022

feat(BottomSheet): add onBackdropPress handler (#3074)

ab93c9e

Co-authored-by: kedar09 <kedar@cleverground.com> Co-authored-by: Arpit Bhalla <arpitbhalla2001@gmail.com>

github-actions bot pushed a commit that referenced this pull request Feb 5, 2022

feat(BottomSheet): add onBackdropPress handler (#3074)

a6bcfe5

Co-authored-by: kedar09 <kedar@cleverground.com> Co-authored-by: Arpit Bhalla <arpitbhalla2001@gmail.com>

github-actions bot pushed a commit that referenced this pull request Feb 5, 2022

feat(BottomSheet): add onBackdropPress handler (#3074)

ccb8fb9

Co-authored-by: kedar09 <kedar@cleverground.com> Co-authored-by: Arpit Bhalla <arpitbhalla2001@gmail.com>

kedar09 deleted the bottomsheet_onBackdropPress branch February 5, 2022 15:38

arpitBhalla added a commit that referenced this pull request Mar 17, 2022

feat(BottomSheet): add onBackdropPress handler (#3074)

92e08a2

Co-authored-by: kedar09 <kedar@cleverground.com> Co-authored-by: Arpit Bhalla <arpitbhalla2001@gmail.com>

arpitBhalla added a commit that referenced this pull request Mar 19, 2022

feat(BottomSheet): add onBackdropPress handler (#3074)

858cb1b

Co-authored-by: kedar09 <kedar@cleverground.com> Co-authored-by: Arpit Bhalla <arpitbhalla2001@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(BottomSheet): add onBackdropPress handler#3074

feat(BottomSheet): add onBackdropPress handler#3074
arpitBhalla merged 12 commits intoreact-native-elements:nextfrom
kedar09:bottomsheet_onBackdropPress

kedar09 commented Jun 9, 2021 •

edited

Loading

Uh oh!

codecov bot commented Jun 9, 2021 •

edited

Loading

Uh oh!

khushal87 left a comment

Uh oh!

arpitBhalla Jun 21, 2021

Uh oh!

kedar09 commented Jul 8, 2021

Uh oh!

jorgegvallejo commented Aug 3, 2021

Uh oh!

flyingcircle left a comment

Uh oh!

arpitBhalla commented Aug 10, 2021 •

edited

Loading

Uh oh!

kedar09 commented Aug 11, 2021

Uh oh!

netlify bot commented Aug 12, 2021 •

edited

Loading

Uh oh!

arpitBhalla commented Feb 5, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

Conversation

kedar09 commented Jun 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jun 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

khushal87 left a comment

Choose a reason for hiding this comment

Uh oh!

arpitBhalla Jun 21, 2021

Choose a reason for hiding this comment

Uh oh!

kedar09 commented Jul 8, 2021

Uh oh!

jorgegvallejo commented Aug 3, 2021

Uh oh!

flyingcircle left a comment

Choose a reason for hiding this comment

Uh oh!

arpitBhalla commented Aug 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kedar09 commented Aug 11, 2021

Uh oh!

netlify bot commented Aug 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arpitBhalla commented Feb 5, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

kedar09 commented Jun 9, 2021 •

edited

Loading

codecov bot commented Jun 9, 2021 •

edited

Loading

arpitBhalla commented Aug 10, 2021 •

edited

Loading

netlify bot commented Aug 12, 2021 •

edited

Loading