How to use the react-native-svg.Text 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 / detailsPrecip.js View on Github external
/**
 * svg group with wind by hour
 * @module detailsPrecip
 */

'use strict';

const React = require('react');
const {width} = require('../lib/getDimensions')();
const height = 50;
const svg = React.createFactory(require('react-native-svg').Svg);
const circle = React.createFactory(require('react-native-svg').Circle);
const svgText = React.createFactory(require('react-native-svg').Text);
const {scaleLinear, scaleQuantize} = require('d3-scale');
const view = React.createFactory(require('react-native').View);
const text = React.createFactory(require('./text'));

const labelWidth = 100;
const xScale = scaleLinear()
    .domain([0, 23])
    .range([6, width - 6]);
const fontWeightScale = scaleQuantize().domain([2.5, 7.6]).range(['200', '400', '600']);
const radiusScale = scaleQuantize().domain([2.5, 7.6]).range([2, 3, 4]);
const levelScale = scaleQuantize().domain([0, 1]).range([1, 2, 3]);

function getMaxProbabilityPoint(points) {
    const slicePadding = Math.floor(xScale.invert(labelWidth / 2));
    const slicedPoints = points.slice(
        slicePadding,
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 / 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};
}

/**
 * @param {Object[]} temperaturePointAr
 * @returns {Object[]} temperaturePointAr
github delfrrr / weather-app-react-native / components / precip.js View on Github external
/**
 * svg group with rain/snow drops
 * @module precip
 */

'use strict';

const React = require('react');
const {width} = require('../lib/getDimensions')();
const connect = require('react-redux').connect;
const sliceDataPoints = require('../lib/sliceDataPoints');
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, scaleQuantize} = require('d3-scale');

/**
 * @param  {Object} props
 * @return {Object} state
 */
function getSateFromProps(props) {
    let {
        index,
        timezones,
        hourly,
        dates
    } = props;
    const dataPoints = sliceDataPoints(
        hourly[index],