Text to Spannable conversion is now using PRIORITY flag to enforce th…

…e order of spans

Summary:
When we convert nested <Text> components to Spannable object we must enforce the order of spans somehow,
otherwise we will have Spannable object with unpredictable order of spans, which will produce unpredictalbe text layout.
We can do it only using `Spannable.SPAN_PRIORITY` feature because Spannable objects do not maintain the order of spans internally.

We also have to fix this to implement autoexpandable <TextInput>.

Reviewed By: achen1

Differential Revision: D5811172

fbshipit-source-id: 5bc68b869e58aba27d6986581af9fe3343d116a7

js/TextExample.android.js

@@ -231,6 +231,27 @@ class TextExample extends React.Component<{}> {
         <RNTesterBlock title="Nested">
           <Text onPress={() => console.log('1st')}>
             (Normal text,
+            <Text style={{color: 'red', fontWeight: 'bold'}}>
+              (R)red
+              <Text style={{color: 'green', fontWeight: 'normal'}}>
+                (G)green
+                <Text style={{color: 'blue', fontWeight: 'bold'}}>
+                  (B)blue
+                  <Text style={{color: 'cyan', fontWeight: 'normal'}}>
+                    (C)cyan
+                    <Text style={{color: 'magenta', fontWeight: 'bold'}}>
+                      (M)magenta
+                      <Text style={{color: 'yellow', fontWeight: 'normal'}}>
+                        (Y)yellow
+                        <Text style={{color: 'black', fontWeight: 'bold'}}>
+                          (K)black
+                        </Text>
+                      </Text>
+                    </Text>
+                  </Text>
+                </Text>
+              </Text>
+            </Text>
             <Text style={{fontWeight: 'bold'}} onPress={() => console.log('2nd')}>
               (and bold
               <Text style={{fontStyle: 'italic', fontSize: 11, color: '#527fe4'}} onPress={() => console.log('3rd')}>