From 3eb81cf6ee635552c314e90735fd29f92a11f75b Mon Sep 17 00:00:00 2001
From: Lukas Kurucz <lukas@kurucz.org>
Date: Sun, 3 Jun 2018 20:50:07 +0800
Subject: [PATCH] Improve style validation

validation rules based on RN doc spec, prevents crashing on unsupported style values
---
 src/utils/filter-styles.js | 63 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/src/utils/filter-styles.js b/src/utils/filter-styles.js
index 40645a4..df4e9f7 100644
--- a/src/utils/filter-styles.js
+++ b/src/utils/filter-styles.js
@@ -2,8 +2,69 @@
 
 import { StyleSheet } from "react-native";
 
+const isNumber = value => Number.isFinite(value);
+const isString = value => Number.isNaN(value);
+
 const validateStyles = {
-  fontSize: [value => Number.isFinite(value)]
+  // VIEW - styles
+  backfaceVisibility: [value => ["visible", "hidden"].includes(value)],
+  borderColor: [isString],
+  borderTopColor: [isString],
+  borderRightColor: [isString],
+  borderBottomColor: [isString],
+  borderLeftColor: [isString],
+  borderWidth: [isNumber],
+  borderTopWidth: [isNumber],
+  borderRightWidth: [isNumber],
+  borderBottomWidth: [isNumber],
+  borderLeftWidth: [isNumber],
+  borderRadius: [isNumber],
+  borderStyle: [value => ["solid", "dotted", "dashed"].includes(value)],
+  // TEXT - styles
+  // fontFamily - can't prevent crash, since fonts are loaded dynamically
+  fontSize: [isNumber],
+  fontStyle: [value => ["normal", "italic"].includes(value)],
+  fontVariant: [
+    value =>
+      [
+        "small-caps",
+        "oldstyle-nums",
+        "lining-nums",
+        "tabular-nums",
+        "proportional-nums"
+      ].includes(value)
+  ],
+  fontWeight: [
+    value =>
+      [
+        "normal",
+        "bold",
+        "100",
+        "200",
+        "300",
+        "400",
+        "500",
+        "600",
+        "700",
+        "800",
+        "900"
+      ].includes(value)
+  ],
+  letterSpacing: [isNumber],
+  lineHeight: [isNumber],
+  opacity: [isNumber],
+  textAlign: [
+    value => ["auto", "left", "right", "center", "justify"].includes(value)
+  ],
+  textDecorationLine: [
+    value =>
+      ["none", "underline", "line-through", "underline line-through"].includes(
+        value
+      )
+  ],
+  textDecorationStyle: [
+    value => ["solid", "double", "dotted", "dashed"].includes(value)
+  ]
 };
 
 const isValidStyle = (style, value) => {