CODEWITHSUNDEEP
androidiosreactjsreact-nativebottom-sheet
Patrick Thumeyer
Patrick Thumeyer

Reputation: 11

React Native - Reanimated Bottom Sheet: Content in Snapable Container only scrollable on iOS

I have a container with 3 snap points which also contains a scrollView where I display more information. For some reason, this scrollview only works on iOS and not on Android. However, on Android the scrolling works when I do a sort of vertical pinch to zoom move on the screen. On iOS everything works absolutely seamlessly.

Here the repo for the reanimated-bottom-sheet: https://github.com/osdnk/react-native-reanimated-bottom-sheet

I already tried playing around with the props provided on the repository page of the Bottom Sheet library as well as attempted using these props as mentioned in other StackOverflow questions which sadly didn´t do the trick for me. On Android only either the scrolling worked or the snap points. Never the two (Only the two-finger pinching).

Can't scroll Flatlist inside react-native-reanimated-bottom-sheet

enabledInnerScrolling={true}
enabledContentGestureInteraction={false}

Help is much appreciated since it´s the final project of our WebDev course and we don´t have too much time left >.< Here is the code snippet.

  const bs = React.createRef();

  return (
    <View style={styles.container}>
      <BottomSheet
        ref={bs}
        snapPoints={['85%', '39%', '17%']}
        initialSnap={1}
        renderContent={renderContent}
        enabledInnerScrolling={true}
      />
      <TouchableWithoutFeedback onPress={() => bs.current.snapTo(0)}>
        <Image
          style={styles.background}
          source={require('../assets/images/TEST-flower-02.jpg')}
        />
      </TouchableWithoutFeedback>
    </View>
  );
```

Upvotes: 1

Views: 6540

Answers (2)

masterAvatarr
masterAvatarr

Reputation: 123

You could also import ScrollView from "react-native-gesture-handler". It worked for me

Upvotes: 0

Arnoldo
Arnoldo

Reputation: 21

You could try using the FlatList component from react-native-gesture-handler instead of the default FlatList module exported in react-native. This should get your scrollView working on Android

import { FlatList } from "react-native-gesture-handler";

...
const renderContent = () => (
  <FlatList
    data={DATA}
    renderItem={renderItem}
  />);

Upvotes: 1

Related Questions