styles to TouchableNativeFeedback-CodePudding

I am using translate on View inside the TouchableNativeFeedback. But after using translate css the upper part of view is not clickable. Can I give translate css to TouchableNativeFeedback also.

function App() {
  return (
    <View>
      <TouchableNativeFeedback onPress={this._onButtonPress}>
        <View style={styles.app}></View>
      </TouchableNativeFeedback>
    </View>
  );
}

const styles = StyleSheet.create({
  app: {
    height: 50,
    width: 50,
    transform: [{ translateY: 25 }]
  }
});

I tried giving style to that. But I don't think it accepts that.

React-native version: "0.61.2"

CodePudding user response：

CSS transforms do not affect the box model of the element being transformed. Instead, CSS transforms only adjust the rendering of the object in order to avoid impacting the flow of content.

Therefore, mouse events will only be available on the original ("un-transformed") area of the page. You will not be able to detect mouse events in the transformed location.

You will need to think of a different solution, perhaps using position: absolute or relative with a top/left offset.

CodePudding user response：

You need to think about some margins or padding. From the official documentation:

Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.

https://reactnative.dev/docs/transforms