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


<Group rotation={rotation + cropDegree/2} originX={(size+20)/2} originY={size/2}>

      </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