react-native-svg#Text JavaScript Examples

The following examples show how to use react-native-svg#Text. 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: Icons.js From rakning-c19-app with MIT License

5 votes

TestResults = props => (
  <Svg width={375} height={335} {...props}>
    <Defs>
      <LinearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="prefix__c">
        <Stop stopColor="#FEEFE8" stopOpacity={0} offset="0%" />
        <Stop stopColor="#FEEFE8" offset="100%" />
      </LinearGradient>
      <Path id="prefix__a" d="M0 0h375v335H0z" />
    </Defs>
    <G fill="none" fillRule="evenodd">
      <Mask id="prefix__b" fill="#fff">
        <Use xlinkHref="#prefix__a" />
      </Mask>
      <G mask="url(#prefix__b)">
        <G transform="translate(28 125)">
          <Rect fill="#FFF" width={319} height={269} rx={12} />
          <Text
            fontFamily="OpenSansBold"
            fontSize={15}
            fontWeight="bold"
            letterSpacing={-0.2}
          >
            <TSpan x={86.386} y={37.5} fill="#FE7A4C">
              {'YOUR TEST RESULT'}
            </TSpan>
          </Text>
          <Text
            fontFamily="OpenSansBold"
            fontSize={26}
            fontWeight="bold"
            letterSpacing={-0.347}
          >
            <TSpan x={51.092} y={69.702} fill="#263343">
              {'You do not have '}
            </TSpan>
            <TSpan x={88.473} y={97.702} fill="#263343">
              {'COVID-19'}
            </TSpan>
          </Text>
          <Text fontFamily="OpenSans" fontSize={14} letterSpacing={-0.187}>
            <TSpan x={37.792} y={133} fill="#606A77">
              {'Vestibulum rutrum quam vitae fringilla '}
            </TSpan>
            <TSpan x={34.672} y={151} fill="#606A77">
              {'tincidunt. Suspendisse nec tortor urna. '}
            </TSpan>
            <TSpan x={32.339} y={169} fill="#606A77">
              {'Ut laoreet sodales nisi, quis iaculis nulla '}
            </TSpan>
            <TSpan x={43.127} y={187} fill="#606A77">
              {'iaculis vitae. Donec sagittis faucibus '}
            </TSpan>
            <TSpan x={32.659} y={205} fill="#606A77">
              {'lacus eget blandit. Mauris vitae ultricies '}
            </TSpan>
            <TSpan x={41.988} y={223} fill="#606A77">
              {'metus, at condimentum nulla. Donec '}
            </TSpan>
            <TSpan x={36.904} y={241} fill="#606A77">
              {'quis ornare lacus. Etiam gravida mollis '}
            </TSpan>
            <TSpan x={96.062} y={259} fill="#606A77">
              {'tortor quis porttitor.'}
            </TSpan>
          </Text>
        </G>
      </G>
      <Path
        fill="url(#prefix__c)"
        mask="url(#prefix__b)"
        d="M0 251h375v84H0z"
      />
    </G>
  </Svg>
)