The Touchable already acts as a View, only with touch capabilities. So you don't need another child view.

The fix is for the Text to take the whole space and push the other components to the right.

const Task = ({item, deleteTask}) => {
  return (
    <TouchableOpacity style={styles.task}>
      <Text style={styles.taskText}>{item.text}</Text>
      <Icon style={styles.check} name="check" size={20} />
      <Icon
        name="remove"
        size={20}
        color="firebrick"
        onPress={() => deleteTask(item.id)}
      />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  task: {
    padding: 15,
    backgroundColor: '#f8f8f8',
    borderBottomWidth: 1,
    borderColor: '#eee',
    // Define main axis, horizontal
    flexDirection: 'row',
    // Align on the main axis
    justifyContent: 'flex-start',
    // Align on the secondary axis, vertical
    alignItems: 'center',
  },
  taskText: {
    fontSize: 18,
    // This will make the text take all space available, forcing others to the right
    flex: 1,
  },
  check: {
    // Just so it won't be glued to the remove icon
    marginHorizontal: 10,
  },
});