skylejs / skyle Goto Github PK

Syntax:
env()

Allow using safe-area offsets with the env functional notation.

Using:
react-native-safe-area-context

Configuration Draft:

// override safe area offsets
Skyle.configure({
  env: {
    'safe-area-inset-top': 25,
    'safe-area-inset-right': '35px',
    'safe-area-inset-bottom': 0,
    'safe-area-inset-left': 0,
  }
});

Syntax:
box-shadow

Shadow implementation varies for each platform.

• iOS has full support using React Native's shadow props.
• Web has also implemented these props.
• Android has the elevation property but it does not include color (<API 28) or offsets. - (Custom implementation*, tested)
• Windows is WIP: microsoft/react-native-windows#2800 - (Custom implementation*, untested)
• Mac is behind as no one picked up the issue: microsoft/react-native-macos#279 - (untested)

*Custom implementation transitions support is lacking.

Syntax:
[attribute]
attr()

• [attribute]
• attr()

Syntax:
linear-gradient()
radial-gradient()

• iOS
• Android
• Web

Library used: react-native-svg
*Windows and MacOS will be supported soon.

Possible libraries:
- https://github.com/react-native-linear-gradient/react-native-linear-gradient
- https://docs.expo.io/versions/latest/sdk/linear-gradient
- https://www.npmjs.com/package/react-native-svg

Syntax:
text-shadow

• Android (has full support).
• iOS (has full support).
• Web (has full support).
• Windows is WIP: #1
• Mac is a challenge.

Syntax:
filter

Filters:

• blur
• brightness
• contrast
• drop-shadow #1
• grayscale
• hue-rotate
• invert
• opacity (same as opacity prop)
• saturate
• sepia

Some implementations:

• https://github.com/GregoryNative/react-native-gl-image-filters
• https://github.com/expo/gl-react-native