Add responsive sizing to custom <Text /> component

[ChristopherGabba]

I've implemented this into my application that started out with ignite, but would be great if it was automatically a factor in the initial Text Component. Here is a link to some methods that I've used in the past:

https://stackoverflow.com/questions/33628677/react-native-responsive-font-size

I would like it to be the same general layout, maybe like this?

<Text 
   responsive={true}
   size={'xl'}
/>

But that size in the background is whatever you define inside the TextComponent:

const $sizeStyles = {
  xxl: { fontSize: 36, lineHeight: 44 } satisfies TextStyle,
  xl: { fontSize: 24, lineHeight: 34 } satisfies TextStyle,
  lg: { fontSize: 20, lineHeight: 32 } satisfies TextStyle,
  md: { fontSize: 18, lineHeight: 28 } satisfies TextStyle,
  sm: { fontSize: 16, lineHeight: 24 } satisfies TextStyle,
  xs: { fontSize: 14, lineHeight: 21 } satisfies TextStyle,
  xxs: { fontSize: 12, lineHeight: 18 } satisfies TextStyle,
  xxxs: { fontSize: 10, lineHeight: 14 } satisfies TextStyle,
  xxxxs: { fontSize: 9, lineHeight: 12 } satisfies TextStyle,
  micro: { fontSize: 8, lineHeight: 14 } satisfies TextStyle,
} 

That looks tiny on an tablet vs. on a phone. Would be awesome if this component would take that into account.

I'm not sure if infinite red has a better method but I've used similar practices to https://github.com/nirsky/react-native-size-matters to scale text automatically depending on the screen dimensions. It ends up looking pretty great on tablet all things considered. Would be a great option.

[frankcalise]

Very interesting point @ChristopherGabba, thanks for bringing that up!