81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import RootSiblings from 'react-native-root-siblings'
|
|
import React from 'react'
|
|
import {Animated, StyleSheet, View} from 'react-native'
|
|
import {Text} from './text/Text'
|
|
import {colors} from 'lib/styles'
|
|
import {useTheme} from 'lib/ThemeContext'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
|
|
|
|
const TIMEOUT = 4e3
|
|
|
|
export function show(message: string) {
|
|
const item = new RootSiblings(<Toast message={message} />)
|
|
setTimeout(() => {
|
|
item.destroy()
|
|
}, TIMEOUT)
|
|
}
|
|
|
|
function Toast({message}: {message: string}) {
|
|
const theme = useTheme()
|
|
const pal = usePalette('default')
|
|
const interp = useAnimatedValue(0)
|
|
|
|
React.useEffect(() => {
|
|
Animated.sequence([
|
|
Animated.timing(interp, {
|
|
toValue: 1,
|
|
duration: 150,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.delay(3700),
|
|
Animated.timing(interp, {
|
|
toValue: 0,
|
|
duration: 150,
|
|
useNativeDriver: true,
|
|
}),
|
|
]).start()
|
|
})
|
|
|
|
const opacityStyle = {opacity: interp}
|
|
return (
|
|
<View style={styles.container} pointerEvents="none">
|
|
<Animated.View
|
|
style={[
|
|
pal.view,
|
|
pal.border,
|
|
styles.toast,
|
|
theme.colorScheme === 'dark' && styles.toastDark,
|
|
opacityStyle,
|
|
]}>
|
|
<Text type="lg-medium" style={pal.text}>
|
|
{message}
|
|
</Text>
|
|
</Animated.View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
position: 'absolute',
|
|
top: 60,
|
|
left: 0,
|
|
right: 0,
|
|
alignItems: 'center',
|
|
},
|
|
toast: {
|
|
paddingHorizontal: 18,
|
|
paddingVertical: 10,
|
|
borderRadius: 24,
|
|
borderWidth: 1,
|
|
shadowColor: '#000',
|
|
shadowOpacity: 0.1,
|
|
shadowOffset: {width: 0, height: 4},
|
|
marginHorizontal: 6,
|
|
},
|
|
toastDark: {
|
|
backgroundColor: colors.gray6,
|
|
shadowOpacity: 0.5,
|
|
},
|
|
})
|