import { Personalization } from '@contentful/optimization-react-native'
import { createClient } from 'contentful'
const contentful = createClient({ ... })
const baselineEntry = await contentful.getEntry('hero-baseline-id', {
include: 10 // Required to load all variant data
})
<ScrollProvider>
<Personalization baselineEntry={baselineEntry}>
{(resolvedEntry) => (
<HeroComponent
title={resolvedEntry.fields.title}
image={resolvedEntry.fields.image}
/>
)}
</Personalization>
</ScrollProvider>
<Personalization
baselineEntry={entry}
viewTimeMs={3000} // Track after 3s visible
threshold={0.9} // Require 90% visibility
>
{(resolvedEntry) => <YourComponent data={resolvedEntry.fields} />}
</Personalization>
function renderNestedContent(entry: Entry): React.JSX.Element {
return (
<Personalization baselineEntry={entry}>
{(resolvedEntry) => {
const nestedEntries = resolvedEntry.fields.nested as Entry[] | undefined
return (
<View>
<Text>{resolvedEntry.fields.title}</Text>
{nestedEntries?.map((nestedEntry) => (
<View key={nestedEntry.sys.id}>
{renderNestedContent(nestedEntry)}
</View>
))}
</View>
)
}}
</Personalization>
)
}
Personalization Component
Tracks views of personalized Contentful entry components (content entries in your CMS). This component handles variant resolution and automatically tracks component views when the entry meets visibility and time thresholds.
Important: "Component tracking" refers to tracking Contentful entry components, NOT React Native UI components. The term "component" comes from Contentful's terminology for personalized content entries.
For nested personalized entries, customers should handle nesting logic in their own implementation by wrapping each nested entry in its own
<Personalization>component. This gives full control over how nested content is detected and rendered.