[Android] Screen freezes when RBSheet is opened while react-native-reanimated is used on the same screen. #202
Description
On Android, using react-native-raw-bottom-sheet () alongside react-native-reanimated's <Animated.Image> freezes the screen when the bottom sheet is opening. Even when the animated components are not nested inside the RBSheet, just having them rendered on the same screen is enough to cause the app to hang. This does not occur with regular React Native components like Image or View are used.
It appears to be a conflict between Reanimated’s native UI thread animations and RBSheet’s Modal-based implementation on Android.
Package.json:
"react": "18.3.1",
"react-native": "0.76.1",
"react-native-raw-bottom-sheet": "^3.0.0",
"react-native-reanimated": "^3.16.6"
React-native code:
> render() {
> return (
> <RBSheet
> customStyles={{
> container: {
> borderRadius: 18
> }
> }}
> onClose={this.closeBottomSheet}
> ref={(ref) => this.bottomSheetModalRef = ref}
> height={this.sheetHeight}
> closeOnPressBack={true}
> closeOnDragDown={true}
> closeOnPressMask={true}>
> <View style={{ flex: 1 }}>
> <Text style={[this.context.h1, styles.titleStyle]}>{this.sheetTitle}</Text>
> <Text style={[this.context.p, styles.titleStyle, styles.subTitleView]}>{this.sheetSubTitle}</Text>
> <FlatList
> style={styles.flatListStyle}
> numColumns={4}
> showsVerticalScrollIndicator={false}
> showsHorizontalScrollIndicator={false}
> data={this.shareItemsList}
> renderItem={(item) => this.renderItem(item)}
> keyExtractor={(item, id) => '' + id}
> />
> </View>
> {this.state.showLoadingIndicator && <LoadingIndicator />}
> </RBSheet>
> )
> }