Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 2x 1x | import React from "react";
import { StyleSheet, Text, View } from "react-native";
import NavigationCancelButton from "./NavigationCancelButton";
interface NavigationCancelBottomProps {
readonly onOpenSettings: () => void;
readonly onConfirmCancel: () => void;
readonly onResumeNavigation: () => void;
}
export default function NavigationCancelBottom({
onOpenSettings,
onConfirmCancel,
onResumeNavigation,
}: NavigationCancelBottomProps) {
return (
<View style={styles.container} pointerEvents="box-none">
<View style={styles.row}>
<NavigationCancelButton
testId="settings-button"
icon="settings-outline"
onPress={onOpenSettings}
/>
<View style={styles.centerGroup}>
<NavigationCancelButton
testId="cancel-button"
icon="close"
onPress={onConfirmCancel}
variant="danger"
size={72}
/>
<Text style={styles.cancelText}>Cancel trip</Text>
</View>
<NavigationCancelButton
testId="resume-button"
icon="arrow-forward"
onPress={onResumeNavigation}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
position: "absolute",
left: 0,
right: 0,
bottom: 18,
alignItems: "center",
},
row: {
flexDirection: "row",
alignItems: "flex-end",
justifyContent: "center",
gap: 24,
},
centerGroup: {
alignItems: "center",
minWidth: 96,
},
cancelText: {
marginTop: 8,
fontSize: 16,
fontWeight: "700",
color: "#000",
},
});
|