diff --git a/client/react-native/common/components/Library/Flex.js b/client/react-native/common/components/Library/Flex.js
index fccb18aeeb..e8bf4681d4 100644
--- a/client/react-native/common/components/Library/Flex.js
+++ b/client/react-native/common/components/Library/Flex.js
@@ -1,5 +1,7 @@
+import { View } from 'react-native'
import React from 'react'
-import { View, TouchableOpacity } from 'react-native'
+
+import Touchable from './Touchable'
const getDirection = (key, directions = { rows: 'column', cols: 'row' }) =>
directions[key] || null
@@ -49,7 +51,7 @@ const getProps = ({
export const Block = props => {
return props.onPress ? (
-
+
) : (
)
@@ -58,7 +60,7 @@ export const Block = props => {
export const Rows = ({ direction, ...props }) => {
props.direction = 'rows'
return props.onPress ? (
-
+
) : (
)
@@ -67,7 +69,7 @@ export const Rows = ({ direction, ...props }) => {
export const Cols = ({ direction, ...props }) => {
props.direction = 'cols'
return props.onPress ? (
-
+
) : (
)
diff --git a/client/react-native/common/components/Library/Touchable.js b/client/react-native/common/components/Library/Touchable.js
new file mode 100644
index 0000000000..c2f5524bbd
--- /dev/null
+++ b/client/react-native/common/components/Library/Touchable.js
@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react'
+import { TouchableOpacity } from 'react-native'
+
+export default class Touchable extends PureComponent {
+ state = {
+ loading: false,
+ }
+
+ preventDoubleClicking = onPress => () => {
+ this.setState({ loading: true }, async () => {
+ if (!onPress) {
+ return
+ }
+ await onPress()
+ this.setState({ loading: false })
+ })
+ }
+
+ render () {
+ const { loading } = this.state
+ const {
+ style = {},
+ onPress,
+ opacity,
+ activeOpacity = 0.3,
+ ...props
+ } = this.props
+ style.opacity = opacity || onPress ? 1 : activeOpacity
+ return (
+
+ )
+ }
+}