React-native-reanimated-bottom-sheet: Android: Swipe not working.

[luvnish19]

I append this example in my code and what I noticed that swipe gesture (slide) is not working.
I only run this in Android device. HERE is my source code:

import React from 'react'
import {
Image,
StyleSheet,
Text,
TouchableWithoutFeedback,
View,
TouchableOpacity
} from 'react-native'
import BottomSheet from 'reanimated-bottom-sheet'

export default class AnimatedBottomSheet extends React.Component {
renderInner = () => (

International Airport - 40 miles away





style={styles.photo}
/>

)

renderHeader = () => (


)

bs = React.createRef()

render() {
return (
ref={this.bs}

      snapPoints={[450, '80%', '50%', '50%']}
      renderContent={this.renderInner}
      renderHeader={this.renderHeader}
      initialSnap={3}
      overdragResistanceFactor={1}
      enabledInnerScrolling={true}
      enabledGestureInteraction={true}
      enabledHeaderGestureInteraction={true}
      enabledContentGestureInteraction={false} />

    <TouchableWithoutFeedback style={{height:80,width:80,backgroundColor:'red'}} onPress={() => this.bs.current.snapTo(1)}>
      <Image style={styles.map}  />
    </TouchableWithoutFeedback>
  </View>
)

}
}

const IMAGE_SIZE = 200

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
box: {
width: IMAGE_SIZE,
height: IMAGE_SIZE,
},
panelContainer: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
panel: {
height: 600,
padding: 20,
backgroundColor: '#f7f5eee8',
},
header: {
backgroundColor: '#f7f5eee8',
shadowColor: '#000000',
paddingTop: 20,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
panelHeader: {
alignItems: 'center',
},
panelHandle: {
width: 40,
height: 8,
borderRadius: 4,
backgroundColor: '#00000040',
marginBottom: 10,
},
panelTitle: {
fontSize: 27,
height: 35,
},
panelSubtitle: {
fontSize: 14,
color: 'gray',
height: 30,
marginBottom: 10,
},
panelButton: {
padding: 20,
borderRadius: 10,
backgroundColor: '#318bfb',
alignItems: 'center',
marginVertical: 10,
},
panelButtonTitle: {
fontSize: 17,
fontWeight: 'bold',
color: 'white',
},
photo: {
width: '100%',
height: 225,
marginTop: 30,
},
map: {
height: '100%',
width: '100%',
},
})

Please fix this one. Thanks

[akinmac002]

I have that same problem.

[feedcast-me]

same here, any workaround?

[rtanizawa]

I'm having the same issue here

[luvnish19]

@osdnk please provide a solution for this. Everyone is in trouble.

[akinmac002]

Working properly in another project. I think that the problem is gesture-handler or reanimated conflict.

[luvnish19]

@akinmac002 Please share your source code. So that we could run as it is.

[akinmac002]

I solved my problem. I've detected the problem as linking on react-native-gesture-handler. https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android

Edit on MainActivity.java:

package com.swmansion.gesturehandler.react.example;

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);
+      }
+    };
+  }
}

[luvnish19]

It works. Thanks a lot

[raajnadar]

Yes, this docs helped me https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android

Please close the issue

[azhararmar]

For me even it did not work even after doing all configuration as specified in installation document.

I added following code in index.js of the app and it worked perfectly for me.

import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

[alexeyvax]

I did all steps you guys @akinmac002 @azhararmar provided but swipe still does not work for me (