Limitation on defining stylesheet in reactjs native version

Question

If I try to define a textalign with justify value in reactjs native, I get the error message that only four values are supported: auto, left, right, center. Is it possible to work around this, and define textalign with justify? Below is the sample code:

var styleTest = StyleSheet.create({

 title: {
   fontSize : 20,
   color : 'rgb(0,0,255)',
   textAlign: "justify"
  }

});

Just to clarify, I see this when trying out reactjs native for ios, not in reactjs.

The above error happens when calling StyleSheet.create method which calls StyleSheetValidation.validateStyle method. I guess in order to create a non-supported CSS property, I have to do a workaround and call CSS directly. I am curious how to go about including other stylesheet properties that are not supported, in a simple way. I couldn't find documentation on this. Pointers will be very much appreciated.

Answer 1

I have to do a workaround and call CSS directly

It's not actually CSS, it's a description of how it should look using the terms you know from CSS. The actual implementation does a bunch of math and then conveys it to UIKit in a way it understands, similar to how browsers implement CSS.

This has been done from scratch for react-native. It's not using an existing css engine.

I am curious how to go about including other stylesheet properties that are not supported, in a simple way

As you may have guessed by the words 'math' and 'UIKit', there's no simple way to do this, and absolutely no way to do it without modifying the objc code.

I suggest creating an issue or sending a pull request if it's missing something. Not all of CSS will be supported.

_{Disclaimer: Minimal iOS/react-native experience, I don't know what's required to add text justification. It may be simple.}