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 | 2x 2x 1x 1x | import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Step } from "../../api/outdoorDirectionsApi";
import {
getManeuverIcon,
getStreetOnlyInstruction,
} from "./navigationDirectionUtils";
interface NavigationDirectionHUDTopExtProps {
readonly step?: Step;
}
export default function NavigationDirectionHUDTop({
step,
}: NavigationDirectionHUDTopExtProps) {
const street = getStreetOnlyInstruction(step?.instruction);
if (!step || !street) return null;
return (
<View style={styles.container}>
<Ionicons
name={getManeuverIcon(step.maneuverType)}
size={16}
color="#ffffff"
/>
<Text style={styles.text} numberOfLines={1}>
{street}
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
gap: 8,
backgroundColor: "#800020",
borderRadius: 12,
paddingHorizontal: 14,
paddingVertical: 8,
},
text: {
color: "#ffffff",
fontWeight: "700",
fontSize: 15,
flex: 1,
},
});
|