Flyout
Old Architecture Only: This documentation describes a feature only supported by React Native's "Old" or "Legacy" Architecture. We are still in the progress of updating all of the documentation, but in the meantime, for information on React Native architectures in React Native Windows, see New vs. Old Architecture.
Reference
Props
Inherits View Props.
horizontalOffset
Specifies horizontal offset from spawn point.
| type | required |
|---|---|
| number | No |
verticalOffset
Specifies vertical offset from spawn point.
| type | required |
|---|---|
| number | No |
isLightDismissEnabled
Whether or not the flyout will close if the user clicks outside of it.
Set to false if you want your flyout to be modal.
| type | required |
|---|---|
| bool | No |
isOverlayEnabled
Specifies whether the area outside the flyout is darkened.
| type | required |
|---|---|
| bool | No |
isOpen
A boolean that returns true when the flyout is active/open, and false when it's not.
| type | required |
|---|---|
| bool | No |
onDismiss
An event that fires when the flyout is dismissed.
This must update the isOpen property.
| type | required |
|---|---|
| function | Yes |
target
A component that the flyout is attached to and will show from when isOpen is true.
| type | required |
|---|---|
React.ReactNode | Yes |
placement
The relative placement of the flyout in relation to the target set.
Accepted placements value types are:
topbottomleftrightfulltop-edge-aligned-lefttop-edge-aligned-rightbottom-edge-aligned-leftbottom-edge-aligned-rightleft-edge-aligned-topright-edge-aligned-topleft-edge-aligned-bottomright-edge-aligned-bottom
| type | required |
|---|---|
| type | No |
Examples
Examples can be found in the React Native Gallery App available in the Microsoft Store