Kureev / react-native-side-menu

Side menu component for React Native
MIT License
2.21k stars 434 forks source link

FlexBox issues? #309

Closed patrickchoi closed 7 years ago

patrickchoi commented 7 years ago

Apologies, I'm new to React Native so this maybe a really stupid problem. I'm getting "Adjacent JSX elements must be wrapped in an enclosing tag" errors

Here's my code:

const SideMenu = require('react-native-side-menu');

class ContentView extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+Control+Z for dev menu
        </Text>
      </View>
    );
  }
}

class Test extends Component {
  render() {
    const menu = <Menu navigator={navigator}/>;
    return (
      <SideMenu menu={menu}>
        <ContentView/>
      </SideMenu>

      <View style={styles.container}>

        <View style={styles.navBar}>
          <Text style={styles.navBarButton}>Back</Text>
          <Text style={styles.navBarHeader}>Awesome App</Text>
          <Text style={styles.navBarButton}>More</Text>
        </View>
        <View style={styles.content}>
          <Text style={styles.text}>
            Welcome to Awesome App!
          </Text>
        </View>
        <View style={styles.tabBar}>
          <View style={[styles.tabBarButton, styles.button1]} />
          <View style={[styles.tabBarButton, styles.button2]} />
          <View style={[styles.tabBarButton, styles.button3]} />
          <View style={[styles.tabBarButton, styles.button4]} />
          <View style={[styles.tabBarButton, styles.button5]} />
        </View>
      </View>
    );
  }
}
Kureev commented 7 years ago

Hi @patrickchoi!

<SideMenu> and <View> should have a common parent. Wrap your render content into <View>, so it'll look like this:

render() {
  return (
    <View>
      <SideMenu />
      <View>...</View>
    </View>
  );
}
patrickchoi commented 7 years ago

Thanks! That seemed to got past it. But now I'm getting this:

image

Kureev commented 7 years ago

Unfortunately, I don't know anything about LearningFlexbox component. Please, check appropriate repository (or your code if it isn't a third-party dependency).

On a side note: I'm trying to keep issues in this repo related to the project itself. If you have generic React/RN questions, you may ask them on StackOverflow or ping me on Twitter (@kureevalexey). If I have time, I will try to help you :)

Best of luck!