diff --git a/README.md b/README.md
index 7292b28..7388049 100644
--- a/README.md
+++ b/README.md
@@ -5,23 +5,18 @@
 ![Single select](https://raw.githubusercontent.com/xuho/demo-images/master/react-native-select2-single-select.gif)
 
 ## Add it to your project
+  - Using NPM
+    `npm install react-native-select-two`
+  - or:
+  - Using Yarn
+    `yarn add react-native-select-two`
 
-1. Insall package
-   - Using NPM
-     `npm install react-native-select-two`
-   - or:
-   - Using Yarn
-     `yarn add react-native-select-two`
-2. Install React Native Modal dependence
 
-- Using NPM
-  `npm install react-native-modal`
-- or
-  -Using Yarn
-  `yarn add react-native-modal`
+## Install dependencies
+
+1. [react-native-modal](https://github.com/react-native-community/react-native-modal)
+2. [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)
 
-3. Import package
-   `import Select2 from 'react-native-select-two';`
 
 ## Usage
 
@@ -70,6 +65,7 @@ class CreateNewAppointment extends Component {
 | Property name             | Type           | Default                         | Description                                                                                 |
 | ------------------------- | -------------- | ------------------------------- | ------------------------------------------------------------------------------------------- |
 | **style**                 | _Object_       | none                            | Custom style for component                                                                  |
+| **modalStyle**            | _Object_       | none                            | Custom style for modal                                                                      |
 | **title**                 | _String_       | none                            | String display when you don't select any item                                               |
 | **data**                  | _Array_        | \*required                      | Datasource of list options: an array of objects (each object have `name` and `id` property) |
 | **onSelect**              | _Function_     | none                            | The callback function trigger after you press select button                                 |
@@ -83,7 +79,7 @@ class CreateNewAppointment extends Component {
 | **searchPlaceHolderText** | _String_       | Nhập vào từ khóa                | Placeholder text for search field                                                           |
 | **listEmptyTitle**        | _String_       | Không tìm thấy lựa chọn phù hợp | Title to show when there's no item to be render                                             |
 | **defaultFontName**       | _String_       | none                            | Set custom font for all component                                                           |
-| **selectedTitlteStyle**   | _Object_       | none                            | Set custom style for display selected title text                                            |
+| **selectedTitleStyle**    | _Object_       | none                            | Set custom style for display selected title text                                            |
 | **buttonTextStyle**       | _Object_       | none                            | Set custom button text style                                                                |
 | **buttonStyle**           | _Object_       | none                            | Set custom button style                                                                     |
 
diff --git a/index.js b/index.js
index aa4b2ab..5c94a58 100644
--- a/index.js
+++ b/index.js
@@ -35,7 +35,7 @@ class Select2 extends Component {
         this.init();
     };
 
-    componentWillReceiveProps(newProps) {
+    UNSAFE_componentWillReceiveProps(newProps) {
         this.init(newProps);
     }
 
@@ -127,9 +127,9 @@ class Select2 extends Component {
 
     render() {
         let {
-            style, title, onSelect, onRemoveItem, popupTitle, colorTheme,
+            style, modalStyle, title, onSelect, onRemoveItem, popupTitle, colorTheme,
             isSelectSingle, cancelButtonText, selectButtonText, searchPlaceHolderText,
-            selectedTitlteStyle, buttonTextStyle, buttonStyle, showSearchBox
+            selectedTitleStyle, buttonTextStyle, buttonStyle, showSearchBox
         } = this.props;
         let { show, selectedItem, preSelectedItem } = this.state;
         return (
@@ -148,7 +148,7 @@ class Select2 extends Component {
                     animationOutTiming={300}
                     hideModalContentWhileAnimating
                     isVisible={show}>
-                    <Animated.View style={[styles.modalContainer, { height: this.animatedHeight }]}>
+                    <Animated.View style={[styles.modalContainer, modalStyle, { height: this.animatedHeight }]}>
                         <View>
                             <Text style={[styles.title, this.defaultFont, { color: colorTheme }]}>
                                 {popupTitle || title}
@@ -220,7 +220,7 @@ class Select2 extends Component {
                     preSelectedItem.length > 0
                         ? (
                             isSelectSingle
-                                ? <Text style={[styles.selectedTitlte, this.defaultFont, selectedTitlteStyle, { color: '#333' }]}>{preSelectedItem[0].name}</Text>
+                                ? <Text style={[styles.selectedTitlte, this.defaultFont, selectedTitleStyle, { color: '#333' }]}>{preSelectedItem[0].name}</Text>
                                 : <View style={styles.tagWrapper}>
                                     {
                                         preSelectedItem.map((tag, index) => {
@@ -250,7 +250,7 @@ class Select2 extends Component {
                                     }
                                 </View>
                         )
-                        : <Text style={[styles.selectedTitlte, this.defaultFont, selectedTitlteStyle]}>{title}</Text>
+                        : <Text style={[styles.selectedTitlte, this.defaultFont, selectedTitleStyle]}>{title}</Text>
                 }
             </TouchableOpacity>
         );
@@ -312,7 +312,7 @@ Select2.propTypes = {
     data: PropTypes.array.isRequired,
     style: PropTypes.object,
     defaultFontName: PropTypes.string,
-    selectedTitlteStyle: PropTypes.object,
+    selectedTitleStyle: PropTypes.object,
     buttonTextStyle: PropTypes.object,
     buttonStyle: PropTypes.object,
     title: PropTypes.string,
diff --git a/package.json b/package.json
index 7b3c97c..a470b22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-select-two",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Component like Select2 on web for React Native",
   "main": "index.js",
   "scripts": {
@@ -31,7 +31,9 @@
   "homepage": "https://github.com/xuho/react-native-select-two#readme",
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-vector-icons": "^4.2.0",
+    "react-native-modal": "^11.1.0"
   },
   "devDependencies": {
     "react": "16.6.1",
@@ -39,4 +41,4 @@
     "react-native-vector-icons": "^4.2.0",
     "react-native-modal": "^11.1.0"
   }
-}
+}
\ No newline at end of file