v1.1.0 react-native-elements#1802

flyingcircle · Feb 24, 2019 · f8b27a0 · f8b27a0
2 parents 141d3a7 + 0b048e6
commit f8b27a0
Show file tree

Hide file tree

Showing 17 changed files with 433 additions and 39 deletions.
diff --git a/docs/checkbox.md b/docs/checkbox.md
@@ -64,6 +64,7 @@ import { CheckBox } from 'react-native-elements'
 - [`right`](#right)
 - [`center`](#center)
 - [`title`](#title)
+- [`titleProps`](#titleprops)
 - [`containerStyle`](#containerstyle)
 - [`textStyle`](#textstyle)
 - [`onLongPress`](#onlongpress)
@@ -139,12 +140,20 @@ Aligns checkbox to center (optional)
 
 ### `title`
 
-Title of checkbox (required)
+Title of checkbox
 
 |  Type  | Default |
 | :----: | :-----: |
 | string |  none   |
 
+### `titleProps`
+
+Additional props for the title Text component (optional)
+
+|                                     Type                                     | Default |
+| :--------------------------------------------------------------------------: | :-----: |
+| {[...Text props](https://facebook.github.io/react-native/docs/text#props-1)} |  none   |
+
 ### `containerStyle`
 
 Style of main container (optional)

diff --git a/docs/customization.md b/docs/customization.md
@@ -304,3 +304,76 @@ const App = () => {
   );
 };
 ```
+
+---
+
+### Common Pitfalls
+
+This section outlines some common pitfalls when using Theming.
+
+#### My local styles aren't working with the theme
+
+It's important to understand that the `ThemeProvider` works by merging your local(external) styles with those set on the theme.
+This means that in both cases **the type of these styles must be the same**.
+
+##### Example 1
+
+```jsx
+const theme = {
+  Button: {
+    containerStyle: {
+      marginTop: 10;
+    }
+  }
+}
+
+<Button
+  containerStyle={{ backgroundColor: 'blue' }}
+/>
+```
+
+> ✅ Works
+>
+> In both cases the style is an `object`
+
+<br />
+
+##### Example 2
+
+```jsx
+const theme = {
+  Button: {
+    containerStyle: [
+      {
+        marginTop: 10;
+      }
+    ]
+  }
+}
+
+<Button containerStyle={[{ backgroundColor: 'blue' }]} />
+```
+
+> ✅ Works
+>
+> In both cases the style is an `array`
+
+<br />
+
+##### Example 3
+
+```jsx
+const theme = {
+  Button: {
+    containerStyle: {
+      marginTop: 10;
+    }
+  }
+}
+
+<Button containerStyle={[{ backgroundColor: 'blue' }]} />
+```
+
+> 🚫 Doesn't work
+>
+> In one case the style is an `object` and another the style is an `array`
diff --git a/docs/text.md b/docs/text.md
@@ -24,6 +24,10 @@ Text displays words and characters at various sizes.
 - [`h2`](#h2)
 - [`h3`](#h3)
 - [`h4`](#h4)
+- [`h1Style`](#h1style)
+- [`h2Style`](#h2style)
+- [`h3Style`](#h3style)
+- [`h4Style`](#h4style)
 - [`style`](#style)
 
 ---
@@ -70,6 +74,46 @@ font size 22 (optional)
 
 ---
 
+### `h1Style`
+
+Styling for when `h1` is set (optional)
+
+|        Type         | Default |
+| :-----------------: | :-----: |
+| Text style (object) |  none   |
+
+---
+
+### `h2Style`
+
+Styling for when `h2` is set (optional)
+
+|        Type         | Default |
+| :-----------------: | :-----: |
+| Text style (object) |  none   |
+
+---
+
+### `h3Style`
+
+Styling for when `h3` is set (optional)
+
+|        Type         | Default |
+| :-----------------: | :-----: |
+| Text style (object) |  none   |
+
+---
+
+### `h4Style`
+
+Styling for when `h4` is set (optional)
+
+|        Type         | Default |
+| :-----------------: | :-----: |
+| Text style (object) |  none   |
+
+---
+
 ### `style`
 
 add additional styling for Text (optional)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-elements",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React Native Elements & UI Toolkit",
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -34,8 +34,8 @@
   },
   "dependencies": {
     "color": "^3.1.0",
+    "deepmerge": "^3.1.0",
     "hoist-non-react-statics": "^3.1.0",
-    "lodash.merge": "^4.6.1",
     "opencollective-postinstall": "^2.0.0",
     "prop-types": "^15.5.8",
     "react-native-ratings": "^6.3.0",
@@ -70,14 +70,14 @@
     "lint-staged": "^8.0.4",
     "prettier": "^1.15.3",
     "react": "16.3.1",
-    "react-dom": "16.2.0",
+    "react-dom": "16.3.3",
     "react-native": "0.55.4",
     "react-native-vector-icons": "^6.0.2",
     "react-test-renderer": "^16.6.0",
     "webpack": "^2.2.1"
   },
   "peerDependencies": {
-    "react-native-vector-icons": ">4.2.0"
+    "react-native-vector-icons": ">6.0.0"
   },
   "jest": {
     "preset": "react-native",

diff --git a/src/buttons/Button.js b/src/buttons/Button.js
@@ -65,7 +65,7 @@ class Button extends Component {
       if (Platform.Version >= 21) {
         attributes.background = TouchableNativeFeedback.Ripple(
           'ThemeAttrAndroid',
-          true
+          false
         );
       } else {
         attributes.background = TouchableNativeFeedback.SelectableBackground();

diff --git a/src/checkbox/CheckBox.js b/src/checkbox/CheckBox.js
@@ -21,6 +21,7 @@ const CheckBox = props => {
     checked,
     iconRight,
     title,
+    titleProps,
     center,
     right,
     containerStyle,
@@ -65,6 +66,7 @@ const CheckBox = props => {
                   textStyle && textStyle,
                   fontFamily && { fontFamily },
                 ])}
+                {...titleProps}
               >
                 {checked ? checkedTitle || title : title}
               </TextElement>
@@ -80,6 +82,7 @@ CheckBox.propTypes = {
   Component: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   iconRight: PropTypes.bool,
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  titleProps: PropTypes.object,
   center: PropTypes.bool,
   right: PropTypes.bool,
   containerStyle: ViewPropTypes.style,
@@ -101,6 +104,7 @@ CheckBox.defaultProps = {
   uncheckedIcon: 'square-o',
   size: 24,
   Component: TouchableOpacity,
+  titleProps: {},
 };
 
 const styles = {

diff --git a/src/checkbox/__tests__/CheckBox.js b/src/checkbox/__tests__/CheckBox.js
@@ -94,6 +94,22 @@ describe('CheckBox Component', () => {
     expect(toJson(component)).toMatchSnapshot();
   });
 
+  it('should allow passing props to the title', () => {
+    const component = shallow(
+      <CheckBox
+        theme={theme}
+        checked
+        title="Yea"
+        titleProps={{ numberOfLines: 2 }}
+      />
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+    expect(
+      component.find({ testID: 'checkboxTitle' }).props().numberOfLines
+    ).toBe(2);
+  });
+
   it('should allow custom checked Icon when unchecked', () => {
     const component = shallow(
       <CheckBox