xAxis.js

import React from 'react';
import { ART } from 'react-native';

import { scaleBand } from 'd3-scale';
import moment from 'moment';

const {
  Surface,
  Group,
  Text
} = ART;


export default function xAxis({ width, height }) {
  let axisValues = this.generateValues();

  return (
    <Surface width={width} height={height}>
      <Group x={69}>
        {axisValues.days.map((item, index) => (
          <Text
            key={index}
            fill="#fff"
            x={this.getValuePosition(index, axisValues.days, width)}
            y={0}
            font={`12px Arial`}
            alignment='center'
            opacity={index === 6 ? 1: 0.6}
            >
              {item}
          </Text>
        ))}

        {axisValues.nums.map((item, index) => (
          <Text
            key={index}
            fill="#fff"
            x={this.getValuePosition(index, axisValues.nums, width)}
            y={15}
            font={`12px Arial`}
            alignment='center'
            opacity={index === 6 ? 1: 0.6}
            >
              {item}
          </Text>
        ))}
      </Group>
    </Surface>
  );
}

generateValues = () => {
  let days = [];
  let nums = [];
  Array(7).fill().forEach((i, index) => {
    days.push(moment().subtract(index, 'days').format('ddd'));
    nums.push(moment().subtract(index, 'days').format('D'));
  });
  return { days: days.reverse(), nums: nums.reverse() }
}

getValuePosition = (index, values, width) => {
  let x = scaleBand().rangeRound([20, width - 75])
  x.domain(values.map(d => {
    return d;
  }));
  return x(values[index]);
}