ts
import { Blur, Label } from "@apricot/react";
import type { BlurProps, LabelProps } from "@apricot/react";Label#
A React Native view pinned to a point in the scene. Any views inside. It moves on the UI thread (no React render per frame), hides when the point is behind the camera or far off screen, and stays hidden until the scene has drawn its content. Put it inside <Scene>.
| Prop | Type | Default | Description |
|---|---|---|---|
attach |
RefObject<SceneObject | null> | SceneObject | null |
The object to follow, such as a train car or a model | |
position |
Vec3 |
[0, 0, 0] |
Without attach: the point, in its parent's space (inside a <Group>, the group's). With attach: an offset from the object along world axes, so a label stays above a turning car |
anchor |
"bottom" | "center" | "top" |
"bottom" |
Which part of the label sits on the point. "bottom" floats it above, like a map pin |
style |
StyleProp<ViewStyle> |
Style for the label's view | |
children |
ReactNode |
The views to show |
The label's view does not take touches itself (pointerEvents: "box-none"); buttons inside it do.
tsx
<Label attach={car} position={[0, 2, 0]}>
<Text style={{ backgroundColor: "white", padding: 4, borderRadius: 6 }}>Your ride</Text>
</Label>Blur#
Draws its children softly, behind everything else, as if out of focus. They are lit like the rest of the scene. The blur is drawn at a fraction of the screen's size, so it costs little.
| Prop | Type | Default | Description |
|---|---|---|---|
radius |
points | 6 |
How soft. Can change at any time |
children |
ReactNode |
What to blur |
- Blurred objects are always behind the sharp ones, whatever their depth.
- Use one
<Blur>per scene. - Until the blurred objects' shaders compile, the layer is blank.