Add background color cases to RNTester Text examples

facebook · Jan 20, 2018 · 19df006 · 19df006
1 parent 1f16f7f
commit 19df006
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/RNTester/js/TextExample.android.js b/RNTester/js/TextExample.android.js
@@ -354,13 +354,22 @@ class TextExample extends React.Component<{}> {
             <Text style={{letterSpacing: 9, marginTop: 5}}>
               letterSpacing = 9
             </Text>
+            <View style={{flexDirection: 'row'}}>
+              <Text style={{letterSpacing: 9, backgroundColor: 'fuchsia', marginTop: 5}}>
+                With background color
+              </Text>
+            </View>
             <Text style={{letterSpacing: -1, marginTop: 5}}>
               letterSpacing = -1
             </Text>
-            <Text style={{letterSpacing: 3, marginTop: 5}}>
+            <Text style={{letterSpacing: 3, backgroundColor: '#dddddd', marginTop: 5}}>
               [letterSpacing = 3]
-              <Text style={{letterSpacing: 0}}>[Nested letterSpacing = 0]</Text>
-              <Text style={{letterSpacing: 6}}>[Nested letterSpacing = 6]</Text>
+              <Text style={{letterSpacing: 0, backgroundColor: '#bbbbbb'}}>
+                [Nested letterSpacing = 0]
+              </Text>
+              <Text style={{letterSpacing: 6, backgroundColor: '#eeeeee'}}>
+                [Nested letterSpacing = 6]
+              </Text>
             </Text>
           </View>
         </RNTesterBlock>

diff --git a/RNTester/js/TextExample.ios.js b/RNTester/js/TextExample.ios.js
@@ -525,13 +525,22 @@ exports.examples = [
           <Text style={{letterSpacing: 9, marginTop: 5}}>
             letterSpacing = 9
           </Text>
+          <View style={{flexDirection: 'row'}}>
+            <Text style={{letterSpacing: 9, backgroundColor: 'fuchsia', marginTop: 5}}>
+              With background color
+            </Text>
+          </View>
           <Text style={{letterSpacing: -1, marginTop: 5}}>
             letterSpacing = -1
           </Text>
-          <Text style={{letterSpacing: 3, marginTop: 5}}>
+          <Text style={{letterSpacing: 3, backgroundColor: '#dddddd', marginTop: 5}}>
             [letterSpacing = 3]
-            <Text style={{letterSpacing: 0}}>[Nested letterSpacing = 0]</Text>
-            <Text style={{letterSpacing: 6}}>[Nested letterSpacing = 6]</Text>
+            <Text style={{letterSpacing: 0, backgroundColor: '#bbbbbb'}}>
+              [Nested letterSpacing = 0]
+            </Text>
+            <Text style={{letterSpacing: 6, backgroundColor: '#eeeeee'}}>
+              [Nested letterSpacing = 6]
+            </Text>
           </Text>
         </View>
       );