DrawerLayoutAndroid
Example of use
React component that wraps the platform DrawerLayout
(Android only). The Drawer (typically used for navigation) is rendered with renderNavigationView
prop and direct children are the main view (where your content goes).
default
let component = ReasonReact.statelessComponent("MyComponent");
let make = _children => {
...component,
render: _self =>
<DrawerLayoutAndroid
renderNavigationView=(
() => <Text> (ReasonReact.string("Drawer!")) </Text>
)>
<Text> (ReasonReact.string("Drawer!")) </Text>
</DrawerLayoutAndroid>,
};
Props
renderNavigationView
The navigation view that will be rendered inside Drawer.
renderNavigationView: unit => ReasonReact.reactElement
drawerPosition
Specifies the side of the screen from which the drawer will slide in.
drawerPosition: [ | `left | `right]=?,
onDrawerClose
Function called on drawer close
onDrawerClose: unit => unit=?
drawerWidth
Specifies the width of the drawer.
drawerWidth: int=?
keyboardDismissMode
Specifies the width of the drawer. I accepts 2 variants:
`none
(default) - drags do not dismiss the keyboard`onDrag
- the keyboard is dismissed when a drag begins
keyboardDismissMode: [ | `none | `onDrag]=?
drawerLockMode
Specifies the lock mode of the drawer. Drawer can be in 3 states:
`unlocked
(default) - drawer will respond normally to touch gestures`lockedClosed
- drawer will stay closed and not respond to gestures`lockedOpen
- drawer will stay opened and not respond to gestures
drawerLockMode: [ | `unlocked | `lockedClosed | `lockedOpen]=?
onDrawerOpen
Function called on drawer open.
onDrawerOpen: unit => unit=?
onDrawerSlide
Function called whenever there is an interaction with the navigation view.
onDrawerSlide: unit => unit=?
onDrawerStateChanged
Function called when the drawer state has changed.
onDrawerStateChanged: string => unit=?
drawerBackgroundColor
Background color of the Drawer.
drawerBackgroundColor: string=?
statusBarBackgroundColor
Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar.
statusBarBackgroundColor: string=?
Methods
openDrawer()
Opens the drawer.
closeDrawer()
Closes the drawer.
Example with methods
To use openDrawer
and closeDrawer
methods you have to call them on DrawerLayoutAndroid
ref
. See ReasonReact docs to learn more about using ref
s.
type action;
type state = {drawerRef: ref(option(ReasonReact.reactRef))};
let setDrawerRef = (theRef, {ReasonReact.state}) =>
state.drawerRef := Js.Nullable.toOption(theRef);
let component = ReasonReact.reducerComponent("ExampleContent");
let handleOpenPress = (_, {ReasonReact.state}) =>
switch (state.drawerRef^) {
| None => ()
| Some(r) => ReasonReact.refToJsObj(r)##openDrawer()
};
let handleClosePress = (_, {ReasonReact.state}) =>
switch (state.drawerRef^) {
| None => ()
| Some(r) => ReasonReact.refToJsObj(r)##closeDrawer()
};
let make = _children => {
...component,
initialState: () => {drawerRef: ref(None)},
reducer: (_action: action, _state: state) => ReasonReact.NoUpdate,
render: self =>
<DrawerLayoutAndroid
renderNavigationView=(
() =>
<Button title="CLOSE" onPress=(self.handle(handleClosePress)) />
)
ref=(self.handle(setDrawerRef))>
<Button title="OPEN" onPress=(self.handle(handleOpenPress)) />
</DrawerLayoutAndroid>,
};