Better layout for Text examples

examples/.storybook/decorator-centered.js

@@ -9,6 +9,10 @@ const styles = StyleSheet.create({
   }
 });
 
-export default function (storyFn) {
-  return <View style={[ StyleSheet.absoluteFill, styles.root ]}>{storyFn()}</View>;
+export default function (renderStory) {
+  return (
+    <View style={[ StyleSheet.absoluteFill, styles.root ]}>
+      {renderStory()}
+    </View>
+  );
 }

examples/Text/TextExample.js

@@ -271,7 +271,7 @@ const examples = [
         <Text>
           auto (default) - english LTR
         </Text>
-        <Text>
+        <Text style={{ writingDirection: 'rtl' }}>
           أحب اللغة العربية auto (default) - arabic RTL
         </Text>
         <Text style={{textAlign: 'left'}}>
@@ -467,5 +467,6 @@ var styles = StyleSheet.create({
 
 examples.forEach((example) => {
   storiesOf('<Text>', module)
+    .addDecorator((renderStory) => <View style={{ width: 320 }}>{renderStory()}</View>)
     .add(example.title, () => example.render())
 })