How to Create a Dashed line using React Native SVG

#react #tutorial #reactnative #javascript

Overview

One of the things you may probably need to add to an application is a dash line, obviously there are libraries for this if you wanted to implement it in any of the situations and nowadays you have libraries that already have this option if you want to use it (such as charts).

However, sometimes we like to have a little more control or you simply already have a dependency to create Svg's and don't want to install another one. Today I'm going to explain how we can create a simple dash line using React Native SVG.

Let's code

Let's install the following dependencies:



npm install react-native-svg

Now we can start working on our component.



// @src/App.js
import React from 'react';

const App = () => {
  return (
    // ...
  );
};

export default App;

Now let's import Svg, G (Group) and Rect (rectangle) from react-native-svg, so we can start working on our dash line.



// @src/App.js
import React from 'react';
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  return (
    // ...
  );
};

export default App;

First let's create a single line to get a visual idea of what we're doing. But before that, let's first establish the screen space that will be used, using the Svg tag.



// @src/App.js
import React from 'react';
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  return (
    <Svg height="11" width="100%">
      // ...
    </Svg>
  );
};

export default App;

For now we are not going to use the G (group) tag because we are going to try to have only one dash on the screen. For this we will use the Rect tag and we will pass the rectangle size we want, the background color and the width.



// @src/App.js
import React from 'react';
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  return (
    <Svg height="11" width="100%">
      <Rect
        x="11"
        y="10"
        width="10"
        height="1"
        fill="#FED049"
      />
    </Svg>
  );
};

export default App;

You should now have a result similar to this:

Now we want to have a line that occupies the entire width of the screen and the number of dashes has to be dynamic, according to the width of the mobile screen.

For that we will import the Dimensions from React Native and we will just get the value of the screen width. Then we will set a value for the spacing between the dashes so that I was evenly divided on the screen.



// @src/App.js
import React from 'react';
import { Dimensions } from "react-native";
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  const { width } = Dimensions.get("screen");
  const spacing = 16;

  // ...
  return (
    <Svg height="11" width="100%">
      <Rect
        x="11"
        y="10"
        width="10"
        height="1"
        fill="#FED049"
      />
    </Svg>
  );
};

export default App;

Now we have to create an array whose length is the value of the screen width divided by the spacing.



// @src/App.js
import React from 'react';
import { Dimensions } from "react-native";
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  const { width } = Dimensions.get("screen");
  const spacing = 16;

  const dashes = new Array(Math.floor(width / spacing)).fill(null);
  return (
    <Svg height="11" width="100%">
      <Rect
        x="11"
        y="10"
        width="10"
        height="1"
        fill="#FED049"
      />
    </Svg>
  );
};

export default App;

Now let's use the G tag because this time we're going to do a mapping taking into account the array of our dashes. In Rect the key value will be the index value of the element and we will use the props translateX which will be the value of the spacing multiplied by the index.



// @src/App.js
import React from 'react';
import { Dimensions } from "react-native";
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  const { width } = Dimensions.get("screen");
  const spacing = 16;

  const dashes = new Array(Math.floor(width / spacing)).fill(null);
  return (
    <Svg height="11" width="100%">
      <G>
        {dashes.map((_, index) => (
          <Rect
            key={index}
            x="11"
            y="10"
            width="10"
            height="1"
            fill="#FED049"
            translateX={spacing * index}
          />
        ))}
      </G>
    </Svg>
  );
};

export default App;