CODEWITHSUNDEEP
javascriptreact-native
user567
user567

Reputation: 3852

Error when Adjacent elements with react native

I am very new with react-native and have trouble with this code:

  import React, { Component, PropTypes, View } from 'react'
import { connect } from 'react-redux'
import StartupActions from '../Redux/StartupRedux'
import ReduxPersist from '../Config/ReduxPersist'

import { StackNavigator } from 'react-navigation'

import WelcomeContainer from '../Containers/WelcomeContainer'
import SettingsContainer from '../Containers/SettingsContainer'
import About from '../Components/About'
import { Header } from 'react-native-elements'



const AppNavigator = StackNavigator({
  Home: {
    screen: WelcomeContainer,
    navigationOptions: {
      title: 'Multi Language Sample App' // we advice using something static like your app's name or company name on the startup screen
    }
  },
  Settings: {
  screen: SettingsContainer,
  navigationOptions: ({navigation}) => ({
    title: navigation.state.params.title
  })
},
  About: {
  screen: About,
  navigationOptions: ({navigation}) => ({
    title: navigation.state.params.title
  })
}
})

class RootContainer extends Component {
  componentDidMount() {
    if (!ReduxPersist.active) {
      this.props.startup()
    }
  }

  render() {
    return (
      <View>
      <AppNavigator />
      <AppNavigator />
      </View>
    )
  }
}

const mapStateToDispatch = dispatch => ({
  startup: () => dispatch(StartupActions.startup())
})


export default connect(null, mapStateToDispatch)(RootContainer)

RootContainer.propTypes = {
  startup: PropTypes.func.isRequired
}

I get the error : Adjacent JSX elements must be wrapped in an enclosing tag.

I found different posts with the same issue but was not able to solve my problem.

Upvotes: 0

Views: 144

Answers (2)

bennygenel
bennygenel

Reputation: 24670

In react you need to return a single component/element in your render method.

render() {
    return (
      <View>
        <AppNavigator />
        <Button
          large
          icon={{name: 'envira', type: 'font-awesome'}}
          title='LARGE WITH RIGHT ICON'
        />
     </View>
    )
  }
}

Since v0.16 of react you can return an array of elements/components. More info here.

New render return types: fragments and strings You can now return an array of elements from a component’s render method. Like with other arrays, you’ll need to add a key to each element to avoid the key warning

render() {
    return (
        [<AppNavigator />, <Button large icon={{name: 'envira', type: 'font-awesome'}} title='LARGE WITH RIGHT ICON' />]
    )
  }
}

Upvotes: 0

chakradhar kasturi
chakradhar kasturi

Reputation: 689

Enclose you code inside view or another parent element.

render() {
    return (
       <View>
            <AppNavigator />
            <Button
                 large
                 icon={{name: 'envira', type: 'font-awesome'}}
                 title='LARGE WITH RIGHT ICON' />
      </View>
      )
  }
}

Upvotes: 1

Related Questions