Skip to main content

FeatureHighlight

<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')}
/>
APIThis is the list of additional props for the component

borderColor
string
​

Color of the border around the highlighted element

borderRadius
number
​

Border radius for the border corners around the highlighted element

borderWidth
number
​

Width of the border around the highlighted element

confirmButtonProps
ButtonProps
​

Props that will be passed to the dismiss button

getTarget
() => any
​

Callback that extract the ref of the element to be highlighted

highlightFrame
HighlightFrame
​

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

innerPadding
number
​

The padding of the highlight frame around the highlighted element's frame (only when passing ref in 'getTarget'). Default is 10

message
string
​

Message to be displayed

messageNumberOfLines
number
​

Message's max number of lines

messageStyle
TextStyle
​

Message text style

minimumRectSize
RectSize
​

The minimum size of the highlighted component. Default is {width: 56, height: 56}Android API 21+, and only when passing a ref in 'getTarget'

onBackgroundPress
TouchableWithoutFeedbackProps['onPress']
​

Called the background pressed

overlayColor
string
​

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

pageControlProps
PageControlProps
​

PageControl component's props

testID
string
​

The test id for e2e tests

textColor
string
​

Color of the content's text

title
string
​

Title of the content to be displayed

titleNumberOfLines
number
​

Title's max number of lines

titleStyle
TextStyle
​

Title text style

visible
boolean
​

Determines if to present the feature highlight component