0

I have developed the side menu using react native side menu and want to know how to style the image to the design in the image below:

The application I developed

want to design like this

Is it just using the style to do it? If so can adjust the screen width of the side menu because didn't found any solution for it also. Thank you. The side menu I done using the react-native-side-menu.

//The side menu code:

<View style={{backgroundColor: '#ededed', marginBottom: 20}}>
      <TouchableHighlight>
        <Text>Menu</Text>
      </TouchableHighlight>
      <TouchableHighlight onPress={this.TodoList}>
        <Text>WR List</Text>
      </TouchableHighlight>
      <TouchableHighlight onPress={this.addNewTodo}>
        <Text>Create WR</Text>
      </TouchableHighlight>
      </View>
// the style

menu: {
    flex: 1,
    width: window.width,
    height: window.height,
    padding: 0,
  },

I have tried the style follow the react-native-elements which you mentioned just now and I want to style it like the example image but dunno how to do it. And another question is the react-native-side-menu cannot adjust the screen width of it because when opened the side menu it will cover 2/3 width of the screen, is it possible to adjust it? Thank you

johnhour
  • 119
  • 3
  • 14
  • what is preventing you to use "style" like this: https://react-native-training.github.io/react-native-elements/API/side_menu/ ?? can you share your code if possible? – openrijal Aug 02 '17 at 06:21
  • I dunno how to style like the example image above, please find the code below and advice of how doing it, thank you~~~ – johnhour Aug 02 '17 at 07:17
  • Sir, please find the screenshot. I got post the question in the community but they said it seems to be outdated... https://i.stack.imgur.com/Jc3Ch.png – johnhour Oct 05 '17 at 01:45

2 Answers2

0

Nvm, I use another alternative way to do it which is using Drawer Layout Android from react native library because it can be use to adjust the drawerWidth and can be use navigate to the other pages. Below is the documentation for Drawer Layout Android: http://blog.csdn.net/github_33304260/article/details/55517995

johnhour
  • 119
  • 3
  • 14
0

Maybe you can follow this idea. I use library react-native-drawer-layout for create side menu.

Actually the idea can show like :

//Main apps

enter image description here

//When button Menu cliked.

enter image description here

manggaraaaa
  • 802
  • 1
  • 8
  • 23
  • Actually I successfully use Drawer Layout Android which from react native and I can design as the image shown above btw thanks for the help...:) – johnhour Aug 03 '17 at 07:41
  • wow... cool. you're welcome. i glad to help you. can you accept my answer? ;)) – manggaraaaa Aug 03 '17 at 08:00
  • Hi, Sir, I got try your example using react-native-drawer-layout but I got this error message "Cannot read property of 'isRTL' undefined" in Android & iOS platform. May you help me with this problem? Thank you – johnhour Aug 07 '17 at 04:42
  • Hi @johnhour .. Have you tried to remove the `node_module` folder, and try to run `npm install` again and install library you use in your project. – manggaraaaa Aug 07 '17 at 07:13
  • can you show more clearly the error with SC so maybe i can see what's going on actually.. because in my emulator [my code](https://stackoverflow.com/questions/45451119/react-native-action-bar-and-react-native-menu/45456894#45456894) is worked perfectly. – manggaraaaa Aug 07 '17 at 10:45
  • Hi, I was able to create the drawer menu in Android & iOS platform using this https://www.npmjs.com/package/react-native-drawer-menu. Thanks – johnhour Aug 08 '17 at 02:12
  • Cool @johnhour .. i think `react-native-drawer-menu` is also good...keep fighting! – manggaraaaa Aug 08 '17 at 03:53