How to overlap two boxes(Nativebase)

I am using nativebase()

I have created two boxes aligned and I need the left one overlapped by right on the edge.

here is the code:

function TopRating({ style, rating, ratingCount }) {
  return (
    <View style={{ flexDirection: "row-reverse", padding: 15 }}>
      <Box
        width="25%"
        rounded="xl"
        p="2"
        bg={theme.magenta}
        _text={{
          fontSize: "md",
          fontWeight: "medium",
          color: "warmGray.50",
          letterSpacing: "lg"
        }}
        shadow={2}
      >
        This is a Box
      </Box>
      <Box
        width="25%"
        rounded="xl"
        p="2"
        bg="#ffffff"
        _text={{
          fontSize: "md",
          fontWeight: "medium",
          color: "#000000",
          letterSpacing: "lg"
        }}
        shadow={2}
      >
        This is a Box
      </Box>
    </View>
  );
}

Expect it to look like this:

click to see image