-
Notifications
You must be signed in to change notification settings - Fork 7
/
NativeTouchable.js
85 lines (64 loc) · 1.52 KB
/
NativeTouchable.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/**
* Native Touchable.
* Native component used for the Ripple effect.
*/
/* --- Imports --- */
import React, {
Component,
} from 'react';
import {
requireNativeComponent,
Platform,
PixelRatio,
View,
} from 'react-native';
import PropTypes from 'prop-types';
/* --- Component setup --- */
const NativeTouchableView = requireNativeComponent('BNTouchableView', {
name: 'NativeTouchable',
propTypes: {
...View.propTypes,
// Touch events callback
onTouch: PropTypes.func,
},
}, {
nativeOnly: {
nativeBackgroundAndroid: true,
nativeForegroundAndroid: true,
},
});
/* --- Class methods --- */
export default class NativeTouchable extends Component {
static propTypes = {
...View.propTypes,
// Touch events callback
onTouch: PropTypes.func,
};
/* --- Private methods --- */
_onTouchEvent(event) {
if (this.props.onTouch) {
const evt = event.nativeEvent;
evt.x = Platform.OS === 'android' ? evt.x / PixelRatio.get() : evt.x;
evt.x = Platform.OS === 'android' ? evt.x / PixelRatio.get() : evt.x;
this.props.onTouch(evt);
}
}
/* --- Public methods --- */
measure(cb) {
return this.refs.node.measure(cb);
}
/* --- Rendering methods --- */
render() {
return (
<NativeTouchableView
ref="node"
{...this.props}
style={this.props.style}
onChange={this._onTouchEvent.bind(this)}
onLayout={this.props.onLayout}
>
{this.props.children}
</NativeTouchableView>
);
}
};