3

I have a bottom sheet created using reanimated-bottom-sheet package as follows

<BottomSheet
                ref={this.bottomSheetRef}
                snapPoints={[0, 270]}
                renderContent={() => <TextEditor/>}
                renderHeader={() => <View style={{ height: 70, backgroundColor: 'red' }}><Text>HEADER</Text></View>}
                enabledBottomClamp={true}
                callbackNode={fall}
                enabledInnerScrolling={false}
            />

I can open/close the bottom sheets using this.bottomSheetRef.current.snapTo(1)/this.bottomSheetRef.current.snapTo(0)

But when swiped down the in body/header the sheet won't close.

FLash
  • 696
  • 9
  • 27
  • Are you using Expo? If not, have you installed and linked `react-native-gesture-handler` and `react-native-reanimated` – Neeko Nov 04 '19 at 10:44
  • Not expo. Both of them are installed and linked. Using v0.6 Tried with and without linking. Linking will show warning `error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually` – FLash Nov 04 '19 at 13:27
  • @FLash - did you get this to work ? – ilibilibom Dec 11 '19 at 14:09
  • @lilibilibom No – FLash Dec 16 '19 at 06:49

1 Answers1

8

You may have installed the library react-native-gesture-handler incorrectly. Update your MainActivity.java file (or wherever you create an instance of ReactActivityDelegate), so that it overrides the method responsible for creating ReactRootView instance and then use the root view wrapper provided by this library. Do not forget to import ReactActivityDelegate, ReactRootView, and RNGestureHandlerEnabledRootView:

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}