Optimizely will be sunsetting Full Stack Experimentation on July 29, 2024. See the recommended Feature Experimentation migration timeline and documentation.

Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket


This topic describes the OptimizelyVariation, which is used with a parent OptimizelyExperiment to render different content for different variations.

OptimizelyVariation is used with a parent OptimizelyExperiment to render different content for different variations.


SDK v2.2.0


The OptimizelyExperiment component buckets a user into one of the variations defined on the experiment and passes the variation_key of the variation assigned to the children component. The OptimizelyVariation component labeled with the variation prop equal to the variation_key will be rendered inside the OptimizelyExperiment component.


The table below lists the required and optional props for the OptimizelyExperiment Component in the React Native SDK.

variationstringThe key of the variation for which content should be rendered. Variation keys are in the experiment details page.
booleanWhen true, content will be rendered in the default case (null variation returned from the OptimizelyExperiment)
childrenReact.ReactNode | FunctionContent or function returning content to be rendered based on the enabled status and variable values of the feature. See usage examples below.


If your experiment key was exp1 and that experiment had a variation simple and detailed, you could use the ExperimentComponent to render a SimpleComponent or a DetailedComponent depending on whether the user was assigned the 'simple' variation or 'detailed' variation. If for some reason Optimizely did not initialize in the 3000 ms timeout, then the default variation would be rendered instead:

import {
} from '@optimizely/react-sdk'

function ExperimentComponent() {
  return (
    <OptimizelyExperiment experiment="exp1" timeout={3000}>
      <OptimizelyVariation variation="simple">
        <SimpleComponent />

      <OptimizelyVariation variation="detailed">
        <ComplexComponent />

      <OptimizelyVariation default>
        <SimpleComponent />

Source files

The language/platform source files containing the implementation for React is index.ts.