0

I have react-native-web project. A problem I'm having is that when a TouchableHighlight is pressed, the padding of all the children elements is removed.

Before the touch, the inspector shows proper padding, after the touch padding is 0. I've tried wrapping the Text in a View component, and unwrapping it as well.

I'm at a loss here

const bS : ViewStyle = {
paddingTop: 5,
paddingLeft: 5,
paddingRight: 5,
paddingBottom: 5,

flexDirection: "column",
justifyContent: "center",
width: '100%',
height: '100%'
}

export default function TextButton(props: {title: string, onPress: () => any}) {

return <TouchableHighlight style={s.touch} underlayColor={'#000000'} onPress={props.onPress}>
  <View style={bS}>
    <Text>{props.title}</Text>
  </View>
  </TouchableHighlight>
}

EDIT As asked, I added the code onto CodeSandbox, but it works perfectly fine! https://codesandbox.io/s/distracted-golick-uwl6f?fontsize=14

EDIT 2 The problem comes when React is imported from react-native. The problem goes away when React is imported from react

Anton
  • 2,282
  • 26
  • 43

0 Answers0