Skip to content

Commit e0df970

Browse files
authored
docs: compatibility table
1 parent d4766e8 commit e0df970

File tree

1 file changed

+39
-0
lines changed

1 file changed

+39
-0
lines changed

README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,45 @@ yarn add react-native-scroll-bottom-sheet
4040

4141
If you don't use Expo, you also need to install [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) and [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) libraries along with this one.
4242

43+
## Compatibility table
44+
You may add some touchable components inside the bottom sheet or several `FlatList` widgets for horizontal mode. Unfortunately, not all _interactable_ React Native components are compatible with this library. This is due to some limitations on `react-native-gesture-handler`, which this library uses behind the scenes. For that, please follow this compatibility table:
45+
46+
| Import | Touchable | Flatlist |
47+
| ------------------------- | -------- | ------- |
48+
| react-native | iOS | 🚫 |
49+
| react-native-gesture-handler | Android | Android, iOS|
50+
51+
### Touchables
52+
As you can see on the table, for any touchable component (`TouchableOpacity`, `TouchableHighlight`, ...) you need to have different imports depending on the platform. The below is a snippet you may find useful to abstract that into a component.
53+
54+
```js
55+
import React from "react";
56+
import { Platform, TouchableOpacity } from "react-native";
57+
import { TouchableOpacity as RNGHTouchableOpacity } from "react-native-gesture-handler";
58+
59+
const BottomSheetTouchable = (props) => {
60+
if (Platform.OS === "android") {
61+
return (
62+
<RNGHTouchableOpacity {...props} />
63+
);
64+
}
65+
66+
return <TouchableOpacity {...props} />
67+
};
68+
69+
export default BottomSheetTouchable;
70+
```
71+
72+
### Horizontal Mode
73+
For this mode to work properly, **you have to import `FlatList` from react-native-gesture-handler** instead of react-native.
74+
75+
```js
76+
import { FlatList } from 'react-native-gesture-handler';
77+
78+
...
79+
```
80+
81+
4382
## Usage
4483

4584
The below is an example using the core `FlatList` from React Native as the scrollable component.

0 commit comments

Comments
 (0)