mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Nate
14b455f69a
Summary: This commit fixes an issue where ripple touch feedback extends beyond the border radius of a view. ### Before <img src="https://user-images.githubusercontent.com/590904/59892832-9cb19180-938f-11e9-8239-b2d5f0e1ce56.png" width="300" /> ### After <img src="https://user-images.githubusercontent.com/590904/59925227-766e0f00-93ec-11e9-9efe-c41e696f8c3c.gif" width="300" /> ### The fix It achieves this by adding a mask to the RippleDrawable background, collecting that information from two new methods on ReactViewGroup: 1. getBorderRadiusMask() returns a drawable rounded rectangle matching the view's border radius properties 2. getBorderRadius() produces a float[] with the border radius information required to build a RoundedRectShape in getBorderRadiusMask() Additionally, this commit updates setBorderRadius in ReactViewManager to re-apply the background whenever it is set, which is necessary to update the mask on the RippleDrawable background image as the border radius changes. Related issues: https://github.com/facebook/react-native/issues/6480 ## Changelog [Android][fixed] - Adding border radius styles to TouchableNative react-native run-android --port <x> correctly connects to dev server and related error messages display the correct port Pull Request resolved: https://github.com/facebook/react-native/pull/25342 Test Plan: Link this branch to a new React native project with the following App.js class: ``` import React, { Component } from "react"; import { StyleSheet, Text, View, TouchableNativeFeedback } from "react-native"; export default class App extends Component { render() { const ripple = TouchableNativeFeedback.Ripple("#ff0000"); return ( <View style={styles.container}> <TouchableNativeFeedback background={ripple}> <View style={{ width: 96, borderRadius: 12, borderTopLeftRadius: 10, borderBottomRightRadius: 37, height: 96, alignItems: "center", justifyContent: "center", borderColor: "black", borderWidth: 2 }} > <Text>{"CLICK CLICK"}</Text> </View> </TouchableNativeFeedback> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#F5FCFF" } }); ``` It's important to ensure that updates to border radius are accounted for. I did this by enabling hot module reloading and updating the border radius styles to verify that the ripple remains correct. Reviewed By: cpojer Differential Revision: D16221213 Pulled By: makovkastar fbshipit-source-id: 168379591e79f9eca9d184b1607ebb564c2d83dd
