Edit

Share via

ReactNative Renderer

  • Article

A community-supported ReactNative renderer for Adaptive Cards, maintained by BigThinkCode.

Important

Community Support Only. This renderer is in active development but is maintained outside of Microsoft. As such, we cannot guarantee any SLA for this SDK. Please see our Support policy for more details.

Getting started

Install the package

npm install adaptivecards-reactnative

Import the root component

import AdaptiveCard from 'adaptivecards-reactnative'

Render the component with required props

<AdaptiveCard payload={} 
               hostConfig={}
               themeConfig={}
               onExecuteAction={} 
               onParseError={} 
               containerStyle={{
                    width:100, 
                    height: 100, 
                    flexGrow:1, 
                    backgroundColor:'lightblue'
               }}
               contentContainerStyle={{
                    flexGrow: 1, 
                    justifyContent: 'space-between'
               }}
               contentHeight={500} 
               ref="referenceVariable"/>

Full documentation and source code

Customization and Themeing

To customize the rendering, please see the theme config documentation.