react-native-weather-chart v0.1.3

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'],
};

settings

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