Skip to content

Slot Primitive

Merges its props onto its immediate child.

Installation

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/slot

Usage

View Slot

import * as Slot from '@rn-primitives/slot';
function CustomView({ isChild = true }) {
const Component = isChild ? Slot.View : View;
return (
<Component className="bg-red-500">
{/* The `className` is passed down to the `View` with `key="x"` when `isChild` is `true` */}
<View key="x" />
</Component>
);
}

Pressable Slot

import * as Slot from '@rn-primitives/slot';
function CustomPressable() {
return (
<Slot.Pressable onPress={() => { console.log("Pressed")}}>
{/* The `onPress` prop is passed down to the `Pressable` */}
<Pressable />
</Slot.Pressable>
);
}

Text Slot

import * as Slot from '@rn-primitives/slot';
function CustomText() {
return (
<Slot.Text className="text-blue-500">
{/* The `className` is passed down to the `View` */}
<Text />
</Slot.Text>
);
}

Image Slot

import * as Slot from '@rn-primitives/slot';
function CustomImage() {
return (
<Slot.Image source={{ uri: "https://avatars.githubusercontent.com/u/63797719?v=4" }}>
{/* The `source` is passed down to the `View` */}
<Image />
</Slot.Image>
);
}

Props

Inherits all props from its type of Slot.