JSX attributes must only be assigned a non-empty expression

Question

I am trying to create a custom drawer in react-navigation. However I am getting an error. The error is JSX attributes must only be assigned a non-empty expression. I have even create the array and maped it to show but still getting an error. Did i miss anything?

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';        

const navitems =[
    {
      name:'Home',
      nav:'classesnew',
    },
    {
      name:'Device',
      nav:'start',
    },
]


class DrawerContent extends React.Component{
  constructor(props) {
    super(props)
  }
  render(){
    return  (
      <Image source={require('../images/logo.png')}
      style={styles.container}>
              <View style={{justifyContent: 'center',
              alignItems: 'center',}}>
                <Image style={styles.image} source={{uri: ''}}/>
              </View>
              <View>
              {
                  navitems.map((l,i)=>{
                    return (
                      <TouchableOpacity
                          key={i}
                          style={{marginBottom:0.5}}
                          onPress={()=>{
                                        this.props.navigation.navigate(l.nav)
                                        }
                      }>
                        <View style={{flexDirection:'row', padding: 15, paddingLeft:0, backgroundColor:'#fff0', borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)', marginLeft: 20, marginRight:20}}>
                          <Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25,  }} color="#ffffff" />
                          <Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
                        </View>
                      </TouchableOpacity>)
                  })
              }
              </View>
          </Image>)
  }
}

const DrawerRoutes = (
  {
      Main: { screen: App, title: 'Main' },
      Device: { screen: Device, title: 'Device' },
  })

const Drawer = DrawerNavigator(DrawerRoutes ,{
  contentComponent:({navigation})=> <DrawerContent navigation={navigation} routes={DrawerRoutes} />,
});


Drawer.navigationOptions = {

  contentOptions: {
    activeBackgroundColor: '#ff5976',
    style: {
      backgroundColor: '#000000',
      zIndex: 100,
      paddingTop: 0
    }
  },
  header: ({ state, setParams, navigate, dispatch })  => ({
    visible: true,
    tintColor: '#ffffff',
    title: "LokaLocal",
    style: {
      backgroundColor: '#ff5976'
    },
    right: (
        <TouchableOpacity
          onPress={() => navigate('DrawerOpen')}
        >
          <Icon name="search" size={16} style={{ padding: 10, paddingRight: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
    left: (
        <TouchableOpacity
          onPress={}
        >
          <Icon name="bars" size={16} style={{ padding: 10, paddingLeft: 20 }} color="#ffffff" />
        </TouchableOpacity>
      ),
  })
}


export const Routes = StackNavigator(
  {
    Login: { screen: Login },
    Dashboard: {screen: Drawer},
  },
);

I am using react-navigation 1.0.0.bet.9

Solution 1

<TouchableOpacity
      onPress={}

Here , as the error mentioned , you can't assign an empy expression to a JSX attributes.

Solution 2

You can't have empty {} in JSX attributes. In here you can't have

<TouchableOpacity
    onPress={}
>

Fix this by having

<TouchableOpacity
    onPress={someFunction}
>