Change font

[ShaikhKabeer]

I want to use other custom font instead of "Helvetica Neue". How can I do this ? <Text font={13px "Helvetica Neue", "Helvetica", Arial} fill = "#000000" alignment = "center" > Hello World </Text>

I tried chaging this font but unable to change. Please help

[Obooman]

the font attribute here lose backquote ``. Copy this:

<Text
  font={`13px "Helvetica Neue", "Helvetica", Arial`}
  fill="#000000"
  alignment="center"
>Hello World </Text>

[ShaikhKabeer]

Hey, actually I forgot to mention that backquote attribute in my code. It is there and I tried to change the font but it's not working.

[Obooman]

Please paste your code completely here. Have you tried different font such as Courier? offer your platform information will be awesome.

[ShaikhKabeer]

I've used "react-native-simple-gauge" library for displaying Gauge chart in my app. But I also need to show the text below the start and end of gauge shape. So instead of React Native's Text, I've used <Text> from React Native ART Library. I have put here the changes I've done in library itself.

import React from 'react'; import PropTypes from 'prop-types'; import { View, Platform, ViewPropTypes } from 'react-native'; import { Surface, Shape, Path, Group, Text } from '../../react-native/Libraries/ART/ReactNativeART'; import MetricsPath from 'art/metrics/path';

export default class GaugeProgress extends React.Component {

circlePath(cx, cy, r, startDegree, endDegree) { let p = Path(); p.path.push(0, cx + r, cy); p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, endDegree * Math.PI / 180, 1); return p; }

extractFill(fill) { if (fill < 0.01) { return 0; } else if (fill > 100) { return 100; } return fill; }

render() { const { size, width, tintColor, backgroundColor, style, stroke, strokeCap, rotation, cropDegree, children } = this.props; const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, (360 * 99.9 / 100) - cropDegree); const fill = this.extractFill(this.props.fill); const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, ((360 * 99.9 / 100) - cropDegree) * fill / 100 ); const linePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, ((360 * 99.9 / 100) - cropDegree) * fillLine / 100 ); return ( <View style={style}> <Surface width={size+40} height={size}> <Group rotation={rotation + cropDegree/2} originX={(size+20)/2} originY={size/2}> <Shape d={backgroundPath} strokeDash={stroke} stroke={backgroundColor} strokeWidth={width} strokeCap={strokeCap}/> <Shape d={circlePath} strokeDash={stroke} stroke={tintColor} strokeWidth={width} strokeCap={strokeCap}/>

      </Shape>
     
      </Group>
      <Text font={`40px "Helvetica Neue", "Helvetica", Arial`} 
          fill="#000000" alignment="center" x={(size/2)+width+width-width} y={((size/2)- width-width-width)}
          >70</Text>
      <Text font={`14px "Helvetica Neue", "Helvetica", Arial`} 
          fill="#000000" alignment="center" x={width+14} y={(size/2- width/2)+10}
          >0.500</Text>
     
     <Text font={`14px "Helvetica Neue", "Helvetica", Arial`} 
          fill="#000000" alignment="center" x={size+14} y={(size/2- width/2)+10}
          >100.00</Text>
     
    </Surface>
    {
      children && children(fill)

    }
  </View>
)

} }

GaugeProgress.propTypes = { style: ViewPropTypes.style, size: PropTypes.number.isRequired, fill: PropTypes.number.isRequired, width: PropTypes.number.isRequired, tintColor: PropTypes.string, stroke: PropTypes.arrayOf(PropTypes.number), strokeCap: PropTypes.string, backgroundColor: PropTypes.string, rotation: PropTypes.number, cropDegree: PropTypes.number, children: PropTypes.func }

GaugeProgress.defaultProps = { tintColor: 'black', backgroundColor: '#e4e4e4', rotation: 90, cropDegree: 90, strokeCap: 'butt', }

[ShaikhKabeer]

Any update on this @Obooman