react-native-klarna-inapp-sdk/lib/module/KlarnaOSMView.js

This library wraps Klarna Mobile SDK and exposes its functionality as React Native components.

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { KlarnaTheme } from './types/common/KlarnaTheme';
import RNKlarnaOSMView, { Commands as RNKlarnaOSMViewCommands } from './specs/KlarnaOSMViewNativeComponent';
export class KlarnaOSMView extends Component {
  isOSMViewReady = false;
  hasError = false;
  constructor(props) {
    super(props);
    this.state = {
      nativeViewHeight: 0
    };
    this.osmViewRef = /*#__PURE__*/React.createRef();
  }
  componentDidUpdate(prevProps) {
    if (this.isOSMViewReady && (prevProps.clientId !== this.props.clientId || prevProps.placementKey !== this.props.placementKey || prevProps.locale !== this.props.locale || prevProps.purchaseAmount !== this.props.purchaseAmount || prevProps.environment !== this.props.environment || prevProps.region !== this.props.region || prevProps.theme !== this.props.theme || prevProps.backgroundColor !== this.props.backgroundColor || prevProps.textColor !== this.props.textColor)) {
      this.renderNative();
    }
  }
  componentWillUnmount() {
    this.isOSMViewReady = false;
  }
  render() {
    return /*#__PURE__*/React.createElement(RNKlarnaOSMView, {
      ref: this.osmViewRef,
      style: [styles.container, this.props.style, {
        height: this.state.nativeViewHeight
      }],
      clientId: this.props.clientId,
      placementKey: this.props.placementKey,
      locale: this.props.locale,
      purchaseAmount: this.props.purchaseAmount,
      environment: this.props.environment,
      region: this.props.region,
      theme: this.props.theme ?? KlarnaTheme.Automatic,
      backgroundColor: this.props.backgroundColor ?? '',
      textColor: this.props.textColor ?? '',
      returnUrl: this.props.returnUrl ?? '',
      onError: event => {
        var _this$props$onError, _this$props;
        const mobileSdkError = {
          isFatal: event.nativeEvent.error.isFatal,
          message: event.nativeEvent.error.message,
          name: event.nativeEvent.error.name
        };
        this.hasError = true;
        this.setState({
          nativeViewHeight: 0
        });
        (_this$props$onError = (_this$props = this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props, mobileSdkError);
      },
      onResized: event => {
        if (this.hasError) {
          return;
        }
        const newHeight = Number(event.nativeEvent.height);
        if (!Number.isNaN(newHeight) && newHeight !== this.state.nativeViewHeight) {
          this.setState({
            nativeViewHeight: newHeight
          });
        }
      },
      onOSMViewReady: () => {
        this.isOSMViewReady = true;
        setTimeout(() => this.renderNative(), 0);
      }
    });
  }
  renderNative = () => {
    this.hasError = false;
    const view = this.osmViewRef.current;
    if (view != null) {
      RNKlarnaOSMViewCommands.render(view);
    }
  };
}
const styles = StyleSheet.create({
  container: {
    width: '100%',
    overflow: 'hidden'
  }
});
export default KlarnaOSMView;
//# sourceMappingURL=KlarnaOSMView.js.map