react-native-svg#Line JavaScript Examples

The following examples show how to use react-native-svg#Line. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Lock.js    From real-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Lock = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="3">
      <Path d="M7,11.1V6c0-2.8,2.2-5,5-5h0 c2.8,0,5,2.2,5,5v5.1" fill="none" stroke={fill}/>
      <Circle cx="12" cy="16" fill="none" r="7" stroke={fill}/>
      <Circle cx="12" cy="15" fill="none" r="2"/>
      <Line fill="none" x1="12" x2="12" y1="17" y2="19"/>
    </G>
  </Svg>
)
Example #2
Source File: XAxis.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
XAxis = ({ availableWidth, minDate, maxDate }) => {
  const intervalInDays = Math.max(1, (maxDate && minDate) ? differenceInDays(maxDate, minDate) : 1);
  const hatchCount = Math.min(intervalInDays, config.X_AXIS_INTERVAL_COUNT);
  return (
    <>
      <Line
        x1={0}
        y1={config.BAR_HEIGHT + 2}
        x2={availableWidth}
        y2={config.BAR_HEIGHT + 2}
        stroke={config.BAR_COLOR}
        strokeWidth="1"
        vectorEffect="non-scaling-stroke"
      />
      {
        generateIntervals(minDate, maxDate, hatchCount).map((date, i) => (
          <Label
            key={`${date}-${i}`} // eslint-disable-line react/no-array-index-key
            date={date}
            x={(i) * (availableWidth / hatchCount)}
            intervalInDays={intervalInDays}
          />
        ))
      }
    </>
  );
}
Example #3
Source File: XAxis.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
Label = ({ x, date, intervalInDays }) => (
  <>
    <Line
      x1={x}
      y1={config.BAR_HEIGHT + 4}
      x2={x}
      y2={config.BAR_HEIGHT - 2}
      stroke={config.BAR_COLOR}
      strokeWidth="1"
      vectorEffect="non-scaling-stroke"
    />
    <SvgText
      fill={config.LABEL_COLOR}
      stroke="none"
      fontSize={config.LABEL_FONT_SIZE}
      fontWeight="normal"
      x={x}
      y={config.BAR_HEIGHT + 16}
      textAnchor="middle"
    >
      {formatLabel(date, intervalInDays)}
    </SvgText>
  </>
)
Example #4
Source File: VerticalBound.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
VerticalBound = ({
  availableWidth, countForMaxBarHeight,
}) => {
  if (!countForMaxBarHeight) {
    return null;
  }
  const verticalBoundLabel = `${countForMaxBarHeight}`;
  return (
    <>
      <Line
        x1={0}
        y1={-2}
        x2={availableWidth}
        y2={-2}
        stroke={config.BOUNDARY_LINE_COLOR}
        strokeDasharray="2 2"
        strokeWidth="1"
        vectorEffect="non-scaling-stroke"
      />
      <SvgText
        fill={config.LABEL_COLOR}
        stroke="none"
        fontSize={config.LABEL_FONT_SIZE}
        x={-4}
        y={0}
        textAnchor="end"
      >
        {verticalBoundLabel}
      </SvgText>
    </>
  );
}
Example #5
Source File: Bar.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
Bar = ({
  x, height, width, color,
}) => (
  <Line
    x1={x}
    y1={config.BAR_HEIGHT}
    x2={x}
    y2={config.BAR_HEIGHT - height}
    stroke={color}
    strokeWidth={width}
    vectorEffect="non-scaling-stroke"
    shapeRendering="crispEdges"
  />
)
Example #6
Source File: Signout.js    From real-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Signout = ({ fill = '#333', style = {} }) => (
  <Svg height={22} width={22} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Line fill="none" x1="11" x2="22" y1="10" y2="10"/>
      <Polyline fill="none" points="18 6 22 10 18 14"/>
      <Polyline fill="none" points="13 13 13 17 8 17" stroke={fill}/>
      <Polyline fill="none" points="1 2 8 7.016 8 22 1 17 1 2 13 2 13 7" stroke={fill}/>
    </G>
  </Svg>
)
Example #7
Source File: Archive.js    From real-frontend with GNU General Public License v3.0 6 votes vote down vote up 
User = ({ fill = '#333', style = {} }) => (
  <Svg height={22} width={22} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Rect height="14" width="20" fill="none" stroke={fill} x="2" y="9"/>
      <Line fill="none" x1="5" x2="19" y1="5" y2="5" stroke={fill}/>
      <Line fill="none" x1="8" x2="16" y1="1" y2="1" stroke={fill}/>
      <Polyline fill="none" points="16 14 16 16 8 16 8 14" stroke={fill}/>
    </G>
  </Svg>
)
Example #8
Source File: MultiSigTxTimeline.js    From RRWallet with MIT License 6 votes vote down vote up 
render() {
    return (
      <View style={nStyles.main}>
        {!this.node.first && (
          <Svg style={{ position: "absolute" }} height="100%" width={"10"}>
            <Line x1="8" y1="0" x2="8" y2="100%" stroke={theme.borderColor} strokeWidth={1} {...this.lineProps} />
          </Svg>
        )}
        <Image
          style={[nStyles.icon, { tintColor: this.node.tintColor }]}
          tintColor={this.node.tintColor}
          source={this.node.icon}
        />
        <View style={nStyles.wrap}>
          <Text style={[nStyles.desc, this.node.highlight && nStyles.latestText]}>{this.node.desc}</Text>
          {this.node.timestamp != 0 && (
            <Text style={[nStyles.date, this.node.highlight && nStyles.latestText]}>{this.date}</Text>
          )}
        </View>
      </View>
    );
  }
Example #9
Source File: Search.js    From real-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Search = ({ fill = '#F9F9F9', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="square" strokeWidth="2">
      <Line fill="none" x1="22" x2="18" y1="22" y2="18"/>
      <Circle cx="10" cy="10" fill="none" r="8" stroke={fill}/>
      <Path d="M6,10a4,4,0,0,1,4-4" fill="none" strokeLinecap="butt"/>
    </G>
  </Svg>
)
Example #10
Source File: Home.js    From real-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Home = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="square" strokeWidth="2">
      <Rect height="6" width="22" fill="none" stroke={fill} x="1" y="3"/>
      <Line fill="none" x1="1" x2="23" y1="15" y2="15"/>
      <Line fill="none" x1="1" x2="23" y1="21" y2="21"/>
    </G>
  </Svg>
)
Example #11
Source File: FlashOff.js    From real-frontend with GNU General Public License v3.0 6 votes vote down vote up 
FlashOff = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2">
      <Line fill="none" x1="16.172" x2="21.828" y1="16.172" y2="21.828"/>
      <Circle cx="19" cy="19" fill="none" r="4"/>
      <Polyline fill="none" points="18 12.2 20 10 11 10 12 3 2 14 11 14 10 21 12 18.8" stroke={fill}/>
    </G>
  </Svg>
)
Example #12
Source File: Verification.js    From real-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Refresh = ({ fill = '#333', style = {} }) => (
  <Svg height={9} width={9} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="3">
      <Circle cx="12" cy="12" fill="none" r="11" stroke={fill}/>
      <Line fill="none" x1="12" x2="12" y1="11" y2="17"/>
      <Circle cx="12" cy="7" r="1" stroke="none"/>
    </G>
  </Svg>
)
Example #13
Source File: Direct.js    From real-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Direct = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Line fill="none" x1="12" x2="12" y1="2" y2="16"/>
      <Polyline fill="none" points="8 6 12 2 16 6"/>
      <Polyline fill="none" points="17 10 21 10 21 23 3 23 3 10 7 10" stroke={fill}/>
    </G>
  </Svg>
)
Example #14
Source File: Close.js    From real-frontend with GNU General Public License v3.0 5 votes vote down vote up 
Close = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Line fill="none" stroke={fill} x1="19" x2="5" y1="5" y2="19"/>
      <Line fill="none" stroke={fill} x1="19" x2="5" y1="19" y2="5"/>
    </G>
  </Svg>
)
Example #15
Source File: Close.js    From real-frontend with GNU General Public License v3.0 5 votes vote down vote up 
Close = ({ fill = '#333', style = {} }) => (
  <Svg height={18} width={18} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Line fill="none" stroke={fill} x1="19" x2="5" y1="5" y2="19"/>
      <Line fill="none" stroke={fill} x1="19" x2="5" y1="19" y2="5"/>
    </G>
  </Svg>
)
Example #16
Source File: Next.js    From real-frontend with GNU General Public License v3.0 5 votes vote down vote up 
Next = ({ fill = '#ffffff', style = {} }) => (
  <Svg height={14} width={14} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="3">
      <Line fill="none" x1="2" x2="22" y1="12" y2="12"/>
      <Polyline fill="none" points="15,5 22,12 15,19 " stroke={fill}/>
    </G>
  </Svg>
)
Example #17
Source File: Diamond.js    From real-frontend with GNU General Public License v3.0 5 votes vote down vote up 
Diamond = ({ fill = '#333', style = {} }) => (
  <Svg height={22} width={22} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Line fill="none" x1="7" x2="17" y1="7" y2="7"/>
      <Polygon fill="none" points="22,7 12,21 2,7 6,2 18,2 " stroke={fill}/>
    </G>
  </Svg>
)
Example #18
Source File: Language.js    From real-frontend with GNU General Public License v3.0 5 votes vote down vote up 
Language = ({ fill = '#333', style = {} }) => (
  <Svg height={22} width={22} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Polyline fill="none" points="3,1 21,1 21,13 3,13 " stroke={fill} />
      <Line fill="none" x1="3" x2="3" y1="1" y2="23" />
    </G>
  </Svg>
)
Example #19
Source File: Close.js    From real-frontend with GNU General Public License v3.0 5 votes vote down vote up 
Close = ({ fill = '#333', style = {} }) => (
  <Svg height={18} width={18} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="3">
      <Line fill="none" stroke={fill} x1="19" x2="5" y1="5" y2="19"/>
      <Line fill="none" stroke={fill} x1="19" x2="5" y1="19" y2="5"/>
    </G>
  </Svg>
)
Example #20
Source File: ChartLines.js    From react-native-animated-charts with MIT License 5 votes vote down vote up 
function ChartLineFactory(orientation) {
  const isVertical = orientation == 'vertical';
  return function ChartLine({
    color = '#000000',
    thickness = 2,
    length,
    ...props
  }) {
    const {
      currentPositionVerticalLineStyle,
      openingPositionHorizontalLineStyle,
    } = useContext(ChartContext);
    return (
      <Animated.View
        pointerEvents="none"
        style={[
          isVertical
            ? currentPositionVerticalLineStyle
            : openingPositionHorizontalLineStyle,
          {
            height: isVertical ? length + 20 : thickness,
            position: 'absolute',
            left: 0,
            top: 0,
            width: isVertical ? thickness : length,
            zIndex: -1,
          },
        ]}
      >
        <Svg>
          <Line
            stroke={color}
            strokeWidth={thickness}
            strokeDasharray={10}
            x1={0}
            y1={0}
            x2={isVertical ? 0 : length}
            y2={isVertical ? length + 20 : 0}
            {...props}
          />
        </Svg>
      </Animated.View>
    );
  };
}
Example #21
Source File: Close.js    From real-frontend with GNU General Public License v3.0 5 votes vote down vote up 
Close = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2.5">
      <Line fill="none" stroke={fill} x1="19" x2="5" y1="5" y2="19"/>
      <Line fill="none" stroke={fill} x1="19" x2="5" y1="19" y2="5"/>
    </G>
  </Svg>
)
Example #22
Source File: chart.js    From monsuivipsy with Apache License 2.0 4 votes vote down vote up 
Chart = ({ onPress, title, data = [], lines = 5, withFocus = false, focused = null }) => (
  <View>
    <Text style={styles.title}>{title}</Text>
    <View style={styles.globalContainer}>
      <View style={styles.legend}>
        {Array(lines)
          .fill()
          .map((_, i) => {
            const icon = (score) => {
              if (score === 5)
                return (
                  <VeryGoodSvg
                    width={20}
                    height={20}
                    color={scoresMapIcon[score].borderColor}
                    style={{ opacity: 0.8 }}
                  />
                );
              if (score === 4)
                return (
                  <GoodSvg
                    width={20}
                    height={20}
                    color={scoresMapIcon[score].borderColor}
                    style={{ opacity: 0.8 }}
                  />
                );
              if (score === 3)
                return (
                  <MiddleSvg
                    width={20}
                    height={20}
                    color={scoresMapIcon[score].borderColor}
                    style={{ opacity: 0.8 }}
                  />
                );
              if (score === 2)
                return (
                  <BadSvg
                    width={20}
                    height={20}
                    color={scoresMapIcon[score].borderColor}
                    style={{ opacity: 0.8 }}
                  />
                );
              if (score === 1)
                return (
                  <VeryBadSvg
                    width={20}
                    height={20}
                    color={scoresMapIcon[score].borderColor}
                    style={{ opacity: 0.8 }}
                  />
                );
            };
            return (
              <View key={i} style={styles.legendItem}>
                {icon(5 - i)}
              </View>
            );
          })}
      </View>
      <View style={styles.chartContainer}>
        {Array(lines)
          .fill()
          .map((_, i) => (
            <Text key={i} style={styles.line} ellipsizeMode="clip" numberOfLines={1}>
              {"".padEnd(300, "-")}
            </Text>
          ))}
        <Svg style={styles.svgContainer} viewBox={`0 0 ${chartWidth} ${chartHeight}`}>
          <G id="Group" strokeWidth={2} stroke={withFocus ? colors.DARK_BLUE_TRANS : colors.DARK_BLUE}>
            {data.map((value, index) => {
              if (index === 0) {
                return null;
              }
              if (data[index] === null) {
                return null;
              }
              if (data[index - 1] === null) {
                return null;
              }
              return (
                <Line
                  key={`${value}${index}`}
                  x1={dotsX[index - 1]}
                  y1={dotsY[data[index - 1]]}
                  x2={dotsX[index]}
                  y2={dotsY[data[index]]}
                />
              );
            })}
            {data.map((value, index) => {
              if (value === null) {
                return null;
              }
              return (
                <Circle
                  key={`${value}${index}`}
                  fill={colorsMap[value + (withFocus && focused !== index ? colorsMap.length / 2 : 0)]}
                  stroke={withFocus && focused !== index ? colors.DARK_BLUE_TRANS : colors.DARK_BLUE}
                  cx={dotsX[index]}
                  cy={dotsY[value]}
                  r={dotSize}
                  onPress={() => (onPress ? onPress(index) : null)}
                />
              );
            })}
          </G>
        </Svg>
        <View style={styles.days}>
          {days.map((day, index) => (
            <TouchableOpacity key={day} onPress={() => (onPress ? onPress(index) : null)}>
              <Text style={styles.day}>{day}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>
    </View>
  </View>
)