lucassaid / react-native-cool-speedometer

Cool speedometer for React Native
27 stars 20 forks source link

Indicator Suffix Prop not working #11

Closed VictorKengoo closed 2 years ago

VictorKengoo commented 2 years ago

First of all, congratulations for the huge and complete library, way way better than the others i´ve searched online. Second, I would like to point that the "suffix" property of the Indicator component is not working.

image image

lsaidspace commented 2 years ago

Wow thanks for your words 😃 I'm glad it helps. About the suffix, I forgot to remove that form the readme.... The current way to add a suffix is rendering a custom indicator:

<Indicator>
  {(value, textProps) => (
    <Text
      {...textProps} // textProps has the "transform" property only
      fill="#555"
      x={250 / 2} // assumes that the size of the speedometer is 250 (the default size)
      y={250 / 2} // use something like 250 / 2 + 40 to place the indicator lower
      textAnchor="middle"
    >
      {value}k/m
    </Text>
  )}
</Indicator>

Use Text imported from 'react-native-svg', unless you need to add a custom font, in that case you can use Text from 'react-native' (see more here)