mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Eli White
3212f7dfe8
Summary: *Pressable* is a component which is intended to replace the Touchable* components such as *TouchableWithoutFeedback* and *TouchableOpacity*. The motivation is to make it easier to create custom visual touch feedback so that React Native apps are not easily identified by the “signature opacity fade” touch feedback. We see this component as eventually deprecating all of the existing Touchable components. Changelog: [Added][General] New <Pressable> Component to make it easier to create touchable elements Reviewed By: yungsters Differential Revision: D19674480 fbshipit-source-id: 765d657f023caea459f02da25376e4d5a2efff8b
95 lines
2.7 KiB
JavaScript
95 lines
2.7 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import invariant from 'invariant';
|
|
import {Commands} from '../View/ViewNativeComponent.js';
|
|
import type {ColorValue} from '../../StyleSheet/StyleSheetTypes.js';
|
|
import type {PressEvent} from '../../Types/CoreEventTypes.js';
|
|
import {Platform, View, processColor} from 'react-native';
|
|
import * as React from 'react';
|
|
import {useMemo} from 'react';
|
|
|
|
type NativeBackgroundProp = $ReadOnly<{|
|
|
type: 'RippleAndroid',
|
|
color: ?number,
|
|
borderless: boolean,
|
|
|}>;
|
|
|
|
/**
|
|
* Provides the event handlers and props for configuring the ripple effect on
|
|
* supported versions of Android.
|
|
*/
|
|
export default function useAndroidRippleForView(
|
|
rippleColor: ?ColorValue,
|
|
viewRef: {|current: null | React.ElementRef<typeof View>|},
|
|
): ?$ReadOnly<{|
|
|
onPressIn: (event: PressEvent) => void,
|
|
onPressMove: (event: PressEvent) => void,
|
|
onPressOut: (event: PressEvent) => void,
|
|
viewProps: $ReadOnly<{|
|
|
nativeBackgroundAndroid: NativeBackgroundProp,
|
|
|}>,
|
|
|}> {
|
|
return useMemo(() => {
|
|
if (
|
|
Platform.OS === 'android' &&
|
|
Platform.Version >= 21 &&
|
|
rippleColor != null
|
|
) {
|
|
const processedColor = processColor(rippleColor);
|
|
invariant(
|
|
processedColor == null || typeof processedColor === 'number',
|
|
'Unexpected color given for Ripple color',
|
|
);
|
|
|
|
return {
|
|
viewProps: {
|
|
// Consider supporting `nativeForegroundAndroid` and `borderless`.
|
|
nativeBackgroundAndroid: {
|
|
type: 'RippleAndroid',
|
|
color: processedColor,
|
|
borderless: false,
|
|
},
|
|
},
|
|
onPressIn(event: PressEvent): void {
|
|
const view = viewRef.current;
|
|
if (view != null) {
|
|
Commands.setPressed(view, true);
|
|
Commands.hotspotUpdate(
|
|
view,
|
|
event.nativeEvent.locationX ?? 0,
|
|
event.nativeEvent.locationY ?? 0,
|
|
);
|
|
}
|
|
},
|
|
onPressMove(event: PressEvent): void {
|
|
const view = viewRef.current;
|
|
if (view != null) {
|
|
Commands.hotspotUpdate(
|
|
view,
|
|
event.nativeEvent.locationX ?? 0,
|
|
event.nativeEvent.locationY ?? 0,
|
|
);
|
|
}
|
|
},
|
|
onPressOut(event: PressEvent): void {
|
|
const view = viewRef.current;
|
|
if (view != null) {
|
|
Commands.setPressed(view, false);
|
|
}
|
|
},
|
|
};
|
|
}
|
|
return null;
|
|
}, [rippleColor, viewRef]);
|
|
}
|