How to use tween handler to adjust opacity

[jamesvphan]

My drawer component is of type "static" and I'm trying to adjust opacity of overlay through tween handler function. I'm not sure if it's how I set up my drawer components, but essentially, what I want to happen is have the user click on drawer menu, Menu slides into view, and MainContent view has a transparent overlay. However, with my current set up, this is having the opposite effect where clicking on drawer menu will slide Menu into view, with MainContent having no overlay and then closing the Menu component will slide the Menu out of view, but now the MainContent has no opacity applied. `

  <Drawer
    ref={(ref) => this._drawer = ref}
    type="static"
    content={
      <MainContent closeDrawer={this.closeDrawer} />
    }
    acceptDoubleTap
    onOpen={() => {
      console.log('onopen')
      this.setState({drawerOpen: true})
    }}
    onClose={() => {
      console.log('onclose')
      this.setState({drawerOpen: false})
    }}
    captureGestures={false}
    tweenDuration={100}
    panThreshold={0.08}
    styles={{main: {shadowColor: '#000000', shadowOpacity: 0.3, shadowRadius: 15}}}
    tweenHandler={(ratio) => ({
      main: { opacity: 1 },
      drawer: { opacity: 1 - ratio, },
    })}
    // disabled={this.state.drawerDisabled}
    // openDrawerOffset={(viewport) => {
    //   return 100
    // }}
    initializeOpen={true}
    closedDrawerOffset={() => 50}
    panOpenMask={0.2}
    negotiatePan
    >
    <Menu />
  </Drawer>`

The images below is an attempt to show what happens when closing the Menu. As it closes, the opacity lowers, leaving the MainContent component blank, which is the opposite effect I want.

[tybro0103]

Not sure if this is what you're going for or not, but kinda sounds like what I've done (it's like slack on iOS):

const drawerConfig = {
  type: 'static',
  openDrawerOffset: 0.1,
  tweenDuration: 300,
  tweenEasing: 'easeInOutCubic',
  captureGestures: 'open',
  negotiatePan: true,
  tapToClose: true,
  panOpenMask: 0.1,
  panThreshold: 0.25,
  styles: {
    main: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 10},
    mainOverlay: {backgroundColor: 'white', opacity: 0},
  },
  tweenHandler: (percent) => ({
    drawer: Drawer.tweenPresets.parallax(percent).drawer,
    mainOverlay: { opacity: percent * 0.8 },
  }),
};

Notice I'm setting opacity on mainOverlay

[YogendraShelke]

styles={{ mainOverlay: { backgroundColor: 'black', opacity: 0 }}} tweenHandler={(percent) => ({ mainOverlay: { opacity: percent * 0.6 } })}