fix(native): Fix text breaking TextInput, add TextInput story

Author: Kashish Grover

src/Text/native/Text.js

@@ -1,7 +1,6 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Platform, Text as ReactNativeText } from 'react-native';
+import { Platform } from 'react-native';
 import { responsiveSizePx } from '../../utils/reactNativeResponsiveSize';
 import theme from '../../theme/native';
 
@@ -14,7 +13,7 @@ const fontFamilies = {
   bold: 'Averta-Bold',
 };
 
-const Text = styled((props) => <ReactNativeText {...props} />)`
+const Text = styled.Text`
   color: ${(props) => props.theme.color[props.color]};
   font-size: ${(props) => responsiveSizePx(props.theme.fontSize[props.size])};
   font-family: ${(props) => fontFamilies[props.weight]};

storybook/native/config.js

@@ -6,9 +6,8 @@ import { getStorybookUI, addDecorator, configure } from '@storybook/react-native
 import { Font } from 'expo';
 import theme from '../../src/theme/native';
 
-console.disableYellowBox = true;
-
 const loadStories = () => {
+  require('../../src/TextInput/native/TextInput.story');
   require('../../src/Card/native/Card.story');
   require('../../src/Button/native/Button.story');
   require('../../src/Text/native/Text.story');
@@ -20,7 +19,7 @@ const StorybookUI = getStorybookUI();
 
 addDecorator((story) => (
   <ThemeProvider theme={theme}>
-    <ScrollView style={{ backgroundColor: '#eee' }}>
+    <ScrollView style={{ backgroundColor: '#eee', padding: 16 }}>
       {story()}
     </ScrollView>
   </ThemeProvider>