root-two / react-native-drawer

React Native Drawer
MIT License
2.53k stars 392 forks source link

Drawer Disappears completely #281

Open aayush-k opened 7 years ago

aayush-k commented 7 years ago

I've copied the exact syntax and followed the instructions provided to the best of my ability (still relatively new to react native so please bear with me!) but for some reason whenever I wrap my main view with the drawer component it all disappears and disappears completely. The text that is supposed to appear beneath the drawer component in my app now appears where the drawer component should be, indicating to me that the component isn't even invisible but it is completely missing? Any help would be greatly appreciated!

Here's my render method for the relevant component, where I used the simplest drawer possible: `render() {

return (
  <View style={styles.layout}>
    <HeaderBar openDrawer={() => this.openDrawer()} />
    <Navigation
      ref="navigation"
      toFeed={() => this.toFeed()}
      toData={() => this.toData()}
      toSettings={() => this.toSettings()}
    />
    <Drawer
      ref={(ref) => this.navDrawer = ref}
      content={<ControlPanel />}
    >
      <View>
        <Swiper
          ref={(swiper) => { ourSwiper = swiper; }}
          style={styles.wrapper}
          onMomentumScrollEnd={() => this.updateIndex()}
          loop={false}
          index={this.state.index}
        >
          <View style={styles.slide1}>
            <SettingsPage />
          </View>
          <View style={styles.slide2}>
            <GraphPage />
          </View>
          <View style={styles.slide3}>
            <DataList />
          </View>
        </Swiper>
      </View>
    </Drawer>
    <Text>After Drawer Statement</Text>
  </View>
);

}`

In case it helps, here's my package.json: { "name": "Home", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "art": "^0.10.1", "babel-polyfill": "^6.23.0", "bugsnag-react-native": "^1.2.4", "d3": "^4.4.2", "react": "15.4.2", "react-addons-shallow-compare": "^15.3.2", "react-native": "^0.41.2", "react-native-accordion": "^1.0.1", "react-native-button": "^1.7.1", "react-native-chart": "^1.0.8-beta", "react-native-drawer": "^2.3.0", "react-native-pathjs-charts": "0.0.26", "react-native-slider": "^0.9.1", "react-native-svg": "4.5.0", "react-native-swiper": "^1.5.2" }, "devDependencies": { "babel-jest": "18.0.0", "babel-preset-react-native": "1.9.1", "jest": "18.1.0", "react-test-renderer": "15.4.2", "eslint-config-rallycoding": "^3.2.0" }, "jest": { "preset": "react-native" } }

techrah commented 7 years ago

It might help to show your styles too. Is this on iOS or Android. I'm currently having rendering issues on iOS that doesn't happen on Android.