Repository: callstack/react-native-paper (ts)

Issue:
Wrong fontSize for Caption
Thank you for all the work you put into this library

<!-- Issues that don't use this template are likely to be closed. -->
<!-- Please search the existing issues and read the documentation before opening an issue. -->

### Current behaviour

Currently the fontSize for Caption is 14 
https://github.com/callstack/react-native-paper/blob/ce97029dc900f51b2c3f42335c20459e3688c5fe/src/components/Typography/Caption.js#L41-L47
<!-- What's currently happening? -->

### Expected behaviour

I expected it to be 12, according to material spec:
https://material.io/design/typography/the-type-system.html#
<!-- What do you expect to happen? If there is an error, provide the complete error message with stack trace. -->

I can make a PR fixing this, I'm also interested in adding more Typography components like `Body1` `Body2`, all the `H1, H2, H3, etc.`

Pull request:
Fix caption font size
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Motivation
This PR aims to fix #563 
<!-- What existing problem does the pull request solve? Can you solve the issue with a different approach? -->

### Test plan
Use the example App and check if `font-size` of Captions are 12
<!-- List the steps with which we can test this change. Provide screenshots if this changes anything visual. -->

I also added Snapshot tests for this Component

Patch:
diff --git a/src/components/Typography/Caption.js b/src/components/Typography/Caption.js
index bdbb3cd9e..424c37dd3 100644
--- a/src/components/Typography/Caption.js
+++ b/src/components/Typography/Caption.js
@@ -40,7 +40,7 @@ export default Caption;
 
 const styles = StyleSheet.create({
   text: {
-    fontSize: 14,
+    fontSize: 12,
     lineHeight: 20,
     marginVertical: 2,
   },


Test patch:
diff --git a/src/components/__tests__/Typography/Caption.test.js b/src/components/__tests__/Typography/Caption.test.js
new file mode 100644
index 000000000..0fd95ee3d
--- /dev/null
+++ b/src/components/__tests__/Typography/Caption.test.js
@@ -0,0 +1,23 @@
+/* @flow */
+
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+import Caption from '../../Typography/Caption';
+
+it('renders caption with children as content', () => {
+  const tree = renderer.create(<Caption>Caption content</Caption>).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders caption applying style', () => {
+  const tree = renderer
+    .create(
+      <Caption style={{ fontSize: 20, color: 'red' }}>
+        Big and red caption
+      </Caption>
+    )
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/Typography/__snapshots__/Caption.test.js.snap b/src/components/__tests__/Typography/__snapshots__/Caption.test.js.snap
new file mode 100644
index 000000000..71e56da25
--- /dev/null
+++ b/src/components/__tests__/Typography/__snapshots__/Caption.test.js.snap
@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders caption applying style 1`] = `
+<Text
+  accessible={true}
+  allowFontScaling={true}
+  ellipsizeMode="tail"
+  style={
+    Array [
+      Object {
+        "color": "#000000",
+        "fontFamily": "Helvetica Neue",
+        "textAlign": "left",
+        "writingDirection": "ltr",
+      },
+      Array [
+        Object {
+          "color": "rgba(0, 0, 0, 0.54)",
+          "fontFamily": "Helvetica Neue",
+          "textAlign": "left",
+          "writingDirection": "ltr",
+        },
+        Array [
+          Object {
+            "fontSize": 12,
+            "lineHeight": 20,
+            "marginVertical": 2,
+          },
+          Object {
+            "color": "red",
+            "fontSize": 20,
+          },
+        ],
+        Array [
+          Object {
+            "fontSize": 12,
+            "lineHeight": 20,
+            "marginVertical": 2,
+          },
+          Object {
+            "color": "red",
+            "fontSize": 20,
+          },
+        ],
+      ],
+    ]
+  }
+  theme={
+    Object {
+      "colors": Object {
+        "accent": "#03dac4",
+        "backdrop": "rgba(0, 0, 0, 0.5)",
+        "background": "#f6f6f6",
+        "disabled": "rgba(0, 0, 0, 0.26)",
+        "error": "#B00020",
+        "placeholder": "rgba(0, 0, 0, 0.54)",
+        "primary": "#6200ee",
+        "surface": "#ffffff",
+        "text": "#000000",
+      },
+      "dark": false,
+      "fonts": Object {
+        "light": "HelveticaNeue-Light",
+        "medium": "HelveticaNeue-Medium",
+        "regular": "Helvetica Neue",
+        "thin": "HelveticaNeue-Thin",
+      },
+      "roundness": 4,
+    }
+  }
+>
+  Big and red caption
+</Text>
+`;
+
+exports[`renders caption with children as content 1`] = `
+<Text
+  accessible={true}
+  allowFontScaling={true}
+  ellipsizeMode="tail"
+  style={
+    Array [
+      Object {
+        "color": "#000000",
+        "fontFamily": "Helvetica Neue",
+        "textAlign": "left",
+        "writingDirection": "ltr",
+      },
+      Array [
+        Object {
+          "color": "rgba(0, 0, 0, 0.54)",
+          "fontFamily": "Helvetica Neue",
+          "textAlign": "left",
+          "writingDirection": "ltr",
+        },
+        Array [
+          Object {
+            "fontSize": 12,
+            "lineHeight": 20,
+            "marginVertical": 2,
+          },
+          undefined,
+        ],
+        Array [
+          Object {
+            "fontSize": 12,
+            "lineHeight": 20,
+            "marginVertical": 2,
+          },
+          undefined,
+        ],
+      ],
+    ]
+  }
+  theme={
+    Object {
+      "colors": Object {
+        "accent": "#03dac4",
+        "backdrop": "rgba(0, 0, 0, 0.5)",
+        "background": "#f6f6f6",
+        "disabled": "rgba(0, 0, 0, 0.26)",
+        "error": "#B00020",
+        "placeholder": "rgba(0, 0, 0, 0.54)",
+        "primary": "#6200ee",
+        "surface": "#ffffff",
+        "text": "#000000",
+      },
+      "dark": false,
+      "fonts": Object {
+        "light": "HelveticaNeue-Light",
+        "medium": "HelveticaNeue-Medium",
+        "regular": "Helvetica Neue",
+        "thin": "HelveticaNeue-Thin",
+      },
+      "roundness": 4,
+    }
+  }
+>
+  Caption content
+</Text>
+`;