No visual feedback on FAB to reduce jank
parent
cb5a575bc8
commit
16fbefc354
|
@ -1,5 +1,10 @@
|
|||
import React from 'react'
|
||||
import {GestureResponderEvent, StyleSheet, TouchableOpacity} from 'react-native'
|
||||
import {
|
||||
GestureResponderEvent,
|
||||
StyleSheet,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import LinearGradient from 'react-native-linear-gradient'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {IconProp} from '@fortawesome/fontawesome-svg-core'
|
||||
|
@ -9,20 +14,22 @@ import * as zIndex from '../../lib/z-index'
|
|||
type OnPress = ((event: GestureResponderEvent) => void) | undefined
|
||||
export function FAB({icon, onPress}: {icon: IconProp; onPress: OnPress}) {
|
||||
return (
|
||||
<TouchableOpacity style={styles.outer} onPress={onPress}>
|
||||
<LinearGradient
|
||||
colors={[gradients.primary.start, gradients.primary.end]}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 1}}
|
||||
style={styles.inner}>
|
||||
<FontAwesomeIcon
|
||||
size={24}
|
||||
icon={icon}
|
||||
color={colors.white}
|
||||
style={styles.icon}
|
||||
/>
|
||||
</LinearGradient>
|
||||
</TouchableOpacity>
|
||||
<TouchableWithoutFeedback onPress={onPress}>
|
||||
<View style={styles.outer}>
|
||||
<LinearGradient
|
||||
colors={[gradients.primary.start, gradients.primary.end]}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 1}}
|
||||
style={styles.inner}>
|
||||
<FontAwesomeIcon
|
||||
size={24}
|
||||
icon={icon}
|
||||
color={colors.white}
|
||||
style={styles.icon}
|
||||
/>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue