Class App

apps/managed_context_example/ManagedContextExample.tsx:72–181

}

export class App extends StatefulComponent<{}, State> {
  state: State = {
    rasterMethod: EmbeddedPlatformViewRasterMethod.FAST,
    downscaleRatioIndex: 0,
  };

  onRender(): void {
    <view width={'100%'} height={'100%'} paddingTop={Device.getDisplayTopInset()} backgroundColor="white">
      <Section name="Preview">
        {
          <layout height={COMPONENT_HEIGHT}>
            <InnerComponent />
          </layout>
        }
      </Section>
      <Section name="Rasterized">
        {<image src={this.state.rasterizedAsset} width={'100%'} height={COMPONENT_HEIGHT} />}
      </Section>
      <Section name="Controls">
        <layout flexDirection="column" padding={8}>
          <Button
            title={`Raster method: ${
              this.state.rasterMethod === EmbeddedPlatformViewRasterMethod.FAST ? 'Fast' : 'Accurate'
            }`}
            onTap={this.toggleRasterMethod}
          />
          <Button
            title={`Downscale ratio: ${DOWNSCALE_RATIO[this.state.downscaleRatioIndex]}`}
            onTap={this.toggleDownscaleRatio}
          />
          <Button title="Rasterize" onTap={this.rasterize} />
        </layout>
      </Section>
    </view>;
  }

  toggleDownscaleRatio = () => {
    const nextDownscaleRatioIndex = (this.state.downscaleRatioIndex + 1) % DOWNSCALE_RATIO.length;
    this.setState({
      downscaleRatioIndex: nextDownscaleRatioIndex,
    });
  };

  toggleRasterMethod = () => {
    this.setState({
      rasterMethod:
        this.state.rasterMethod === EmbeddedPlatformViewRasterMethod.FAST
          ? EmbeddedPlatformViewRasterMethod.ACCURATE
          : EmbeddedPlatformViewRasterMethod.FAST,
    });
  };

  rasterize = () => {
    this.doRasterize()
      .then(asset => {
        console.log('Rasterized asset:', asset);
        this.setState({ rasterizedAsset: asset });
      })