Skip to main content

FeatureHighlight

Component for feature discovery
(code example)

note

FeatureHighlight component must be a direct child of the root view returned in render(),If the element to be highlighted doesn't have a style attribute add 'style={{opacity: 1}}' so the Android OS can detect it,FeatureHighlight uses a native library. You MUST add and link the native library to both iOS and Android projects. For instruction please see: https://facebook.github.io/react-native/docs/linking-libraries-ios.html

Usage​

Live Editor
<FeatureHighlight
 visible={isVisible}
 title={'Title'}
 message={'Message goes here'}
 getTarget={targets[currentTarget]}
 confirmButtonProps={{label: 'Got It', onPress: () => console.log('confirmed')}}
 onBackgroundPress={() => console.log('background pressed')}
/>
Result
Loading...

API​

borderColor​

Color of the border around the highlighted element string

borderRadius​

Border radius for the border corners around the highlighted element number

borderWidth​

Width of the border around the highlighted element number

confirmButtonProps​

Props that will be passed to the dismiss button ButtonProps

getTarget​

Callback that extract the ref of the element to be highlighted () => any

highlightFrame​

Frame of the area to highlight {x, y, width, height} HighlightFrame

innerPadding​

The padding of the highlight frame around the highlighted element's frame (only when passing ref in 'getTarget') number

message​

Message to be displayed string

messageNumberOfLines​

Message's max number of lines number

messageStyle​

Message text style TextStyle

minimumRectSize​

Android API 21+, and only when passing a ref in 'getTarget'​

The minimum size of the highlighted component RectSize

onBackgroundPress​

Called the background pressed TouchableWithoutFeedbackProps['onPress']

overlayColor​

Color of the content's background (usually includes alpha for transparency) string

pageControlProps​

PageControl component's props PageControlProps

testID​

The test id for e2e tests string

textColor​

Color of the content's text string

title​

Title of the content to be displayed string

titleNumberOfLines​

Title's max number of lines number

titleStyle​

Title text style TextStyle

visible​

Determines if to present the feature highlight component boolean