soconnor
d057ba208d
git-subtree-dir: apps/mobile git-subtree-mainline:86f8987dffgit-subtree-split:5fa30f365f
64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import { Pressable, StyleSheet, Text } from "react-native";
|
|
|
|
import { useAppTheme } from "@/contexts/ThemeContext";
|
|
import { fonts, radii } from "@/constants/theme";
|
|
import { useFloatingActionBottom } from "@/lib/tab-bar-insets";
|
|
|
|
type FloatingActionButtonProps = {
|
|
onPress: () => void;
|
|
accessibilityLabel?: string;
|
|
};
|
|
|
|
export function FloatingActionButton({
|
|
onPress,
|
|
accessibilityLabel = "Create",
|
|
}: FloatingActionButtonProps) {
|
|
const { colors } = useAppTheme();
|
|
const bottom = useFloatingActionBottom();
|
|
|
|
return (
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
accessibilityLabel={accessibilityLabel}
|
|
onPress={onPress}
|
|
style={({ pressed }) => [
|
|
styles.fab,
|
|
{
|
|
bottom,
|
|
backgroundColor: colors.primary,
|
|
shadowColor: colors.foreground,
|
|
},
|
|
pressed && styles.pressed,
|
|
]}
|
|
>
|
|
<Text style={[styles.icon, { color: colors.primaryForeground }]}>+</Text>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
fab: {
|
|
position: "absolute",
|
|
right: 20,
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: radii.pill,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 8,
|
|
elevation: 6,
|
|
},
|
|
pressed: {
|
|
opacity: 0.9,
|
|
transform: [{ scale: 0.96 }],
|
|
},
|
|
icon: {
|
|
fontSize: 32,
|
|
lineHeight: 34,
|
|
fontFamily: fonts.body,
|
|
marginTop: -2,
|
|
},
|
|
});
|