From 031c05d6e6a76a211cfc39ad34c1636da607d8e1 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Sun, 25 Apr 2021 23:27:31 +0530
Subject: [PATCH] Improved unit tests coverage in the package (#2974)

* improved avatar unit tests coverage

* improved switch unit tests

* improved checkbox unit tests

* improved themeprovider and fab unit tests

* improved input tests

* added more unit tests

* improved withBadge unit tests

* Added more tests for button and ListItem
---
 src/avatar/Avatar.tsx                         |   4 +-
 src/avatar/__tests__/Avatar.js                |  21 +
 .../__tests__/__snapshots__/Avatar.js.snap    |  68 ++
 .../__tests__/__snapshots__/withBadge.js.snap |  26 +
 src/badge/__tests__/withBadge.js              |   7 +
 src/buttons/__tests__/Button.js               |  14 +
 src/buttons/__tests__/ButtonGroup.js          |   1 +
 src/buttons/__tests__/FAB.js                  |  41 +
 src/buttons/__tests__/SpeedDial.js            |   8 +-
 .../__tests__/__snapshots__/FAB.js.snap       | 875 ++++++++++++++++++
 .../__tests__/__snapshots__/SpeedDial.js.snap |  19 +-
 src/checkbox/__tests__/CheckBox.js            |  31 +
 .../__tests__/__snapshots__/CheckBox.js.snap  | 239 +++++
 src/config/__tests__/ThemeProvider.js         |   9 +
 .../__snapshots__/ThemeProvider.js.snap       |  72 ++
 src/input/__tests__/Input.js                  |   6 +
 .../__tests__/__snapshots__/Input.js.snap     |  55 ++
 .../__tests__/LinearProgress.js               |   7 +
 src/list/__tests__/ListItem.js                |  21 +
 .../__tests__/__snapshots__/ListItem.js.snap  |  40 +
 src/searchbar/__tests__/SearchBar-android.js  |  11 +
 src/switch/__tests__/Switch.js                |  18 +-
 .../__tests__/__snapshots__/Switch.js.snap    |  19 +-
 src/tab/__tests__/tab.js                      |   6 +
 24 files changed, 1599 insertions(+), 19 deletions(-)

diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
index 14d4959568..330c82d7d2 100644
--- a/src/avatar/Avatar.tsx
+++ b/src/avatar/Avatar.tsx
@@ -74,8 +74,8 @@ const AvatarComponent: Avatar = ({
   children,
   ...attributes
 }: React.PropsWithChildren<AvatarProps>) => {
-  const width =
-    typeof size === 'number' ? size : avatarSizes[size] || avatarSizes.small;
+  let width = avatarSizes.small;
+  width = typeof size === 'number' ? size : avatarSizes[size];
   const height = width;
   const titleSize = width / 2;
   const iconSize = width / 2;
diff --git a/src/avatar/__tests__/Avatar.js b/src/avatar/__tests__/Avatar.js
index 7ec50a3849..ec38de87db 100644
--- a/src/avatar/__tests__/Avatar.js
+++ b/src/avatar/__tests__/Avatar.js
@@ -118,6 +118,14 @@ describe('Avatar Component', () => {
       expect(component.length).toBe(1);
       expect(toJson(component)).toMatchSnapshot();
     });
+
+    it('default', () => {
+      const component = shallow(
+        <Avatar source={{ uri: 'https://i.imgur.com/0y8Ftya.jpg' }} />
+      );
+      expect(component.length).toBe(1);
+      expect(toJson(component)).toMatchSnapshot();
+    });
   });
 
   describe('Placeholders', () => {
@@ -170,6 +178,19 @@ describe('Avatar Component', () => {
       expect(toJson(component)).toMatchSnapshot();
     });
 
+    it('renders using image with imageProps', () => {
+      const component = shallow(
+        <Avatar
+          source={{ uri: 'https://i.imgur.com/0y8Ftya.jpg' }}
+          iconStyle={{
+            backgroundColor: 'red',
+          }}
+          imageProps={{ containerStyle: {} }}
+        />
+      );
+      expect(toJson(component)).toMatchSnapshot();
+    });
+
     it("shouldn't show placeholder if not using source", () => {
       const component = shallow(
         <Avatar
diff --git a/src/avatar/__tests__/__snapshots__/Avatar.js.snap b/src/avatar/__tests__/__snapshots__/Avatar.js.snap
index ece08e000f..5eb10653d9 100644
--- a/src/avatar/__tests__/__snapshots__/Avatar.js.snap
+++ b/src/avatar/__tests__/__snapshots__/Avatar.js.snap
@@ -93,6 +93,40 @@ exports[`Avatar Component Placeholders renders using icon with defaults 1`] = `
 </View>
 `;
 
+exports[`Avatar Component Placeholders renders using image with imageProps 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "transparent",
+      "height": 34,
+      "width": 34,
+    }
+  }
+>
+  <ForwardRef(Themed.Image)
+    ImageComponent={[Function]}
+    containerStyle={
+      Object {
+        "flex": 1,
+      }
+    }
+    placeholderStyle={Object {}}
+    source={
+      Object {
+        "uri": "https://i.imgur.com/0y8Ftya.jpg",
+      }
+    }
+    style={
+      Object {
+        "flex": 1,
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</View>
+`;
+
 exports[`Avatar Component Placeholders shouldn't show placeholder if not using source 1`] = `
 <View
   style={
@@ -413,6 +447,40 @@ exports[`Avatar Component Sizes accepts xlarge 1`] = `
 </View>
 `;
 
+exports[`Avatar Component Sizes default 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "transparent",
+      "height": 34,
+      "width": 34,
+    }
+  }
+>
+  <ForwardRef(Themed.Image)
+    ImageComponent={[Function]}
+    containerStyle={
+      Object {
+        "flex": 1,
+      }
+    }
+    placeholderStyle={Object {}}
+    source={
+      Object {
+        "uri": "https://i.imgur.com/0y8Ftya.jpg",
+      }
+    }
+    style={
+      Object {
+        "flex": 1,
+        "height": undefined,
+        "width": undefined,
+      }
+    }
+  />
+</View>
+`;
+
 exports[`Avatar Component allows custom imageProps 1`] = `
 <View
   style={
diff --git a/src/badge/__tests__/__snapshots__/withBadge.js.snap b/src/badge/__tests__/__snapshots__/withBadge.js.snap
index a6b1829c46..d0278bf155 100644
--- a/src/badge/__tests__/__snapshots__/withBadge.js.snap
+++ b/src/badge/__tests__/__snapshots__/withBadge.js.snap
@@ -27,6 +27,32 @@ exports[`withBadge HOC just value should render when given a function as value 1
 </View>
 `;
 
+exports[`withBadge HOC just value should render when no value 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+      "position": "relative",
+    }
+  }
+>
+  <ForwardRef />
+  <Themed.Badge
+    containerStyle={
+      Object {
+        "bottom": undefined,
+        "left": undefined,
+        "position": "absolute",
+        "right": -3,
+        "top": 3,
+      }
+    }
+    status="error"
+  />
+</View>
+`;
+
 exports[`withBadge HOC just value should render with just a value 1`] = `
 <View
   style={
diff --git a/src/badge/__tests__/withBadge.js b/src/badge/__tests__/withBadge.js
index e186cda964..e8722771e4 100644
--- a/src/badge/__tests__/withBadge.js
+++ b/src/badge/__tests__/withBadge.js
@@ -19,6 +19,13 @@ describe('withBadge HOC', () => {
       expect(component.length).toBe(1);
       expect(toJson(component)).toMatchSnapshot();
     });
+
+    it('should render when no value', () => {
+      const BadgedComponent = withBadge()(TouchableOpacity);
+      const component = shallow(<BadgedComponent />);
+      expect(component.length).toBe(1);
+      expect(toJson(component)).toMatchSnapshot();
+    });
   });
 
   describe('with options', () => {
diff --git a/src/buttons/__tests__/Button.js b/src/buttons/__tests__/Button.js
index 7dc6eb2447..13c438f01c 100644
--- a/src/buttons/__tests__/Button.js
+++ b/src/buttons/__tests__/Button.js
@@ -8,6 +8,20 @@ import { ThemeProvider } from '../../config';
 import ThemedButton, { Button } from '../Button';
 
 describe('Button Component', () => {
+  beforeEach(() => {
+    let useEffect = jest.spyOn(React, 'useEffect');
+    useEffect.mockImplementation((f) => f());
+    const app = shallow(
+      <Button
+        theme={theme}
+        linearGradientProps={{
+          colors: ['#4c669f', '#3b5998', '#192f6a'],
+        }}
+        ViewComponent={null}
+      />
+    );
+    expect(app.length).toBe(1);
+  });
   it('should render without issues', () => {
     const component = shallow(<Button theme={theme} />);
     expect(component.length).toBe(1);
diff --git a/src/buttons/__tests__/ButtonGroup.js b/src/buttons/__tests__/ButtonGroup.js
index 3b89509ced..a1de2f1797 100644
--- a/src/buttons/__tests__/ButtonGroup.js
+++ b/src/buttons/__tests__/ButtonGroup.js
@@ -175,6 +175,7 @@ describe('ButtonGroup Component', () => {
         buttonStyle={{ backgroundColor: 'blue' }}
         textStyle={{ color: 'pink' }}
         vertical
+        innerBorderStyle={{}}
       />
     );
     expect(component.length).toBe(1);
diff --git a/src/buttons/__tests__/FAB.js b/src/buttons/__tests__/FAB.js
index 47bc056d4f..7d57ef1aa0 100644
--- a/src/buttons/__tests__/FAB.js
+++ b/src/buttons/__tests__/FAB.js
@@ -5,11 +5,52 @@ import toJson from 'enzyme-to-json';
 import theme from '../../config/theme';
 
 describe('FAB Component', () => {
+  beforeEach(() => {
+    let useEffect = jest.spyOn(React, 'useEffect');
+    useEffect.mockImplementation((f) => f());
+    const app = shallow(<FAB theme={theme} />);
+    expect(app.length).toBe(1);
+  });
   it('should render without issues', () => {
     const app = shallow(<FAB theme={theme} />);
     expect(app.length).toBe(1);
     expect(toJson(app)).toMatchSnapshot();
   });
+  it('should render with placement', () => {
+    const app = shallow(<FAB theme={theme} placement="left" />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render with title and size small', () => {
+    const app = shallow(<FAB theme={theme} title="test" size="small" />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render with title and size large', () => {
+    const app = shallow(<FAB theme={theme} title="test" size="large" />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render without title and size small', () => {
+    const app = shallow(<FAB theme={theme} size="small" />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render without title and size large', () => {
+    const app = shallow(<FAB theme={theme} size="large" />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render with disabled', () => {
+    const app = shallow(<FAB theme={theme} disabled={true} />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
+  it('should render with upperCase', () => {
+    const app = shallow(<FAB theme={theme} upperCase={true} />);
+    expect(app.length).toBe(1);
+    expect(toJson(app)).toMatchSnapshot();
+  });
   it('should render invisible', () => {
     const app = shallow(<FAB theme={theme} visible={false} />);
     expect(app.length).toBe(1);
diff --git a/src/buttons/__tests__/SpeedDial.js b/src/buttons/__tests__/SpeedDial.js
index a7b015e66f..04897dd7d4 100644
--- a/src/buttons/__tests__/SpeedDial.js
+++ b/src/buttons/__tests__/SpeedDial.js
@@ -5,11 +5,17 @@ import toJson from 'enzyme-to-json';
 import theme from '../../config/theme';
 
 describe('Speed Dial Component', () => {
+  beforeEach(() => {
+    let useEffect = jest.spyOn(React, 'useEffect');
+    useEffect.mockImplementation((f) => f());
+    const app = shallow(<SpeedDial open theme={theme} />);
+    expect(app.length).toBe(1);
+  });
   it('should render without issues', () => {
     const app = shallow(
       <SpeedDial
         theme={theme}
-        open={true}
+        isOpen={true}
         icon={{ name: 'edit', color: '#fff' }}
         openIcon={{ name: 'close', color: '#fff' }}
       >
diff --git a/src/buttons/__tests__/__snapshots__/FAB.js.snap b/src/buttons/__tests__/__snapshots__/FAB.js.snap
index 0eedea940c..b3871a80b3 100644
--- a/src/buttons/__tests__/__snapshots__/FAB.js.snap
+++ b/src/buttons/__tests__/__snapshots__/FAB.js.snap
@@ -125,6 +125,631 @@ exports[`FAB Component should render invisible 1`] = `
 </ForwardRef(AnimatedComponentWrapper)>
 `;
 
+exports[`FAB Component should render with disabled 1`] = `
+<ForwardRef(AnimatedComponentWrapper)
+  style={
+    Array [
+      Object {
+        "opacity": 1,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      },
+      Object {
+        "alignItems": "center",
+        "borderRadius": 28,
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <Themed.Button
+    buttonStyle={
+      Object {
+        "backgroundColor": "#ca71eb",
+        "height": 56,
+        "padding": 16,
+        "width": 56,
+      }
+    }
+    containerStyle={
+      Object {
+        "borderRadius": 28,
+        "elevation": 0,
+      }
+    }
+    disabled={true}
+    iconContainerStyle={
+      Array [
+        Object {
+          "height": 56,
+          "padding": 16,
+          "width": 56,
+        },
+        undefined,
+      ]
+    }
+    theme={
+      Object {
+        "colors": Object {
+          "black": "#242424",
+          "disabled": "hsl(208, 8%, 90%)",
+          "divider": "#bcbbc1",
+          "error": "#ff190c",
+          "grey0": "#393e42",
+          "grey1": "#43484d",
+          "grey2": "#5e6977",
+          "grey3": "#86939e",
+          "grey4": "#bdc6cf",
+          "grey5": "#e1e8ee",
+          "greyOutline": "#bbb",
+          "platform": Object {
+            "android": Object {
+              "error": "#f44336",
+              "grey": "rgba(0, 0, 0, 0.54)",
+              "primary": "#2196f3",
+              "searchBg": "#dcdce1",
+              "secondary": "#9C27B0",
+              "success": "#4caf50",
+              "warning": "#ffeb3b",
+            },
+            "default": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "ios": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "web": Object {
+              "error": "#ff190c",
+              "grey": "#393e42",
+              "primary": "#2089dc",
+              "searchBg": "#303337",
+              "secondary": "#ca71eb",
+              "success": "#52c41a",
+              "warning": "#faad14",
+            },
+          },
+          "primary": "#2089dc",
+          "searchBg": "#303337",
+          "secondary": "#ca71eb",
+          "success": "#52c41a",
+          "warning": "#faad14",
+          "white": "#ffffff",
+        },
+      }
+    }
+    titleStyle={
+      Array [
+        Object {
+          "marginHorizontal": 8,
+        },
+        Object {
+          "color": "#ffffff",
+        },
+        undefined,
+        undefined,
+      ]
+    }
+  />
+</ForwardRef(AnimatedComponentWrapper)>
+`;
+
+exports[`FAB Component should render with placement 1`] = `
+<ForwardRef(AnimatedComponentWrapper)
+  style={
+    Array [
+      Object {
+        "opacity": 1,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      },
+      Object {
+        "alignItems": "center",
+        "borderRadius": 28,
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "margin": 16,
+        "position": "absolute",
+      },
+      undefined,
+    ]
+  }
+>
+  <Themed.Button
+    buttonStyle={
+      Object {
+        "backgroundColor": "#ca71eb",
+        "height": 56,
+        "padding": 16,
+        "width": 56,
+      }
+    }
+    containerStyle={
+      Object {
+        "borderRadius": 28,
+        "elevation": 4,
+      }
+    }
+    iconContainerStyle={
+      Array [
+        Object {
+          "height": 56,
+          "padding": 16,
+          "width": 56,
+        },
+        undefined,
+      ]
+    }
+    theme={
+      Object {
+        "colors": Object {
+          "black": "#242424",
+          "disabled": "hsl(208, 8%, 90%)",
+          "divider": "#bcbbc1",
+          "error": "#ff190c",
+          "grey0": "#393e42",
+          "grey1": "#43484d",
+          "grey2": "#5e6977",
+          "grey3": "#86939e",
+          "grey4": "#bdc6cf",
+          "grey5": "#e1e8ee",
+          "greyOutline": "#bbb",
+          "platform": Object {
+            "android": Object {
+              "error": "#f44336",
+              "grey": "rgba(0, 0, 0, 0.54)",
+              "primary": "#2196f3",
+              "searchBg": "#dcdce1",
+              "secondary": "#9C27B0",
+              "success": "#4caf50",
+              "warning": "#ffeb3b",
+            },
+            "default": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "ios": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "web": Object {
+              "error": "#ff190c",
+              "grey": "#393e42",
+              "primary": "#2089dc",
+              "searchBg": "#303337",
+              "secondary": "#ca71eb",
+              "success": "#52c41a",
+              "warning": "#faad14",
+            },
+          },
+          "primary": "#2089dc",
+          "searchBg": "#303337",
+          "secondary": "#ca71eb",
+          "success": "#52c41a",
+          "warning": "#faad14",
+          "white": "#ffffff",
+        },
+      }
+    }
+    titleStyle={
+      Array [
+        Object {
+          "marginHorizontal": 8,
+        },
+        Object {
+          "color": "#ffffff",
+        },
+        undefined,
+        undefined,
+      ]
+    }
+  />
+</ForwardRef(AnimatedComponentWrapper)>
+`;
+
+exports[`FAB Component should render with title and size large 1`] = `
+<ForwardRef(AnimatedComponentWrapper)
+  style={
+    Array [
+      Object {
+        "opacity": 1,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      },
+      Object {
+        "alignItems": "center",
+        "borderRadius": 28,
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <Themed.Button
+    buttonStyle={
+      Object {
+        "backgroundColor": "#ca71eb",
+        "height": 48,
+        "paddingHorizontal": 16,
+      }
+    }
+    containerStyle={
+      Object {
+        "borderRadius": 28,
+        "elevation": 4,
+      }
+    }
+    iconContainerStyle={
+      Array [
+        Object {},
+        undefined,
+      ]
+    }
+    theme={
+      Object {
+        "colors": Object {
+          "black": "#242424",
+          "disabled": "hsl(208, 8%, 90%)",
+          "divider": "#bcbbc1",
+          "error": "#ff190c",
+          "grey0": "#393e42",
+          "grey1": "#43484d",
+          "grey2": "#5e6977",
+          "grey3": "#86939e",
+          "grey4": "#bdc6cf",
+          "grey5": "#e1e8ee",
+          "greyOutline": "#bbb",
+          "platform": Object {
+            "android": Object {
+              "error": "#f44336",
+              "grey": "rgba(0, 0, 0, 0.54)",
+              "primary": "#2196f3",
+              "searchBg": "#dcdce1",
+              "secondary": "#9C27B0",
+              "success": "#4caf50",
+              "warning": "#ffeb3b",
+            },
+            "default": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "ios": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "web": Object {
+              "error": "#ff190c",
+              "grey": "#393e42",
+              "primary": "#2089dc",
+              "searchBg": "#303337",
+              "secondary": "#ca71eb",
+              "success": "#52c41a",
+              "warning": "#faad14",
+            },
+          },
+          "primary": "#2089dc",
+          "searchBg": "#303337",
+          "secondary": "#ca71eb",
+          "success": "#52c41a",
+          "warning": "#faad14",
+          "white": "#ffffff",
+        },
+      }
+    }
+    title="test"
+    titleStyle={
+      Array [
+        Object {
+          "marginHorizontal": 8,
+        },
+        Object {
+          "color": "#ffffff",
+        },
+        undefined,
+        undefined,
+      ]
+    }
+  />
+</ForwardRef(AnimatedComponentWrapper)>
+`;
+
+exports[`FAB Component should render with title and size small 1`] = `
+<ForwardRef(AnimatedComponentWrapper)
+  style={
+    Array [
+      Object {
+        "opacity": 1,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      },
+      Object {
+        "alignItems": "center",
+        "borderRadius": 28,
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <Themed.Button
+    buttonStyle={
+      Object {
+        "backgroundColor": "#ca71eb",
+        "height": 48,
+        "paddingHorizontal": 16,
+      }
+    }
+    containerStyle={
+      Object {
+        "borderRadius": 28,
+        "elevation": 4,
+      }
+    }
+    iconContainerStyle={
+      Array [
+        Object {},
+        undefined,
+      ]
+    }
+    theme={
+      Object {
+        "colors": Object {
+          "black": "#242424",
+          "disabled": "hsl(208, 8%, 90%)",
+          "divider": "#bcbbc1",
+          "error": "#ff190c",
+          "grey0": "#393e42",
+          "grey1": "#43484d",
+          "grey2": "#5e6977",
+          "grey3": "#86939e",
+          "grey4": "#bdc6cf",
+          "grey5": "#e1e8ee",
+          "greyOutline": "#bbb",
+          "platform": Object {
+            "android": Object {
+              "error": "#f44336",
+              "grey": "rgba(0, 0, 0, 0.54)",
+              "primary": "#2196f3",
+              "searchBg": "#dcdce1",
+              "secondary": "#9C27B0",
+              "success": "#4caf50",
+              "warning": "#ffeb3b",
+            },
+            "default": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "ios": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "web": Object {
+              "error": "#ff190c",
+              "grey": "#393e42",
+              "primary": "#2089dc",
+              "searchBg": "#303337",
+              "secondary": "#ca71eb",
+              "success": "#52c41a",
+              "warning": "#faad14",
+            },
+          },
+          "primary": "#2089dc",
+          "searchBg": "#303337",
+          "secondary": "#ca71eb",
+          "success": "#52c41a",
+          "warning": "#faad14",
+          "white": "#ffffff",
+        },
+      }
+    }
+    title="test"
+    titleStyle={
+      Array [
+        Object {
+          "marginHorizontal": 8,
+        },
+        Object {
+          "color": "#ffffff",
+        },
+        undefined,
+        undefined,
+      ]
+    }
+  />
+</ForwardRef(AnimatedComponentWrapper)>
+`;
+
+exports[`FAB Component should render with upperCase 1`] = `
+<ForwardRef(AnimatedComponentWrapper)
+  style={
+    Array [
+      Object {
+        "opacity": 1,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      },
+      Object {
+        "alignItems": "center",
+        "borderRadius": 28,
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <Themed.Button
+    buttonStyle={
+      Object {
+        "backgroundColor": "#ca71eb",
+        "height": 56,
+        "padding": 16,
+        "width": 56,
+      }
+    }
+    containerStyle={
+      Object {
+        "borderRadius": 28,
+        "elevation": 4,
+      }
+    }
+    iconContainerStyle={
+      Array [
+        Object {
+          "height": 56,
+          "padding": 16,
+          "width": 56,
+        },
+        undefined,
+      ]
+    }
+    theme={
+      Object {
+        "colors": Object {
+          "black": "#242424",
+          "disabled": "hsl(208, 8%, 90%)",
+          "divider": "#bcbbc1",
+          "error": "#ff190c",
+          "grey0": "#393e42",
+          "grey1": "#43484d",
+          "grey2": "#5e6977",
+          "grey3": "#86939e",
+          "grey4": "#bdc6cf",
+          "grey5": "#e1e8ee",
+          "greyOutline": "#bbb",
+          "platform": Object {
+            "android": Object {
+              "error": "#f44336",
+              "grey": "rgba(0, 0, 0, 0.54)",
+              "primary": "#2196f3",
+              "searchBg": "#dcdce1",
+              "secondary": "#9C27B0",
+              "success": "#4caf50",
+              "warning": "#ffeb3b",
+            },
+            "default": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "ios": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "web": Object {
+              "error": "#ff190c",
+              "grey": "#393e42",
+              "primary": "#2089dc",
+              "searchBg": "#303337",
+              "secondary": "#ca71eb",
+              "success": "#52c41a",
+              "warning": "#faad14",
+            },
+          },
+          "primary": "#2089dc",
+          "searchBg": "#303337",
+          "secondary": "#ca71eb",
+          "success": "#52c41a",
+          "warning": "#faad14",
+          "white": "#ffffff",
+        },
+      }
+    }
+    titleStyle={
+      Array [
+        Object {
+          "marginHorizontal": 8,
+        },
+        Object {
+          "color": "#ffffff",
+        },
+        Object {
+          "textTransform": "uppercase",
+        },
+        undefined,
+      ]
+    }
+  />
+</ForwardRef(AnimatedComponentWrapper)>
+`;
+
 exports[`FAB Component should render without issues 1`] = `
 <ForwardRef(AnimatedComponentWrapper)
   style={
@@ -249,3 +874,253 @@ exports[`FAB Component should render without issues 1`] = `
   />
 </ForwardRef(AnimatedComponentWrapper)>
 `;
+
+exports[`FAB Component should render without title and size large 1`] = `
+<ForwardRef(AnimatedComponentWrapper)
+  style={
+    Array [
+      Object {
+        "opacity": 1,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      },
+      Object {
+        "alignItems": "center",
+        "borderRadius": 28,
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <Themed.Button
+    buttonStyle={
+      Object {
+        "backgroundColor": "#ca71eb",
+        "height": 56,
+        "padding": 16,
+        "width": 56,
+      }
+    }
+    containerStyle={
+      Object {
+        "borderRadius": 28,
+        "elevation": 4,
+      }
+    }
+    iconContainerStyle={
+      Array [
+        Object {
+          "height": 56,
+          "padding": 16,
+          "width": 56,
+        },
+        undefined,
+      ]
+    }
+    theme={
+      Object {
+        "colors": Object {
+          "black": "#242424",
+          "disabled": "hsl(208, 8%, 90%)",
+          "divider": "#bcbbc1",
+          "error": "#ff190c",
+          "grey0": "#393e42",
+          "grey1": "#43484d",
+          "grey2": "#5e6977",
+          "grey3": "#86939e",
+          "grey4": "#bdc6cf",
+          "grey5": "#e1e8ee",
+          "greyOutline": "#bbb",
+          "platform": Object {
+            "android": Object {
+              "error": "#f44336",
+              "grey": "rgba(0, 0, 0, 0.54)",
+              "primary": "#2196f3",
+              "searchBg": "#dcdce1",
+              "secondary": "#9C27B0",
+              "success": "#4caf50",
+              "warning": "#ffeb3b",
+            },
+            "default": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "ios": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "web": Object {
+              "error": "#ff190c",
+              "grey": "#393e42",
+              "primary": "#2089dc",
+              "searchBg": "#303337",
+              "secondary": "#ca71eb",
+              "success": "#52c41a",
+              "warning": "#faad14",
+            },
+          },
+          "primary": "#2089dc",
+          "searchBg": "#303337",
+          "secondary": "#ca71eb",
+          "success": "#52c41a",
+          "warning": "#faad14",
+          "white": "#ffffff",
+        },
+      }
+    }
+    titleStyle={
+      Array [
+        Object {
+          "marginHorizontal": 8,
+        },
+        Object {
+          "color": "#ffffff",
+        },
+        undefined,
+        undefined,
+      ]
+    }
+  />
+</ForwardRef(AnimatedComponentWrapper)>
+`;
+
+exports[`FAB Component should render without title and size small 1`] = `
+<ForwardRef(AnimatedComponentWrapper)
+  style={
+    Array [
+      Object {
+        "opacity": 1,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      },
+      Object {
+        "alignItems": "center",
+        "borderRadius": 28,
+        "flexDirection": "row",
+        "justifyContent": "center",
+      },
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <Themed.Button
+    buttonStyle={
+      Object {
+        "backgroundColor": "#ca71eb",
+        "height": 40,
+        "padding": 8,
+        "width": 40,
+      }
+    }
+    containerStyle={
+      Object {
+        "borderRadius": 28,
+        "elevation": 4,
+      }
+    }
+    iconContainerStyle={
+      Array [
+        Object {
+          "height": 40,
+          "padding": 8,
+          "width": 40,
+        },
+        undefined,
+      ]
+    }
+    theme={
+      Object {
+        "colors": Object {
+          "black": "#242424",
+          "disabled": "hsl(208, 8%, 90%)",
+          "divider": "#bcbbc1",
+          "error": "#ff190c",
+          "grey0": "#393e42",
+          "grey1": "#43484d",
+          "grey2": "#5e6977",
+          "grey3": "#86939e",
+          "grey4": "#bdc6cf",
+          "grey5": "#e1e8ee",
+          "greyOutline": "#bbb",
+          "platform": Object {
+            "android": Object {
+              "error": "#f44336",
+              "grey": "rgba(0, 0, 0, 0.54)",
+              "primary": "#2196f3",
+              "searchBg": "#dcdce1",
+              "secondary": "#9C27B0",
+              "success": "#4caf50",
+              "warning": "#ffeb3b",
+            },
+            "default": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "ios": Object {
+              "error": "#ff3b30",
+              "grey": "#7d7d7d",
+              "primary": "#007aff",
+              "searchBg": "#dcdce1",
+              "secondary": "#5856d6",
+              "success": "#4cd964",
+              "warning": "#ffcc00",
+            },
+            "web": Object {
+              "error": "#ff190c",
+              "grey": "#393e42",
+              "primary": "#2089dc",
+              "searchBg": "#303337",
+              "secondary": "#ca71eb",
+              "success": "#52c41a",
+              "warning": "#faad14",
+            },
+          },
+          "primary": "#2089dc",
+          "searchBg": "#303337",
+          "secondary": "#ca71eb",
+          "success": "#52c41a",
+          "warning": "#faad14",
+          "white": "#ffffff",
+        },
+      }
+    }
+    titleStyle={
+      Array [
+        Object {
+          "marginHorizontal": 8,
+        },
+        Object {
+          "color": "#ffffff",
+        },
+        undefined,
+        undefined,
+      ]
+    }
+  />
+</ForwardRef(AnimatedComponentWrapper)>
+`;
diff --git a/src/buttons/__tests__/__snapshots__/SpeedDial.js.snap b/src/buttons/__tests__/__snapshots__/SpeedDial.js.snap
index b40207a154..ceac45122d 100644
--- a/src/buttons/__tests__/__snapshots__/SpeedDial.js.snap
+++ b/src/buttons/__tests__/__snapshots__/SpeedDial.js.snap
@@ -21,7 +21,7 @@ exports[`Speed Dial Component should render without issues 1`] = `
     onPress={[Function]}
   >
     <ForwardRef(AnimatedComponentWrapper)
-      pointerEvents="none"
+      pointerEvents="auto"
       style={
         Array [
           Object {
@@ -33,7 +33,7 @@ exports[`Speed Dial Component should render without issues 1`] = `
           },
           Object {
             "backgroundColor": "rgba(36, 36, 36, 0.6)",
-            "opacity": NaN,
+            "opacity": 1,
           },
         ]
       }
@@ -49,13 +49,13 @@ exports[`Speed Dial Component should render without issues 1`] = `
   >
     <ForwardRef(AnimatedComponentWrapper)
       key="0"
-      pointerEvents="none"
+      pointerEvents="auto"
       style={
         Object {
-          "opacity": NaN,
+          "opacity": 1,
           "transform": Array [
             Object {
-              "scale": NaN,
+              "scale": 1,
             },
           ],
         }
@@ -75,13 +75,13 @@ exports[`Speed Dial Component should render without issues 1`] = `
     </ForwardRef(AnimatedComponentWrapper)>
     <ForwardRef(AnimatedComponentWrapper)
       key="1"
-      pointerEvents="none"
+      pointerEvents="auto"
       style={
         Object {
-          "opacity": NaN,
+          "opacity": 1,
           "transform": Array [
             Object {
-              "scale": NaN,
+              "scale": 1,
             },
           ],
         }
@@ -103,11 +103,10 @@ exports[`Speed Dial Component should render without issues 1`] = `
       icon={
         Object {
           "color": "#fff",
-          "name": "edit",
+          "name": "close",
         }
       }
       onPress={[Function]}
-      open={true}
       style={
         Array [
           Object {
diff --git a/src/checkbox/__tests__/CheckBox.js b/src/checkbox/__tests__/CheckBox.js
index 3fc2353dad..b381d1f5a5 100644
--- a/src/checkbox/__tests__/CheckBox.js
+++ b/src/checkbox/__tests__/CheckBox.js
@@ -34,6 +34,37 @@ describe('CheckBox Component', () => {
     );
   });
 
+  it('should render with wrapperStyle', () => {
+    const component = shallow(
+      <CheckBox
+        theme={theme}
+        title="Custom Text"
+        checked
+        wrapperStyle={{ backgroundColor: 'red' }}
+      />
+    );
+    expect(toJson(component)).toMatchSnapshot();
+    expect(component.props().children.props.children[1].props.children).toBe(
+      'Custom Text'
+    );
+  });
+
+  it('should render with textStyle and fontFamily', () => {
+    const component = shallow(
+      <CheckBox
+        theme={theme}
+        title="Custom Text"
+        checked
+        textStyle={{ color: 'red' }}
+        fontFamily="serif"
+      />
+    );
+    expect(toJson(component)).toMatchSnapshot();
+    expect(component.props().children.props.children[1].props.children).toBe(
+      'Custom Text'
+    );
+  });
+
   it('should allow title to be custom component', () => {
     shallow(
       <CheckBox
diff --git a/src/checkbox/__tests__/__snapshots__/CheckBox.js.snap b/src/checkbox/__tests__/__snapshots__/CheckBox.js.snap
index 768a5792c5..f29204174d 100644
--- a/src/checkbox/__tests__/__snapshots__/CheckBox.js.snap
+++ b/src/checkbox/__tests__/__snapshots__/CheckBox.js.snap
@@ -746,6 +746,245 @@ exports[`CheckBox Component should render with icon and iconRight 1`] = `
 </ForwardRef>
 `;
 
+exports[`CheckBox Component should render with textStyle and fontFamily 1`] = `
+<ForwardRef
+  accessibilityRole="checkbox"
+  accessibilityState={
+    Object {
+      "checked": true,
+    }
+  }
+  style={
+    Object {
+      "backgroundColor": "#fafafa",
+      "borderColor": "#ededed",
+      "borderRadius": 3,
+      "borderWidth": 1,
+      "margin": 5,
+      "marginLeft": 10,
+      "marginRight": 10,
+      "padding": 10,
+    }
+  }
+  testID="checkbox"
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <CheckBoxIcon
+      checked={true}
+      checkedColor="#2089dc"
+      fontFamily="serif"
+      textStyle={
+        Object {
+          "color": "red",
+        }
+      }
+      theme={
+        Object {
+          "colors": Object {
+            "black": "#242424",
+            "disabled": "hsl(208, 8%, 90%)",
+            "divider": "#bcbbc1",
+            "error": "#ff190c",
+            "grey0": "#393e42",
+            "grey1": "#43484d",
+            "grey2": "#5e6977",
+            "grey3": "#86939e",
+            "grey4": "#bdc6cf",
+            "grey5": "#e1e8ee",
+            "greyOutline": "#bbb",
+            "platform": Object {
+              "android": Object {
+                "error": "#f44336",
+                "grey": "rgba(0, 0, 0, 0.54)",
+                "primary": "#2196f3",
+                "searchBg": "#dcdce1",
+                "secondary": "#9C27B0",
+                "success": "#4caf50",
+                "warning": "#ffeb3b",
+              },
+              "default": Object {
+                "error": "#ff3b30",
+                "grey": "#7d7d7d",
+                "primary": "#007aff",
+                "searchBg": "#dcdce1",
+                "secondary": "#5856d6",
+                "success": "#4cd964",
+                "warning": "#ffcc00",
+              },
+              "ios": Object {
+                "error": "#ff3b30",
+                "grey": "#7d7d7d",
+                "primary": "#007aff",
+                "searchBg": "#dcdce1",
+                "secondary": "#5856d6",
+                "success": "#4cd964",
+                "warning": "#ffcc00",
+              },
+              "web": Object {
+                "error": "#ff190c",
+                "grey": "#393e42",
+                "primary": "#2089dc",
+                "searchBg": "#303337",
+                "secondary": "#ca71eb",
+                "success": "#52c41a",
+                "warning": "#faad14",
+              },
+            },
+            "primary": "#2089dc",
+            "searchBg": "#303337",
+            "secondary": "#ca71eb",
+            "success": "#52c41a",
+            "warning": "#faad14",
+            "white": "#ffffff",
+          },
+        }
+      }
+      title="Custom Text"
+    />
+    <Themed.Text
+      style={
+        Object {
+          "color": "red",
+          "fontFamily": "serif",
+          "fontWeight": "bold",
+          "marginLeft": 10,
+          "marginRight": 10,
+        }
+      }
+      testID="checkboxTitle"
+    >
+      Custom Text
+    </Themed.Text>
+  </View>
+</ForwardRef>
+`;
+
+exports[`CheckBox Component should render with wrapperStyle 1`] = `
+<ForwardRef
+  accessibilityRole="checkbox"
+  accessibilityState={
+    Object {
+      "checked": true,
+    }
+  }
+  style={
+    Object {
+      "backgroundColor": "#fafafa",
+      "borderColor": "#ededed",
+      "borderRadius": 3,
+      "borderWidth": 1,
+      "margin": 5,
+      "marginLeft": 10,
+      "marginRight": 10,
+      "padding": 10,
+    }
+  }
+  testID="checkbox"
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "red",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <CheckBoxIcon
+      checked={true}
+      checkedColor="#2089dc"
+      theme={
+        Object {
+          "colors": Object {
+            "black": "#242424",
+            "disabled": "hsl(208, 8%, 90%)",
+            "divider": "#bcbbc1",
+            "error": "#ff190c",
+            "grey0": "#393e42",
+            "grey1": "#43484d",
+            "grey2": "#5e6977",
+            "grey3": "#86939e",
+            "grey4": "#bdc6cf",
+            "grey5": "#e1e8ee",
+            "greyOutline": "#bbb",
+            "platform": Object {
+              "android": Object {
+                "error": "#f44336",
+                "grey": "rgba(0, 0, 0, 0.54)",
+                "primary": "#2196f3",
+                "searchBg": "#dcdce1",
+                "secondary": "#9C27B0",
+                "success": "#4caf50",
+                "warning": "#ffeb3b",
+              },
+              "default": Object {
+                "error": "#ff3b30",
+                "grey": "#7d7d7d",
+                "primary": "#007aff",
+                "searchBg": "#dcdce1",
+                "secondary": "#5856d6",
+                "success": "#4cd964",
+                "warning": "#ffcc00",
+              },
+              "ios": Object {
+                "error": "#ff3b30",
+                "grey": "#7d7d7d",
+                "primary": "#007aff",
+                "searchBg": "#dcdce1",
+                "secondary": "#5856d6",
+                "success": "#4cd964",
+                "warning": "#ffcc00",
+              },
+              "web": Object {
+                "error": "#ff190c",
+                "grey": "#393e42",
+                "primary": "#2089dc",
+                "searchBg": "#303337",
+                "secondary": "#ca71eb",
+                "success": "#52c41a",
+                "warning": "#faad14",
+              },
+            },
+            "primary": "#2089dc",
+            "searchBg": "#303337",
+            "secondary": "#ca71eb",
+            "success": "#52c41a",
+            "warning": "#faad14",
+            "white": "#ffffff",
+          },
+        }
+      }
+      title="Custom Text"
+      wrapperStyle={
+        Object {
+          "backgroundColor": "red",
+        }
+      }
+    />
+    <Themed.Text
+      style={
+        Object {
+          "color": "#43484d",
+          "fontWeight": "bold",
+          "marginLeft": 10,
+          "marginRight": 10,
+        }
+      }
+      testID="checkboxTitle"
+    >
+      Custom Text
+    </Themed.Text>
+  </View>
+</ForwardRef>
+`;
+
 exports[`CheckBox Component should render without issues 1`] = `
 <ForwardRef
   accessibilityRole="checkbox"
diff --git a/src/config/__tests__/ThemeProvider.js b/src/config/__tests__/ThemeProvider.js
index 01b48838b0..3105aba3f8 100644
--- a/src/config/__tests__/ThemeProvider.js
+++ b/src/config/__tests__/ThemeProvider.js
@@ -73,6 +73,15 @@ describe('ThemeProvider', () => {
     });
   });
 
+  it('should contain useDark key with value true', () => {
+    const component = shallow(
+      <ThemeProvider useDark={true}>
+        <View />
+      </ThemeProvider>
+    );
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
   it('should retain custom theme when switching between light / dark mode', () => {
     const customTheme = { colors: { primary: 'cyan' } };
     const component = shallow(
diff --git a/src/config/__tests__/__snapshots__/ThemeProvider.js.snap b/src/config/__tests__/__snapshots__/ThemeProvider.js.snap
index b97db25412..23c11f5bde 100644
--- a/src/config/__tests__/__snapshots__/ThemeProvider.js.snap
+++ b/src/config/__tests__/__snapshots__/ThemeProvider.js.snap
@@ -1,5 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ThemeProvider should contain useDark key with value true 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "replaceTheme": [Function],
+      "theme": Object {
+        "colors": Object {
+          "black": "#f2f2f2",
+          "disabled": "hsl(208, 8%, 90%)",
+          "divider": "#84838a",
+          "error": "#bf2c24",
+          "grey0": "#e1e8ee",
+          "grey1": "#bdc6cf",
+          "grey2": "#86939e",
+          "grey3": "#5e6977",
+          "grey4": "#43484d",
+          "grey5": "#393e42",
+          "greyOutline": "#bbb",
+          "platform": Object {
+            "android": Object {
+              "error": "#bf2c24",
+              "grey": "#393e42",
+              "primary": "#1b262c",
+              "searchBg": "#393e42",
+              "secondary": "#2089dc",
+              "success": "#439946",
+              "warning": "#cfbe27",
+            },
+            "default": Object {
+              "error": "#bf2c24",
+              "grey": "#ffffff",
+              "primary": "#1b262c",
+              "searchBg": "#393e42",
+              "secondary": "#2089dc",
+              "success": "#439946",
+              "warning": "#cfbe27",
+            },
+            "ios": Object {
+              "error": "#bf2c24",
+              "grey": "#ffffff",
+              "primary": "#1b262c",
+              "searchBg": "#393e42",
+              "secondary": "#2089dc",
+              "success": "#439946",
+              "warning": "#cfbe27",
+            },
+            "web": Object {
+              "error": "#bf2c24",
+              "grey": "#ffffff",
+              "primary": "#1b262c",
+              "searchBg": "#393e42",
+              "secondary": "#2089dc",
+              "success": "#439946",
+              "warning": "#cfbe27",
+            },
+          },
+          "primary": "#439ce0",
+          "searchBg": "#303337",
+          "secondary": "#aa49eb",
+          "success": "#439946",
+          "warning": "#cfbe27",
+          "white": "#080808",
+        },
+      },
+      "updateTheme": [Function],
+    }
+  }
+>
+  <View />
+</ContextProvider>
+`;
+
 exports[`ThemeProvider should work 1`] = `
 <ContextProvider
   value={
diff --git a/src/input/__tests__/Input.js b/src/input/__tests__/Input.js
index c670af1d8d..b870deedae 100644
--- a/src/input/__tests__/Input.js
+++ b/src/input/__tests__/Input.js
@@ -39,6 +39,12 @@ describe('Input component', () => {
       expect(toJson(component)).toMatchSnapshot();
     });
 
+    it('disabled', () => {
+      const component = shallow(<Input theme={theme} disabled={true} />);
+      expect(component.length).toBe(1);
+      expect(toJson(component)).toMatchSnapshot();
+    });
+
     describe('leftIcon and styles', () => {
       it('leftIcon', () => {
         const component = shallow(
diff --git a/src/input/__tests__/__snapshots__/Input.js.snap b/src/input/__tests__/__snapshots__/Input.js.snap
index 479e59bd3f..b7b4b8fb1b 100644
--- a/src/input/__tests__/__snapshots__/Input.js.snap
+++ b/src/input/__tests__/__snapshots__/Input.js.snap
@@ -54,6 +54,61 @@ exports[`Input component Props containerStyle 1`] = `
 </View>
 `;
 
+exports[`Input component Props disabled 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 10,
+      "width": "100%",
+    }
+  }
+>
+  <ForwardRef(AnimatedComponentWrapper)
+    style={
+      Object {
+        "alignItems": "center",
+        "borderBottomWidth": 1,
+        "borderColor": "#86939e",
+        "flexDirection": "row",
+        "transform": Array [
+          Object {
+            "translateX": 0,
+          },
+        ],
+      }
+    }
+  >
+    <Component
+      allowFontScaling={true}
+      editable={false}
+      placeholderTextColor="#86939e"
+      rejectResponderTermination={true}
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#242424",
+          "flex": 1,
+          "fontSize": 18,
+          "minHeight": 40,
+          "opacity": 0.5,
+        }
+      }
+      testID="RNE__Input__text-input"
+      underlineColorAndroid="transparent"
+    />
+  </ForwardRef(AnimatedComponentWrapper)>
+  <Text
+    style={
+      Object {
+        "color": "#ff190c",
+        "fontSize": 12,
+        "margin": 5,
+      }
+    }
+  />
+</View>
+`;
+
 exports[`Input component Props errorMessage and style errorMessage 1`] = `
 <View
   style={
diff --git a/src/linearProgress/__tests__/LinearProgress.js b/src/linearProgress/__tests__/LinearProgress.js
index 2b8f1dc3f1..a7d481a2d0 100644
--- a/src/linearProgress/__tests__/LinearProgress.js
+++ b/src/linearProgress/__tests__/LinearProgress.js
@@ -5,6 +5,13 @@ import toJson from 'enzyme-to-json';
 import theme from '../../config/theme';
 
 describe('LinearProgress Component', () => {
+  beforeEach(() => {
+    let useEffect = jest.spyOn(React, 'useEffect');
+    useEffect.mockImplementation((f) => f());
+    const app = shallow(<LinearProgress theme={theme} />);
+    expect(app.length).toBe(1);
+  });
+
   it('should render without issues', () => {
     const app = shallow(<LinearProgress theme={theme} />);
     expect(app.length).toBe(1);
diff --git a/src/list/__tests__/ListItem.js b/src/list/__tests__/ListItem.js
index b84864aec8..bcaf33262a 100644
--- a/src/list/__tests__/ListItem.js
+++ b/src/list/__tests__/ListItem.js
@@ -35,6 +35,27 @@ describe('ListItem component', () => {
     expect(toJson(component)).toMatchSnapshot();
   });
 
+  it('should render with topDivider and bottomDivider', () => {
+    const component = shallow(
+      <ListItem theme={theme} topDivider={true} bottomDivider={true} />
+    );
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
+  it('should render with disabled true and styles', () => {
+    const component = shallow(
+      <ListItem
+        theme={theme}
+        disabled={true}
+        containerStyle={{ padding: 10 }}
+        disabledStyle={{ backgroundColor: 'gray' }}
+      />
+    );
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
   it('should render with title and subtitle', () => {
     const component = shallow(
       <ListItem theme={theme}>
diff --git a/src/list/__tests__/__snapshots__/ListItem.js.snap b/src/list/__tests__/__snapshots__/ListItem.js.snap
index 54c27b0639..acd7e6b680 100644
--- a/src/list/__tests__/__snapshots__/ListItem.js.snap
+++ b/src/list/__tests__/__snapshots__/ListItem.js.snap
@@ -22,6 +22,26 @@ exports[`ListItem component should render with avatar 1`] = `
 </View>
 `;
 
+exports[`ListItem component should render with disabled true and styles 1`] = `
+<View
+  disabled={true}
+>
+  <PadView
+    Component={[Function]}
+    pad={16}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "gray",
+        "borderColor": "#bcbbc1",
+        "flexDirection": "row",
+        "padding": 10,
+      }
+    }
+  />
+</View>
+`;
+
 exports[`ListItem component should render with input 1`] = `
 <View>
   <PadView
@@ -118,6 +138,26 @@ exports[`ListItem component should render with title and subtitle 1`] = `
 </View>
 `;
 
+exports[`ListItem component should render with topDivider and bottomDivider 1`] = `
+<View>
+  <PadView
+    Component={[Function]}
+    pad={16}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomWidth": 0.5,
+        "borderColor": "#bcbbc1",
+        "borderTopWidth": 0.5,
+        "flexDirection": "row",
+        "padding": 14,
+      }
+    }
+  />
+</View>
+`;
+
 exports[`ListItem component should render without issues 1`] = `
 <View>
   <PadView
diff --git a/src/searchbar/__tests__/SearchBar-android.js b/src/searchbar/__tests__/SearchBar-android.js
index e551923b04..44c90a96f0 100644
--- a/src/searchbar/__tests__/SearchBar-android.js
+++ b/src/searchbar/__tests__/SearchBar-android.js
@@ -1,7 +1,18 @@
+import React from 'react';
 import SearchBar from '../SearchBar-android';
 import { commonTests, commonPlatformTest } from './common';
+import { shallow } from 'enzyme';
 
 describe('Android SearchBar component', () => {
   commonTests(SearchBar);
   commonPlatformTest(SearchBar);
+  it('componentWillUnmount should be called on unmount', () => {
+    const component = shallow(<SearchBar value="Chickens" />);
+    const componentWillUnmount = jest.spyOn(
+      component.instance(),
+      'componentWillUnmount'
+    );
+    component.unmount();
+    expect(componentWillUnmount).toHaveBeenCalled();
+  });
 });
diff --git a/src/switch/__tests__/Switch.js b/src/switch/__tests__/Switch.js
index 1ff84cc6dd..7bd5af4d9d 100644
--- a/src/switch/__tests__/Switch.js
+++ b/src/switch/__tests__/Switch.js
@@ -89,17 +89,31 @@ describe('Switch Component', () => {
   });
 
   it('renders with props on ios', () => {
-    Platform.OS === 'ios';
+    Platform.OS = 'ios';
     const component = shallow(<Switch value={true} color="red" />);
     expect(toJson(component)).toMatchSnapshot();
   });
 
   it('should render with props on web', () => {
-    Platform.OS === 'web';
+    Platform.OS = 'web';
     const onValueChange = jest.fn();
     const component = shallow(
       <Switch value={true} onValueChange={onValueChange} theme={theme} />
     );
     expect(toJson(component)).toMatchSnapshot();
   });
+
+  it('should render with props on android with disabled true', () => {
+    Platform.OS = 'android';
+    const onValueChange = jest.fn();
+    const component = shallow(
+      <Switch
+        value={true}
+        onValueChange={onValueChange}
+        theme={theme}
+        disabled={true}
+      />
+    );
+    expect(toJson(component)).toMatchSnapshot();
+  });
 });
diff --git a/src/switch/__tests__/__snapshots__/Switch.js.snap b/src/switch/__tests__/__snapshots__/Switch.js.snap
index 76c465ab93..9fc6bde73c 100644
--- a/src/switch/__tests__/__snapshots__/Switch.js.snap
+++ b/src/switch/__tests__/__snapshots__/Switch.js.snap
@@ -109,20 +109,31 @@ exports[`Switch Component should render with disabled true 1`] = `
 />
 `;
 
-exports[`Switch Component should render with props on web 1`] = `
+exports[`Switch Component should render with props on android with disabled true 1`] = `
 <Switch
-  disabled={false}
-  onValueChange={[MockFunction]}
+  disabled={true}
+  thumbColor="hsl(208, 8%, 90%)"
   trackColor={
     Object {
       "false": "",
-      "true": "#2089dc",
+      "true": "hsl(208, 8%, 90%)",
     }
   }
   value={true}
 />
 `;
 
+exports[`Switch Component should render with props on web 1`] = `
+<Switch
+  activeThumbColor="#2089dc"
+  activeTrackColor="#2089dc"
+  disabled={false}
+  onValueChange={[MockFunction]}
+  thumbColor="#2089dc"
+  value={true}
+/>
+`;
+
 exports[`Switch Component should render with value 1`] = `
 <Switch
   disabled={false}
diff --git a/src/tab/__tests__/tab.js b/src/tab/__tests__/tab.js
index f55f6382a2..f69f208591 100644
--- a/src/tab/__tests__/tab.js
+++ b/src/tab/__tests__/tab.js
@@ -5,6 +5,12 @@ import { Tab } from '../tab';
 import theme from '../../config/theme';
 
 describe('Tab Component', () => {
+  beforeEach(() => {
+    let useEffect = jest.spyOn(React, 'useEffect');
+    useEffect.mockImplementation((f) => f());
+    const app = shallow(<Tab theme={theme} variant="default" />);
+    expect(app.length).toBe(1);
+  });
   it('should render without issues', () => {
     const onValueChange = jest.fn();
     const component = shallow(