React native elements - Apply condition style for badge backgroundColor in listItem

Question

I'm new to react native. I'm using "react-native-elements": "^1.2.7". I'm trying to change the background color of my badge in listItem following conditions. But I got an error.

Here is my code

import React from 'react';
import { View, Text } from 'react-native';
import { ListItem, Badge } from 'react-native-elements';
import { TASK }  from '../../model';
import { APP_COLORS } from '../../styles/color.js';

const TaskList = ({ taskList }) => (
  <View>
    {
      taskList.map(task => (
        <ListItem
          key={task.id}
          title={task.content}
          badge={{
            value: task.status,
            badgeStyle: {
              task.status === TASK.todoStatus
                ? { backgroundColor: APP_COLORS.accent }
                : { backgroundColor: APP_COLORS.lightPrimaryColor }
            }
          }}
          chevron
          bottomDivider
        />
      ))
    }
  </View>
);


export default TaskList;

And error displayed is: "Unexpected token, expected ","...

Could please help me to figure this out

Answer 1

try this code instead:

import React from 'react';
import { View, Text } from 'react-native';
import { ListItem, Badge } from 'react-native-elements';
import { TASK } from '../../model';
import { APP_COLORS } from '../../styles/color.js';

const TaskList = ({ taskList }) => (
  <View>
    {
        taskList.map(task => (
          <ListItem
            key={task.id}
            title={task.content}
            badge={{
              value: task.status,
              badgeStyle: {{
                backgroundColor: task.status === TASK.todoStatus ? APP_COLORS.accent : APP_COLORS.lightPrimaryColor
              }}
            }}
            chevron
            bottomDivider
          />
        ))
      }
  </View>
);


export default TaskList;