diff --git a/packages/uniwind/src/metro/utils/common.ts b/packages/uniwind/src/metro/utils/common.ts
index 011f53e0..50dd97a8 100644
--- a/packages/uniwind/src/metro/utils/common.ts
+++ b/packages/uniwind/src/metro/utils/common.ts
@@ -74,6 +74,8 @@ export const shouldBeSerialized = (value: string) => {
         /[*/+-]/.test(value),
         value.includes('"'),
         value.includes(' '),
+        value === '(',
+        value === ')',
     ].some(Boolean)
 }
 
diff --git a/packages/uniwind/tests/consts.ts b/packages/uniwind/tests/consts.ts
index cdb9c709..69980a2c 100644
--- a/packages/uniwind/tests/consts.ts
+++ b/packages/uniwind/tests/consts.ts
@@ -2,3 +2,10 @@ export const TW_RED_500 = '#fb2c36'
 export const TW_GREEN_500 = '#00c950'
 export const TW_BLUE_500 = '#2b7fff'
 export const TW_YELLOW_500 = '#f0b100'
+export const TW_SPACING = 4
+
+export const SAFE_AREA_INSET_TOP = 21
+export const SAFE_AREA_INSET_BOTTOM = 42
+
+export const SCREEN_WIDTH = 390
+export const SCREEN_HEIGHT = 844
diff --git a/packages/uniwind/tests/setup.ts b/packages/uniwind/tests/setup.ts
index 71b86431..550dee1d 100644
--- a/packages/uniwind/tests/setup.ts
+++ b/packages/uniwind/tests/setup.ts
@@ -1,7 +1,11 @@
 import { readFileSync } from 'fs'
 import { resolve } from 'path'
+import { Dimensions } from 'react-native'
 import { compileVirtual } from '../src/metro/compileVirtual'
 import { Platform } from '../src/metro/types'
+import { SAFE_AREA_INSET_BOTTOM, SAFE_AREA_INSET_TOP, SCREEN_HEIGHT, SCREEN_WIDTH } from './consts'
+
+jest.spyOn(Dimensions, 'get').mockReturnValue({ width: SCREEN_WIDTH, height: SCREEN_HEIGHT, scale: 1, fontScale: 1 })
 
 beforeAll(async () => {
     const cssPath = resolve('./tests/test.css')
@@ -18,6 +22,12 @@ beforeAll(async () => {
     eval(
         `const { Uniwind } = require('../src/core/config/config.native');
         Uniwind.__reinit(rt => ${virtualCode}, ['light', 'dark']);
+            Uniwind.updateInsets({
+            top: ${SAFE_AREA_INSET_TOP},
+            left: 0,
+            bottom: ${SAFE_AREA_INSET_BOTTOM},
+            right: 0,
+        });
     `,
     )
 })
diff --git a/packages/uniwind/tests/styles-parsing/safe-area.test.tsx b/packages/uniwind/tests/styles-parsing/safe-area.test.tsx
new file mode 100644
index 00000000..59d3251d
--- /dev/null
+++ b/packages/uniwind/tests/styles-parsing/safe-area.test.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import View from '../../src/components/native/View'
+import { SAFE_AREA_INSET_BOTTOM, SAFE_AREA_INSET_TOP, SCREEN_HEIGHT, TW_SPACING } from '../consts'
+import { renderUniwind } from '../utils'
+
+describe('Safe Area', () => {
+    test('Safe Area insets', () => {
+        const { getStylesFromId } = renderUniwind(
+            <React.Fragment>
+                <View className="p-safe" testID="p-safe" />
+                <View className="pt-safe-offset-4" testID="pt-safe" />
+                <View className="mb-safe-or-4" testID="mb-safe-or-4" />
+                <View className="h-screen-safe" testID="h-screen-safe" />
+            </React.Fragment>,
+        )
+
+        expect(getStylesFromId('p-safe').paddingTop).toBe(SAFE_AREA_INSET_TOP)
+        expect(getStylesFromId('p-safe').paddingBottom).toBe(SAFE_AREA_INSET_BOTTOM)
+        expect(getStylesFromId('pt-safe').paddingTop).toBe(SAFE_AREA_INSET_TOP + TW_SPACING * 4)
+        expect(getStylesFromId('mb-safe-or-4').marginBottom).toBe(SAFE_AREA_INSET_BOTTOM)
+        expect(getStylesFromId('h-screen-safe').height).toBe(SCREEN_HEIGHT - SAFE_AREA_INSET_TOP - SAFE_AREA_INSET_BOTTOM)
+    })
+})
diff --git a/packages/uniwind/tests/styles-parsing/spacing.test.tsx b/packages/uniwind/tests/styles-parsing/spacing.test.tsx
index c2b0872e..8a14db0d 100644
--- a/packages/uniwind/tests/styles-parsing/spacing.test.tsx
+++ b/packages/uniwind/tests/styles-parsing/spacing.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import View from '../../src/components/native/View'
+import { SCREEN_WIDTH } from '../consts'
 import { renderUniwind } from '../utils'
 
 describe('Spacing', () => {
@@ -24,7 +25,7 @@ describe('Spacing', () => {
         expect(getStylesFromId('h-full').height).toBe('100%')
         expect(getStylesFromId('w-custom').width).toBe(100)
         expect(getStylesFromId('h-custom').height).toBe('50%')
-        expect(getStylesFromId('w-50vw').width).toBe(375)
+        expect(getStylesFromId('w-50vw').width).toBe(SCREEN_WIDTH / 2)
     })
 
     test('Padding', () => {