How to use the react-native-svg.LinearGradient 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 / background.js View on Github external
/**
 * background gradient
 * @module components/background
 */

const React = require('react');
const getDimensions = require('../lib/getDimensions');
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 connect = require('react-redux').connect;
const getColorByTemp = require('../lib/temperature-color');
const getDataPoints = require('../lib/getDataPoints');
const {interpolate} = require('d3-interpolate');
const LinearGradient = React.createFactory(
    require('react-native-svg').LinearGradient
);
const Rect = React.createFactory(require('react-native-svg').Rect);

/**
 * @param {ForecastDataBlock[]} hourly
 * @param {number[]} hourRange
 * @param {number|null} index when need to show only one column
 * @returns {string[][]} colors
 */
function getStops(hourly, hourRange, index) {
    let dataBlocks = hourly;
    if (typeof index === 'number') {
        dataBlocks = [hourly[index]];
    }
    let stops = dataBlocks.map((dataBlock) => {
        const points = getDataPoints(dataBlock);
github delfrrr / weather-app-react-native / components / options.js View on Github external
const text = React.createFactory(require('./text'));
const nextIcon = React.createFactory(require('./nextIcon'));
const view = React.createFactory(require('react-native').View);
const segmentedControlIOS = React.createFactory(
    require('react-native').SegmentedControlIOS
);
const {Linking, AlertIOS, Dimensions} = require('react-native');
const legend = React.createFactory(require('./legend'));
const connect = require('react-redux').connect;
const store = require('../reducers/main');
const touchableOpacity = React.createFactory(
    require('react-native').TouchableOpacity
);
const scrollView = React.createFactory(require('react-native').ScrollView);
const linearGradient = React.createFactory(
    require('react-native-svg').LinearGradient
);
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 rect = React.createFactory(require('react-native-svg').Rect);
const {ShareDialog, MessageDialog, AppEventsLogger} = require('react-native-fbsdk');
const linkObj  = {
    contentType: 'link',
    contentUrl: 'http://zowni.com'
};
const reportError = require('../lib/reportError');

module.exports = connect(
    function mapStateToProps(state) {
github delfrrr / weather-app-react-native / components / detailsCloudCoverage.js View on Github external
/**
 * svg group with wind by hour
 * @module detailsCloudCoverage
 */

'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()