React Native Weather Chart

react-native-weather-chart provides create weather chart with SVG. This library uses weather-icons as default.

📲See example app

Installation

1. npm i react-native-svg install peer dependencies More Info
2. npm i react-native-svg-transformer --save-dev
3. Configure the react native packager for react-native-svg-transformer

For React Native v0.57 or newer

Merge the contents from your project's metro.config.js file with this config (create the file if it does not exist already).

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

4. npm i react-native-weather-chart

Quick Example

import React from 'react';
import {StyleSheet, View} from 'react-native';
import WeatherChart from 'react-native-weather-chart';

const Data = {
  values: [23, 24, 25, 20, 15],
  textBottom: ['23°', '24°', '25°', '20°', '15°'],
  iconBottom: ['DayCloudy', 'DaySunny', 'DaySunny', 'DayCloudy', 'DayRain'],
};

const Settings = {
  showTextTop: false,
  showTextBottom: true,
  showIconTop: false,
  showIconBottom: true,
};

const App = () => {
  return (
    <View style={styles.viewChart}>
      <WeatherChart data={Data} settings={Settings} />
    </View>
  );
};

const styles = StyleSheet.create({
  viewChart: {
    backgroundColor: '#212B34',
    margin: 10,
    height: 160,
  },
});

export default App;

Properties

The component has two properties, data and settings

 <WeatherChart data={Data} settings={Settings} />

data

const Data = {
  values: [23, 24, 25, 20, 15],
  textTop: ['Today', 'Mon', 'Tue', 'Wed', 'Thu'],
  iconTop: ['DayCloudy', 'DaySunny', 'DaySunny', 'DayCloudy', 'DayRain'],
  textBottom: ['23°', '24°', '25°', '20°', '15°'],
  iconBottom: ['DayCloudy', 'DaySunny', 'DaySunny', 'DayCloudy', 'DayRain'],
};

| Property | Type | Description | |------------|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | values | Array[Number] | Required! If you dont have values, you should use empty array. [] | | textTop | Array[String] | Optional. | | textBottom | Array[String] | Optional. | | iconTop | Array[String] | This library uses weather-icons as default. You can find all icon names in here. | | iconBottom | Array[String] | This library uses weather-icons as default. You can find all icon names in here. |

settings

const Settings = { showTextTop: true, showTextBottom: false, showIconTop: true, showIconBottom: true, ... };

| Property | Type | Description | Default Value | |-------------------|--------|--------------------------|--------------------| | colSpace | Number | Space between two values | 100 | | fontSizeTop | Number | Font size of top text | 12 | | fontSizeBottom | Number | Font size of bottom text | 12 | | iconSize | Number | Size of all icons | 30 | | marginTop | Number | | 0 | | marginLeft | Number | | 30 | | marginRight | Number | | 30 | | markerSize | Number | | 4 | | markerStrokeSize | Number | | 1.5 | | showTextTop | Bool | | true | | showTextBottom | Bool | | true | | showIconTop | Bool | | true | | showIconBottom | Bool | | true | | showVerticalLines | Bool | | true | | lineColor | String | | 'lightgray' | | vlineColor | String | | 'lightgray' | | vlineStroke | String | | '5,5' | | topTextColor | String | | '#A6BCD0' | | bottomTextColor | String | | '#A6BCD0' | | markerFillColor | String | | 'white' | | markerStrokeColor | String | | 'lightgray' | | noDataText | String | | 'There is no data' | | noDataTextColor | String | | '#A6BCD0' | | noDataFontSize | Number | | 12 | | iconTopColor | String | | '#fff' | | iconBottomColor | String | | '#fff' | | | | | |