How to use the react-native-svg.Path function in react-native-svg

To help you get started, we’ve selected a few react-native-svg examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github delfrrr / weather-app-react-native / components / windDetailed.js View on Github external
/**
 * svg group with wind by hour
 * @module windDetailed
 */

'use strict';

const React = require('react');
const {width} = require('../lib/getDimensions')();
const connect = require('react-redux').connect;
// let line = React.createFactory(require('react-native-svg').Line);
let path = React.createFactory(require('react-native-svg').Path);
const sliceDataPoints = require('../lib/sliceDataPoints');
const g = React.createFactory(require('react-native-svg').G);
const {scaleLinear, scaleThreshold} = require('d3-scale');
const d3Path = require('d3-path').path;

/**
 * @param  {Object} props
 * @return {Object} state
 */
function getSateFromProps(props) {
    let {
        index,
        timezones,
        hourly,
        dates
    } = props;
github delfrrr / weather-app-react-native / components / curve.js View on Github external
*/

'use strict';

const React = require('react');
const {width, curveHeight} = require('../lib/getDimensions')();
const view = React.createFactory(require('react-native').View);
const connect = require('react-redux').connect;
const svg = React.createFactory(require('react-native-svg').Svg);
const sliceDataPoints = require('../lib/sliceDataPoints');
const {line, curveMonotoneX, area} = require('d3-shape');
const formatTemperature = require('../lib/format-temperature');
let precip = React.createFactory(require('./precip'));
let overcast = React.createFactory(require('./overcast'));
let windDetailed = React.createFactory(require('./windDetailed'));
let path = React.createFactory(require('react-native-svg').Path);
let g = React.createFactory(require('react-native-svg').G);
let svgText = React.createFactory(require('react-native-svg').Text);
let circle = React.createFactory(require('react-native-svg').Circle);
let {scaleLinear} = require('d3-scale');

/**
 * @param  {number[]} tempAr
 * @return {{localMax: Number, localMin: Number}}
 */
function getLocalMinMax(tempAr) {
    let localMax = Math.max(...tempAr);
    let localMin = Math.min(...tempAr);
    return {localMax, localMin};
}

/**
github delfrrr / weather-app-react-native / components / detailsTemperature.js View on Github external
/**
 * temperature curve
 * @module detailsTemperature
 */

'use strict';

const React = require('react');
const {width} = require('../lib/getDimensions')();
const dTHeight = 130;
const connect = require('react-redux').connect;
const svg = React.createFactory(require('react-native-svg').Svg);
const {line, curveMonotoneX, curveBasis, area} = require('d3-shape');
const formatTemperature = require('../lib/format-temperature');
const path = React.createFactory(require('react-native-svg').Path);
const g = React.createFactory(require('react-native-svg').G);
const svgText = React.createFactory(require('react-native-svg').Text);
const circle = React.createFactory(require('react-native-svg').Circle);
const {scaleLinear} = require('d3-scale');
const view = React.createFactory(require('react-native').View);
const setStateAnimated = require('../lib/setStateAnimated');
const store = require('../reducers/main');

/**
 * @param  {number[]} tempAr
 * @return {{localMax: Number, localMin: Number}}
 */
function getLocalMinMax(tempAr) {
    let localMax = Math.max(...tempAr);
    let localMin = Math.min(...tempAr);
    return {localMax, localMin};
github delfrrr / weather-app-react-native / components / detailsCloudCoverage.js View on Github external
*/

'use strict';

const React = require('react');
const {width} = require('../lib/getDimensions')();
const height = 50;
const svg = React.createFactory(require('react-native-svg').Svg);
const Defs = React.createFactory(require('react-native-svg').Defs);
const Stop = React.createFactory(require('react-native-svg').Stop);
const LinearGradient = React.createFactory(
    require('react-native-svg').LinearGradient
);
const {scaleLinear, scaleThreshold} = require('d3-scale');
const {area, curveMonotoneX} = require('d3-shape');
const path = React.createFactory(require('react-native-svg').Path);
const setStateAnimated = require('../lib/setStateAnimated');
const view = React.createFactory(require('react-native').View);
const text = React.createFactory(require('./text'));
const labelTypes = [
    'clear', 'partly-cloudy', 'cloudy'
];
const labelTypeLables = {
    'clear': 'Clear',
    'partly-cloudy': 'Partly Cloudy',
    'cloudy': 'Cloudy'
};
const cloudCoverScale = scaleThreshold()
    .domain([.2, 1])
    .range(labelTypes);
const store = require('../reducers/main');
github FortAwesome / react-native-fontawesome / dist / converter.js View on Github external
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

var svgObjectMap = {
  "svg": _reactNativeSvg.Svg,
  "path": _reactNativeSvg.Path,
  "rect": _reactNativeSvg.Rect,
  "defs": _reactNativeSvg.Defs,
  "mask": _reactNativeSvg.Mask,
  "g": _reactNativeSvg.G,
  "clipPath": _reactNativeSvg.ClipPath
};

function convert(createElement, element) {
  var extraProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

  if (typeof element === 'string') {
    return element;
  }

  var children = (element.children || []).map(function (child) {
    return convert(createElement, child);
github delfrrr / weather-app-react-native / components / wind.js View on Github external
/**
 * wind icon
 * @module wind
 */

'use strict';

let React = require('react');
let View = React.createFactory(require('react-native').View);
let Animated = require('react-native').Animated;
let AnimatedView = React.createFactory(Animated.View);
let Svg = React.createFactory(require('react-native-svg').Svg);
let Circle = React.createFactory(require('react-native-svg').Circle);
let Path = React.createFactory(require('react-native-svg').Path);
let G = React.createFactory(require('react-native-svg').G);
const beaufort = require('../lib/beaufort');
const {scaleThreshold} = require('d3-scale');
const durationScale = scaleThreshold()
    .domain([      3,    4,    5,    6,   7  ])
    .range([ 6000, 6000, 3000, 1500, 750, 400]);

/**
 * @param  {number} windSpeed m/s
 * @return {number} animation duration ms
 */
function getDuration(windSpeed) {
    const b = beaufort(windSpeed);
    return durationScale(b);
}
github shevawen / react-native-weather-app / components / Chart.js View on Github external
'use strict';

var React = require('react-native');
var d3 = require('d3');
var Svg = require('react-native-svg'); 
var Common = require('../common/common');

var Path = Svg.Path;

var {
  View,
  StyleSheet,
  PropTypes,
} = React;

var Chart = React.createClass({
  propTypes: {
    data : React.PropTypes.array,
    width: React.PropTypes.number,
    height: React.PropTypes.number,
    top: React.PropTypes.number,
    pointFillColors: React.PropTypes.array,
    pointStrokeColors: React.PropTypes.array,
    lineColors: React.PropTypes.array,
github delfrrr / weather-app-react-native / components / detailsWind.js View on Github external
/**
 * svg group with wind by hour
 * @module detailsWind
 */

'use strict';

const React = require('react');
const {width} = require('../lib/getDimensions')();
const dWheight = 32;
const path = React.createFactory(require('react-native-svg').Path);
const svg = React.createFactory(require('react-native-svg').Svg);
const view = React.createFactory(require('react-native').View);
const text = React.createFactory(require('./text'));
const {scaleLinear, scaleThreshold} = require('d3-scale');
const d3Path = require('d3-path').path;

//scales
const beaufort = require('../lib/beaufort');
const beaufortLabel = scaleThreshold()
    .domain([        2,            3,      4,     5,       6,            7,             8])
    .range(['Calm', 'Light wind', 'Wind', 'Wind', 'Wind', 'Strong wind', 'Strong wind', 'Storm']);
const y0 = dWheight / 2;
const l = 15;
const xScale = scaleLinear()
    .domain([0, 23])
    .range([l / 1.5, width - l / 1.5]);