React Native embeddingBeta
Komo cards can be embedded into your React Native application through Komo's NPM package.
Installation
npm install @komo-tech/react-native-widgetsNOTE: This package (opens in a new tab) has a peer dependency on react-native-webview (opens in a new tab), and recommends the latest major version, 11.x.
Usage
From the Komo portal, navigate to the settings of the card to be embedded. Select the Embed tab and copy the Native embed URL in the right sidebar. Pass as a prop to the KomoCardWidget, along with any optional styling or render props detailed below.
import { KomoCardWidget } from '@komo-tech/react-native-widgets';
// ...
<KomoCardWidget embedUrl={KomoCardNativeEmbedUrl} />;Props
| Name | Type | Description | Optional |
|---|---|---|---|
| embedUrl | string | The native embed url taken from the Komo portal settings of the card to be embedded | false |
| appId | string | Useful for the embedded Komo content to identify where it's being embedded | true |
| containerStyle | StyleProp<ViewStyle> | Style overrides for the container of the card cover (including both image and CTA button) | true |
| coverImageStyle | StyleProp<ImageStyle> | Style overrides for the image of the card cover | true |
| buttonStyle | StyleProp<ViewStyle> | Style overrides for the CTA button of the card cover | true |
| buttonTextStyle | StyleProp<TextStyle> | Style overrides for the CTA button text of the card cover | true |
| coverLoader | ReactNode | The loader shown while the cover is loading (defaults to a skeleton card loader) | true |
| hideCoverButton | boolean | Hide the CTA button of the cover | true |
| modalHeader | ReactNode | The header of the modal to render instead of the default | true |
| onError | (error) => void | Callback on error | true |
| onModalClose | () => void | Callback on modal close | true |
| onModalOpen | () => void | Callback on modal open | true |
| shareClickUrl | string | Override of the url that redirects a user when clicking on a share link | true |