Skip to content

Hover Card Primitive

Allows users with vision to preview the content hidden behind an element before hovering or pressing.

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/hover-card
import * as HoverCardPrimitive from '@rn-primitives/hover-card';
import { Text, View } from 'react-native';
function Example() {
return (
<HoverCardPrimitive.Root>
<HoverCardPrimitive.Trigger>
<Text>@nextjs</Text>
</HoverCardPrimitive.Trigger>
<HoverCardPrimitive.Content>
<View>
<Text>@nextjs</Text>
<Text>
The React Framework – created and maintained by @vercel.
</Text>
<View>
<Text>
Joined December 2021
</Text>
</View>
</View>
</HoverCardPrimitive.Content>
</HoverCardPrimitive.Root>
);
}

Extends View props

PropTypeNote
onOpenChange(value: boolean) => void(optional)
asChildboolean(optional)
relativeTo’longPress’ | ‘trigger’Native Only_(optional)_

Extends Pressable props

PropTypeNote
asChildboolean(optional)
MethodsargsNote
openopens the hover card
closecloses the hover card
PropTypeNote
children*React.ReactNode
forceMounttrue | undefined(optional)
hostNamestringWeb Only (optional)
containerHTMLElement | null | undefinedWeb Only (optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined;(optional)

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined(optional)
alignOffsetnumber(optional)
insetsInsets(optional)
avoidCollisionsboolean(optional)
align’start’ | ‘center’ | ‘end’(optional)
side’top’ | ‘bottom’(optional)
sideOffsetnumber(optional)
disablePositioningStylebooleanNative Only (optional)
collisionBoundaryElement | null | Array<Element | null>Web Only (optional)
sticky’partial’ | ‘always’Web Only (optional)
hideWhenDetachedbooleanWeb Only (optional)

Must be used within a Root component. It provides the following values from the dropdown menu: open, and onOpenChange.