From 46eee5c09821ceadf03b414d44a5c7aeb6943e6d Mon Sep 17 00:00:00 2001
From: Kaio Duarte <duartedossantos@gmail.com>
Date: Mon, 9 Mar 2020 00:59:12 +0000
Subject: [PATCH 1/3] Text Style Props: add Snack Example

---
 docs/text-style-props.md | 350 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 350 insertions(+)

diff --git a/docs/text-style-props.md b/docs/text-style-props.md
index 8d0acab7067..2382f7b432a 100644
--- a/docs/text-style-props.md
+++ b/docs/text-style-props.md
@@ -3,6 +3,356 @@ id: text-style-props
 title: Text Style Props
 ---
 
+### Example
+
+```SnackPlayer name=TextStyleProps
+import React, { useState } from 'react';
+import {
+  FlatList,
+  Platform,
+  ScrollView,
+  Slider,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Constants from 'expo-constants';
+
+const fontStyles = ['normal', 'italic'];
+const fontVariants = [
+  undefined,
+  'small-caps',
+  'oldstyle-nums',
+  'lining-nums',
+  'tabular-nums',
+  'proportional-nums',
+];
+const fontWeights = [
+  'normal',
+  'bold',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textDecorationLines = [
+  'none',
+  'underline',
+  'line-through',
+  'underline line-through',
+];
+const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
+const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
+const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
+const writingDirections = ['auto', 'ltr', 'rtl'];
+
+export default function App() {
+  const [fontSize, setFontSize] = useState(10);
+  const [fontStyleIdx, setFontStyleIdx] = useState(0);
+  const [fontWeightIdx, setFontWeightIdx] = useState(0);
+  const [lineHeight, setLineHeight] = useState(10);
+  const [textAlignIdx, setTextAlignIdx] = useState(0);
+  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
+  const [includeFontPadding, setIncludeFontPadding] = useState(false);
+  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
+  const [fontVariantIdx, setFontVariantIdx] = useState(0);
+  const [letterSpacing, setLetterSpacing] = useState(0);
+  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
+  const [textTransformIdx, setTextTransformIdx] = useState(0);
+  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
+  const [textShadowRadius, setTextShadowRadius] = useState(0);
+  const [textShadowOffset, setTextShadowOffset] = useState({
+    height: 0,
+    width: 0,
+  });
+
+  return (
+    <View style={styles.container}>
+      <Text
+        style={[
+          styles.paragraph,
+          {
+            fontSize,
+            fontStyle: fontStyles[fontStyleIdx],
+            fontWeight: fontWeights[fontWeightIdx],
+            lineHeight,
+            textAlign: textAlignments[textAlignIdx],
+            textDecorationLine: textDecorationLines[textDecorationLineIdx],
+            textTransform: textTransformations[textTransformIdx],
+            textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
+            fontVariant: [fontVariants[fontVariantIdx]],
+            letterSpacing,
+            includeFontPadding,
+            textDecorationStyle: textDecorationStyles[textDecorationStyleIdx],
+            writingDirection: writingDirections[writingDirectionIdx],
+            textShadowOffset,
+            textShadowRadius,
+          },
+        ]}>
+        Lorem Ipsum is simply dummy text of the printing and typesetting
+        industry. 112 Likes
+      </Text>
+      <ScrollView>
+        <View>
+          <Text>Common platform properties</Text>
+          <CustomSlider
+            label="Text Shadow Offset - Height"
+            value={textShadowOffset.height}
+            minimumValue={-40}
+            maximumValue={40}
+            handleValueChange={val =>
+              setTextShadowOffset(prev => ({ ...prev, height: val }))
+            }
+          />
+          <CustomSlider
+            label="Text Shadow Offset - Width"
+            value={textShadowOffset.width}
+            minimumValue={-40}
+            maximumValue={40}
+            handleValueChange={val =>
+              setTextShadowOffset(prev => ({ ...prev, width: val }))
+            }
+          />
+          <CustomSlider
+            label="Font Size"
+            value={fontSize}
+            maximumValue={40}
+            handleValueChange={setFontSize}
+          />
+          <CustomPicker
+            label="Font Style"
+            data={fontStyles}
+            currentIndex={fontStyleIdx}
+            onSelected={setFontStyleIdx}
+          />
+          <CustomPicker
+            label="Font Weight"
+            data={fontWeights}
+            currentIndex={fontWeightIdx}
+            onSelected={setFontWeightIdx}
+          />
+          <CustomSlider
+            label="Line Height"
+            value={lineHeight}
+            minimumValue={10}
+            maximumValue={50}
+            handleValueChange={setLineHeight}
+          />
+          <CustomPicker
+            label="Text Align"
+            data={textAlignments}
+            currentIndex={textAlignIdx}
+            onSelected={setTextAlignIdx}
+          />
+          <CustomPicker
+            label="Text Decoration Line"
+            data={textDecorationLines}
+            currentIndex={textDecorationLineIdx}
+            onSelected={setTextDecorationLineIdx}
+          />
+          <CustomSlider
+            label="Text Shadow Radius"
+            value={textShadowRadius}
+            handleValueChange={setTextShadowRadius}
+          />
+          <CustomPicker
+            label="Font Variant"
+            data={fontVariants}
+            currentIndex={fontVariantIdx}
+            onSelected={setFontVariantIdx}
+          />
+          <CustomSlider
+            label="Letter Spacing"
+            step={0.1}
+            value={letterSpacing}
+            handleValueChange={setLetterSpacing}
+          />
+          <CustomPicker
+            label="Text Transform"
+            data={textTransformations}
+            currentIndex={textTransformIdx}
+            onSelected={setTextTransformIdx}
+          />
+        </View>
+        {Platform.OS === 'android' && (
+          <View style={styles.platformContainer}>
+            <Text style={styles.platformContainerTitle}>
+              Android only properties
+            </Text>
+            <CustomPicker
+              label="Text Vertical Align"
+              data={textAlignmentsVertical}
+              currentIndex={textVerticalAlignIdx}
+              onSelected={setTextVerticalAlignIdx}
+            />
+            <CustomSwitch
+              label="Include Font Padding"
+              handleValueChange={setIncludeFontPadding}
+              value={includeFontPadding}
+            />
+          </View>
+        )}
+        {Platform.OS === 'ios' && (
+          <View style={styles.platformContainer}>
+            <Text style={styles.platformContainerTitle}>
+              iOS only properties
+            </Text>
+            <CustomPicker
+              label="Text Decoration Style"
+              data={textDecorationStyles}
+              currentIndex={textDecorationStyleIdx}
+              onSelected={setTextDecorationStyleIdx}
+            />
+            <CustomPicker
+              label="Writing Direction"
+              data={writingDirections}
+              currentIndex={writingDirectionIdx}
+              onSelected={setWritingDirectionIdx}
+            />
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+function CustomSwitch({ label, handleValueChange, value }) {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={{ alignItems: 'flex-start' }}>
+        <Switch
+          trackColor={{ false: '#767577', true: '#DAA520' }}
+          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+}
+
+function CustomSlider({
+  label,
+  handleValueChange,
+  step = 1,
+  minimumValue = 0,
+  maximumValue = 10,
+  value,
+}) {
+  return (
+    <>
+      {label && (
+        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
+      )}
+      <View style={styles.wrapperHorizontal}>
+        <Slider
+          thumbTintColor="#DAA520"
+          minimumTrackTintColor="#DAA520"
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          step={step}
+          onValueChange={handleValueChange}
+          value={value}
+        />
+      </View>
+    </>
+  );
+}
+
+function CustomPicker({ label, data, currentIndex, onSelected }) {
+  return (
+    <>
+      <Text style={styles.title}>{label}</Text>
+      <View style={styles.wrapperHorizontal}>
+        <FlatList
+          bounces
+          horizontal
+          data={data}
+          keyExtractor={(item, idx) => String(item)}
+          renderItem={({ item, index }) => {
+            const selected = index === currentIndex;
+            return (
+              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
+                <View
+                  style={[
+                    styles.itemStyleHorizontal,
+                    selected && styles.itemSelectedStyleHorizontal,
+                  ]}>
+                  <Text
+                    style={{
+                      textAlign: 'center',
+                      color: selected ? 'black' : 'grey',
+                      fontWeight: selected ? 'bold' : 'normal',
+                    }}>
+                    {item + ''}
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            );
+          }}
+        />
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: Constants.statusBarHeight,
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+  paragraph: {
+    color: 'black',
+    textDecorationColor: 'yellow',
+    textShadowColor: 'red',
+    textShadowRadius: 1,
+    margin: 24,
+  },
+  wrapperHorizontal: {
+    height: 54,
+    justifyContent: 'center',
+    color: 'black',
+    marginBottom: 12,
+  },
+  itemStyleHorizontal: {
+    marginRight: 10,
+    height: 50,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 25,
+    textAlign: 'center',
+    justifyContent: 'center',
+  },
+  itemSelectedStyleHorizontal: {
+    borderWidth: 2,
+    borderColor: '#DAA520',
+  },
+  platformContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+  },
+  platformContainerTitle: {
+    marginTop: 8,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginVertical: 4,
+  },
+});
+```
+
 # Reference
 
 ## Props

From 309508282d8b13c5f01639fba984cd3fb0905831 Mon Sep 17 00:00:00 2001
From: Kaio Duarte <duartedossantos@gmail.com>
Date: Mon, 9 Mar 2020 01:11:20 +0000
Subject: [PATCH 2/3] limit supported platforms

---
 docs/text-style-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/text-style-props.md b/docs/text-style-props.md
index 2382f7b432a..c4101152fd7 100644
--- a/docs/text-style-props.md
+++ b/docs/text-style-props.md
@@ -5,7 +5,7 @@ title: Text Style Props
 
 ### Example
 
-```SnackPlayer name=TextStyleProps
+```SnackPlayer name=TextStyleProps&supportedPlatforms=android,ios
 import React, { useState } from 'react';
 import {
   FlatList,

From 6f7cdb69335dbd20aa1d7c31ccb4e9c2726abf4c Mon Sep 17 00:00:00 2001
From: R Nabors <rachelnabors@users.noreply.github.com>
Date: Mon, 9 Mar 2020 11:51:24 +0000
Subject: [PATCH 3/3] Tidying code

---
 docs/text-style-props.md | 144 +++++++++++++++++++--------------------
 1 file changed, 69 insertions(+), 75 deletions(-)

diff --git a/docs/text-style-props.md b/docs/text-style-props.md
index c4101152fd7..42622481ff1 100644
--- a/docs/text-style-props.md
+++ b/docs/text-style-props.md
@@ -6,53 +6,43 @@ title: Text Style Props
 ### Example
 
 ```SnackPlayer name=TextStyleProps&supportedPlatforms=android,ios
-import React, { useState } from 'react';
-import {
-  FlatList,
-  Platform,
-  ScrollView,
-  Slider,
-  StyleSheet,
-  Switch,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import Constants from 'expo-constants';
-
-const fontStyles = ['normal', 'italic'];
+import React, { useState } from "react";
+import { FlatList, Platform, ScrollView, Slider, StyleSheet, Switch, Text, TouchableWithoutFeedback, View } from "react-native";
+import Constants from "expo-constants";
+
+const fontStyles = ["normal", "italic"];
 const fontVariants = [
   undefined,
-  'small-caps',
-  'oldstyle-nums',
-  'lining-nums',
-  'tabular-nums',
-  'proportional-nums',
+  "small-caps",
+  "oldstyle-nums",
+  "lining-nums",
+  "tabular-nums",
+  "proportional-nums"
 ];
 const fontWeights = [
-  'normal',
-  'bold',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
+  "normal",
+  "bold",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900"
 ];
-const textAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+const textAlignments = ["auto", "left", "right", "center", "justify"];
 const textDecorationLines = [
-  'none',
-  'underline',
-  'line-through',
-  'underline line-through',
+  "none",
+  "underline",
+  "line-through",
+  "underline line-through"
 ];
-const textDecorationStyles = ['solid', 'double', 'dotted', 'dashed'];
-const textTransformations = ['none', 'uppercase', 'lowercase', 'capitalize'];
-const textAlignmentsVertical = ['auto', 'top', 'bottom', 'center'];
-const writingDirections = ['auto', 'ltr', 'rtl'];
+const textDecorationStyles = ["solid", "double", "dotted", "dashed"];
+const textTransformations = ["none", "uppercase", "lowercase", "capitalize"];
+const textAlignmentsVertical = ["auto", "top", "bottom", "center"];
+const writingDirections = ["auto", "ltr", "rtl"];
 
 export default function App() {
   const [fontSize, setFontSize] = useState(10);
@@ -71,7 +61,7 @@ export default function App() {
   const [textShadowRadius, setTextShadowRadius] = useState(0);
   const [textShadowOffset, setTextShadowOffset] = useState({
     height: 0,
-    width: 0,
+    width: 0
   });
 
   return (
@@ -94,9 +84,10 @@ export default function App() {
             textDecorationStyle: textDecorationStyles[textDecorationStyleIdx],
             writingDirection: writingDirections[writingDirectionIdx],
             textShadowOffset,
-            textShadowRadius,
-          },
-        ]}>
+            textShadowRadius
+          }
+        ]}
+      >
         Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. 112 Likes
       </Text>
@@ -182,7 +173,7 @@ export default function App() {
             onSelected={setTextTransformIdx}
           />
         </View>
-        {Platform.OS === 'android' && (
+        {Platform.OS === "android" && (
           <View style={styles.platformContainer}>
             <Text style={styles.platformContainerTitle}>
               Android only properties
@@ -200,7 +191,7 @@ export default function App() {
             />
           </View>
         )}
-        {Platform.OS === 'ios' && (
+        {Platform.OS === "ios" && (
           <View style={styles.platformContainer}>
             <Text style={styles.platformContainerTitle}>
               iOS only properties
@@ -228,10 +219,10 @@ function CustomSwitch({ label, handleValueChange, value }) {
   return (
     <>
       <Text style={styles.title}>{label}</Text>
-      <View style={{ alignItems: 'flex-start' }}>
+      <View style={{ alignItems: "flex-start" }}>
         <Switch
-          trackColor={{ false: '#767577', true: '#DAA520' }}
-          thumbColor={value ? '#DAA520' : '#f4f3f4'}
+          trackColor={{ false: "#767577", true: "#DAA520" }}
+          thumbColor={value ? "#DAA520" : "#f4f3f4"}
           onValueChange={handleValueChange}
           value={value}
         />
@@ -246,7 +237,7 @@ function CustomSlider({
   step = 1,
   minimumValue = 0,
   maximumValue = 10,
-  value,
+  value
 }) {
   return (
     <>
@@ -285,15 +276,17 @@ function CustomPicker({ label, data, currentIndex, onSelected }) {
                 <View
                   style={[
                     styles.itemStyleHorizontal,
-                    selected && styles.itemSelectedStyleHorizontal,
-                  ]}>
+                    selected && styles.itemSelectedStyleHorizontal
+                  ]}
+                >
                   <Text
                     style={{
-                      textAlign: 'center',
-                      color: selected ? 'black' : 'grey',
-                      fontWeight: selected ? 'bold' : 'normal',
-                    }}>
-                    {item + ''}
+                      textAlign: "center",
+                      color: selected ? "black" : "grey",
+                      fontWeight: selected ? "bold" : "normal"
+                    }}
+                  >
+                    {item + ""}
                   </Text>
                 </View>
               </TouchableWithoutFeedback>
@@ -309,48 +302,49 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     paddingTop: Constants.statusBarHeight,
-    backgroundColor: '#ecf0f1',
-    padding: 8,
+    backgroundColor: "#ecf0f1",
+    padding: 8
   },
   paragraph: {
-    color: 'black',
-    textDecorationColor: 'yellow',
-    textShadowColor: 'red',
+    color: "black",
+    textDecorationColor: "yellow",
+    textShadowColor: "red",
     textShadowRadius: 1,
-    margin: 24,
+    margin: 24
   },
   wrapperHorizontal: {
     height: 54,
-    justifyContent: 'center',
-    color: 'black',
-    marginBottom: 12,
+    justifyContent: "center",
+    color: "black",
+    marginBottom: 12
   },
   itemStyleHorizontal: {
     marginRight: 10,
     height: 50,
     padding: 8,
     borderWidth: 1,
-    borderColor: 'grey',
+    borderColor: "grey",
     borderRadius: 25,
-    textAlign: 'center',
-    justifyContent: 'center',
+    textAlign: "center",
+    justifyContent: "center"
   },
   itemSelectedStyleHorizontal: {
     borderWidth: 2,
-    borderColor: '#DAA520',
+    borderColor: "#DAA520"
   },
   platformContainer: {
     marginTop: 8,
-    borderTopWidth: 1,
+    borderTopWidth: 1
   },
   platformContainerTitle: {
-    marginTop: 8,
+    marginTop: 8
   },
   title: {
-    fontWeight: 'bold',
-    marginVertical: 4,
-  },
+    fontWeight: "bold",
+    marginVertical: 4
+  }
 });
+
 ```
 
 # Reference