Skip to content

Commit 29d1e57

Browse files
authored
Fix backgroundColor not being applied to RNGestureHandlerButton (#3368)
## Description `RNGestureHandlerButton` consists of 2 nested `ViewGroups` - `ViewGroupManager` and `ButtonViewGroup` Before React Native `0.77`, `backgroundColor` was applied to `RNGestureHandlerButton` by `ButtonViewGroup.setBackgroundColor(color)`, which was called by unknown React Native mechanism. In React Native `0.77` something changed, and `ButtonViewGroup.setBackgroundColor(color)` stopped being called. This PR overrides the setter for `backgroundColor` on `ViewGroupManager`, and forwards the argument to `ButtonViewGroup.setBackgroundColor(color)`. I have not found the root cause (RN commit) of this issue, and i have no idea what are the consequences of calling both the `BackgroundStyleApplicator.setBackgroundColor()` and `ButtonViewGroup.setBackgroundColor(color)`, but it seems like those two functions were already called sequentially before `0.77`, as `BackgroundStyleApplicator` was introduced in RN `0.76` and most likely called `ButtonViewGroup.setBackgroundColor(color)` itself. Fixes #3367 ## Test plan <details> <summary> Repro code </summary> ```tsx import React from 'react'; import { Pressable as RNPressable, StyleSheet, Text } from 'react-native'; import { BaseButton, GestureHandlerRootView, PureNativeButton, RawButton, RectButton, } from 'react-native-gesture-handler'; const App = () => { return ( <GestureHandlerRootView> <RectButton style={styles.wrapperCustom}> <Text style={styles.text}>RectButton</Text> </RectButton> <BaseButton style={styles.wrapperCustom}> <Text style={styles.text}>BaseButton</Text> </BaseButton> <RawButton style={styles.wrapperCustom}> <Text style={styles.text}>RawButton</Text> </RawButton> <PureNativeButton style={styles.wrapperCustom}> <Text style={styles.text}>PureNativeButton</Text> </PureNativeButton> <RNPressable style={styles.wrapperCustom}> {({ pressed }) => ( <Text style={styles.text}> {pressed ? 'Pressed!' : 'Pressable from react-native'} </Text> )} </RNPressable> </GestureHandlerRootView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', gap: 16, padding: 16, }, text: { fontSize: 32, }, wrapperCustom: { borderRadius: 8, padding: 6, flex: 1, backgroundColor: 'papayawhip', borderWidth: 2, }, logBox: { flex: 1, padding: 20, margin: 10, borderWidth: StyleSheet.hairlineWidth, borderColor: '#f0f0f0', backgroundColor: '#f9f9f9', }, }); export default App; ``` </details>
1 parent e36eada commit 29d1e57

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@ class RNGestureHandlerButtonViewManager : ViewGroupManager<ButtonViewGroup>(), R
5555
view.useDrawableOnForeground = useDrawableOnForeground
5656
}
5757

58+
@ReactProp(name = "backgroundColor")
59+
override fun setBackgroundColor(view: ButtonViewGroup, backgroundColor: Int) {
60+
view.setBackgroundColor(backgroundColor)
61+
}
62+
5863
@ReactProp(name = "borderless")
5964
override fun setBorderless(view: ButtonViewGroup, useBorderlessDrawable: Boolean) {
6065
view.useBorderlessDrawable = useBorderlessDrawable

0 commit comments

Comments
 (0)