Replace Button with HeaderButton.

README.md

@@ -48,7 +48,7 @@ Import the module in the file:
 import PickList from 'react-native-picklist';
 
 export default class TopPage extends React.PureComponent {
-    static navigations = PickList.navigations;
+    static navigationOptions = PickList.navigationOptions;
 
     render() {
         return (
@@ -60,6 +60,21 @@ export default class TopPage extends React.PureComponent {
 }
 ```
 
+If you want to use button in  `navigationOptions`, you should set following items:
+
+```javascript
+import { HeaderButton } from 'react-navigation-header-buttons';
+
+HeaderButton.defaultProps.getButtonElement = (props) => {
+    const {title} = props;
+    return (
+        <Text>
+            {title}
+        </Text>
+    );
+};
+```
+
 You can set the following properties or see example project to learn how to use it.
 
 ## Properties
@@ -99,7 +114,7 @@ Optional:
 * `flatListProps`: Props of `FlatList` when data is flat.
 * `sectionListProps`: Props of `SectionList` when data is splitted to sections.
 * `searchListProps`: Props of `FlatList` when searching.
-* `buttonProps`: Props of `Button` in navigation bar.
+* `buttonProps`: Props of `HeaderButton` in navigation bar.
 * `labels`: Label text in component.
 
 You can change labels globally by following statement:

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@hecom/image-arrow": "^1.0.0",
     "general-tree": "^1.1.2",
+    "react-navigation-header-buttons": "^2.1.1",
     "react-native-general-searchbar": "^1.0.6"
   }
 }

src/PickList.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { SafeAreaView, LayoutAnimation, FlatList, SectionList, StyleSheet, View, Button, DeviceEventEmitter } from 'react-native';
+import { SafeAreaView, LayoutAnimation, FlatList, SectionList, StyleSheet, View, DeviceEventEmitter } from 'react-native';
+import { HeaderButton } from 'react-navigation-header-buttons';
 import HeaderBackButton from 'react-navigation-stack/dist/views/Header/HeaderBackButton';
 import SearchBar from 'react-native-general-searchbar';
 import Tree from 'general-tree';
@@ -79,15 +80,14 @@ export default class extends React.PureComponent {
         const {rightTitle, rightClick} = this.props;
         if (rightTitle && rightTitle.length > 0) {
             navOptions._right_ = (
-                <Button
+                <HeaderButton
                     title={rightTitle}
                     onPress={rightClick || this._clickOK}
-                    {...this.props.buttonProps}
                 />
             );
         } else if (!this.props.multiselect && !this.props.directBackWhenSingle) {
             navOptions._right_ = (
-                <Button
+                <HeaderButton
                     title={this.props.labels.ok}
                     onPress={this._clickOK}
                     {...this.props.buttonProps}
@@ -102,7 +102,7 @@ export default class extends React.PureComponent {
                             {...props}
                             onPress={this._clickBack.bind(this, 0)}
                         />
-                        <Button
+                        <HeaderButton
                             title={this.props.labels.close}
                             onPress={this._clickBack.bind(this, 1)}
                             {...this.props.buttonProps}