0

I am new to react-native and i am trying to add drawer to my app. I am sharing my code with you.

export default class Dashboard extends React.Component {
constructor(props){
  super(props);
  this.state = {

   }
}
closeControlPanel = () => {
this._drawer.close()
};
 openControlPanel = () => {
 this._drawer.open()
 };
const drawerStyles = {
   drawer: { shadowColor: '#000000', shadowOpacity: 0.8,backgroundColor:'' shadowRadius: 3},
   main: {paddingLeft: 3},
}
render(){
 let drawerContent = [];
drawerContent.push(
     <View style={{ backgroundColor:'red', textAlign:'center' }}>
        <Text style={{ color:'#ffffff', fontSize:17, alignSelf:'center' }}>Hiiiiiiiiiii</Text>
     </View>
  );
<Drawer
      type="overlay"
      tapToClose={true}
      content = {drawerContent}
      openDrawerOffset={0.2} // 20% gap on the right side of drawer
      panCloseMask={0.2}
      closedDrawerOffset={-3}
      styles={drawerStyles}
      tweenHandler={(ratio) => ({
        main: { opacity:(2-ratio)/2 }
      })}
    >
    </Drawer>
}
}

can anyone tell me where should be content of drawer and how to write open and close drawer functionality.Thank you...

Chandler Bing
  • 293
  • 4
  • 18

1 Answers1

0

you have not given the ref property on Drawer

Try adding this .

<Drawer
      ref={c => this._drawer = c} // <==== Add this line
      type="overlay"
      tapToClose={true}
      content = {drawerContent}
      openDrawerOffset={0.2} // 20% gap on the right side of drawer
      panCloseMask={0.2}
      closedDrawerOffset={-3}
      styles={drawerStyles}
      tweenHandler={(ratio) => ({
        main: { opacity:(2-ratio)/2 }
      })}
    >
    </Drawer>
Anwar Gul
  • 665
  • 4
  • 15
  • Hello @anwar-gul Thanks for reply,I have added one line as per your answer "ref={(ref) => this._drawer = ref}" but it didn't work for me. Is there any other thing that i missing pls tell me if you know – Chandler Bing Mar 19 '20 at 13:41