What is ViewStyle and why we have array in ViewStyle in TypeScript

user_16278772 0
Viewed 396

I'm learning TypeScript but today i see a few lines of code like this :

  const ROOT: ViewStyle = {
  alignItems: 'center',
  backgroundColor: color.primary,
  borderRadius: 8,
  flex: 1,
  justifyContent: 'center',
  marginHorizontal: spacing[2],
  marginTop: spacing[2],
  paddingHorizontal: spacing[4],
  height: "100%",
}

First of all, What is ViewStyle??

I searched google for this but feel like it not have documentation for this, the offical document for this only have stye for View component, so what is ViewStyle, and TextStyle also?

And i don't understand why they don't use marginHorizontal: 2 instead of marginHorizontal: spacing[2], spacing[2] to create space?? But why use that when we can directly choose number for marginHorizontal and why we have array in here??

Please help, thank you a lots

react-native typescript reactjs
1 Answers

To answer 1st question. View in react-native represents kind of div element in web. And Text is to add text in the View. ViewStyle is different from that of TextStyle as you will see in the Docs. Not all of Viewstyles are applicable to Text component. Hence separate interface for both.

2ndly React-Native allows only number and percentage in the Style as it calculates the style according to the device pixel ratio. Not an expert here. But you can check this link, Also spacing is a fuction of material ui library hence not used by default.

The array in style helps you to add style multiple style to a component without using unnecessary spread operators. reference

user_102386400
Related