Basic usage without preview panel:
const optimization = await Optimization.create({
clientId: 'your-client-id',
environment: 'master'
})
<OptimizationRoot instance={optimization}>
<App />
</OptimizationRoot>
With preview panel enabled:
import { createClient } from 'contentful'
const contentfulClient = createClient({
space: 'your-space-id',
accessToken: 'your-access-token'
})
<OptimizationRoot
instance={optimization}
previewPanel={{
enabled: true,
contentfulClient: contentfulClient,
fabPosition: { bottom: 50, right: 20 }
}}
>
<App />
</OptimizationRoot>
OptimizationRoot Component
A convenience wrapper that combines the OptimizationProvider with optional preview panel functionality. This is the recommended way to integrate the Optimization SDK into your React Native app.
The component follows the common "Root" pattern used by other React Native libraries like GestureHandlerRootView, SafeAreaProvider, and NavigationContainer.