At Connected Cars, we’re all in on React Native and use the open source framework to build a multitude of branded applications for our clients and ourselves.
We strive to bring data from users’ cars into their hands. Displaying the data a user creates in a concise and intuitive way on their mobile device has been an interesting challenge for the designers and engineers at Connected Cars. We use a variety of open-source libraries to help us do so.
But when a ready-made library is not available, we build the solution ourselves. This was the case with our new driving data visualization features.
Connected Cars is a proponent of the open-source model and as such we have open-sourced our latest data visualization library, react-native-slide-charts, to help other React Native developers who want to create interactive chart experiences.
There are a few well used React Native data visualization libraries, most notably react-native-svg-charts and victory-native. Both of these libraries don’t wrap webviews to present data, which makes working with them inside React Native much more convenient than other non-native focused libraries.
But unfortunately for our use case, the level of interactivity these libraries provide was not sufficient. Our aim was to create an area chart of users’ speed as they drove and allow them to scroll across it and move a marker on a map to represent a location at the given time.
The interaction provided by the libraries was state-based and used discrete data points, which would not give the fluid animation result we were looking to achieve.
To achieve the desired interaction we had to bypass the React render lifecycle by using Direct Manipulation and update the cursor and tool-tip position on the chart continuously. We then used the interpolated timestamp in a callback to the map component to reposition the map indicator in a non-discrete fashion using Direct Manipulation again. This allowed for a fluid user-driven animation when the chart is interacted with.
Soon thereafter we saw a need for a similarly interactive bar chart. While the interactivity was more discrete than the area chart, it was apparent that there was not a React Native library that focused on animated interactive charts. Therefore, we modularized the components that made up the area chart and reused the majority to make an interactive and animated bar chart as well. After some optimization and refactoring we open-sourced the project and published it on NPM for others to use.
You can try out the charts in the expo snack.
Using the charts within your own project is extremely easy as well. If you are using expo, all peerDependencies are already installed, just run:
$ npm install react-native-slide-charts — save
or
$ yarn add react-native-slide-charts And both the <SlideAreaChart /> and <SlideBarChart /> can be rendered empty with no props provided. A little test data will provide a good start though:
If you are not using expo, you will need to install in your project react-native-svg and react-native-gesture-handler to use the charts.
The full documentation on usage and customization is thoroughly documented in the repo, and it is open to PRs for anyone who would like to contribute.
