Exposed PreviousNextView to wrap TextInput and solve the problem of navigating between fields in Modal. #8

2026-01-12 17:42:34 +08:00 · 2017-09-23 11:25:05 -03:00
parent e2cba82418
commit 6b96f9fd8f
6 changed files with 97 additions and 19 deletions
--- a/Sample/index.ios.js
+++ b/Sample/index.ios.js
@@ -31,9 +31,10 @@ import {
    TextInput,
    ScrollView,
    Switch,
+    Modal,
 } from 'react-native';

-import KeyboardManager from 'react-native-keyboard-manager'
+import KeyboardManager, { PreviousNextView } from 'react-native-keyboard-manager'

 KeyboardManager.setEnable(true);
 KeyboardManager.setEnableDebugging(false);
@@ -42,7 +43,7 @@ KeyboardManager.setPreventShowingBottomBlankSpace(true);
 KeyboardManager.setEnableAutoToolbar(true);
 KeyboardManager.setToolbarDoneBarButtonItemText("Close");
 KeyboardManager.setToolbarManageBehaviour(0);
-KeyboardManager.setToolbarPreviousNextButtonEnable(false);
+KeyboardManager.setToolbarPreviousNextButtonEnable(true);
 KeyboardManager.setShouldToolbarUsesTextFieldTintColor(false);
 KeyboardManager.setShouldShowTextFieldPlaceholder(true);
 KeyboardManager.setOverrideKeyboardAppearance(false);
@@ -116,20 +117,30 @@ class SampleKeyboardManager extends Component {

        return (
            <View style={{ flex: 1 }}>
-                {/* ScrollView is not required, but may be required in some cases. */}
-                <ScrollView>

-                    <View style={{ alignItems: "center" }}>
-                        <Text style={{ marginTop: 50, textAlign: "center" }}>React-Native Keyboard Manager</Text>
-                        <View style={{ marginTop: 10, flexDirection: "row", alignItems: "center" }}>
-                            <Text>Enable/Disable </Text>
-                            <Switch onValueChange={this.enableDisable.bind(this)}
-                                value={this.state.enableDisable} />
-                        </View>
-                    </View>
+                {/* To try with Modal, uncomment the two following lines. */}
+                {/* <Modal visible={true}> */}
+                    {/* <PreviousNextView style={{ flex: 1 }}> */}
+
+                        {/* ScrollView is not required, but may be needed in some cases. */}
+                        <ScrollView>
+
+                            <View style={{ alignItems: "center" }}>
+                                <Text style={{ marginTop: 50, textAlign: "center" }}>React-Native Keyboard Manager</Text>
+                                <View style={{ marginTop: 10, flexDirection: "row", alignItems: "center" }}>
+                                    <Text>Enable/Disable </Text>
+                                    <Switch onValueChange={this.enableDisable.bind(this)}
+                                        value={this.state.enableDisable} />
+                                </View>
+                            </View>
+
+                            <View>{inputs}</View>
+
+                        </ScrollView>
+
+                    {/* </PreviousNextView> */}
+                {/* </Modal> */}

-                    <View>{inputs}</View>
-                </ScrollView>
            </View>
        )
    }
--- a/Sample/ios/SampleKeyboardManager.xcodeproj/project.pbxproj
+++ b/Sample/ios/SampleKeyboardManager.xcodeproj/project.pbxproj
@@ -960,7 +960,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
 		2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
 			isa = PBXShellScriptBuildPhase;
--- a/index.js
+++ b/index.js
@@ -23,11 +23,10 @@
 */

 import {
-    NativeModules, DeviceEventEmitter
+    NativeModules, DeviceEventEmitter, requireNativeComponent,
 } from 'react-native';

 const KeyboardManager = NativeModules.ReactNativeKeyboardManager;
+export default KeyboardManager;

-module.exports = KeyboardManager;
-
-
+export const PreviousNextView = requireNativeComponent('RNKMPreviousNextView');
--- a/ios/ReactNativeKeyboardManager.xcodeproj/project.pbxproj
+++ b/ios/ReactNativeKeyboardManager.xcodeproj/project.pbxproj
@@ -24,6 +24,7 @@
 		A51184261EFAD3660077C68F /* IQToolbar.m in Sources */ = {isa = PBXBuildFile; fileRef = A51184151EFAD3660077C68F /* IQToolbar.m */; };
 		A51184271EFAD3660077C68F /* IQUIView+IQKeyboardToolbar.m in Sources */ = {isa = PBXBuildFile; fileRef = A51184171EFAD3660077C68F /* IQUIView+IQKeyboardToolbar.m */; };
 		A54A31CD1F42442A00950C4B /* IQKeyboardManager.bundle in Sources */ = {isa = PBXBuildFile; fileRef = A54A31CC1F4243FF00950C4B /* IQKeyboardManager.bundle */; };
+		A5A1B05A1F76A1FF000B2090 /* RNKMPreviousNextViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = A5A1B0591F76A1FE000B2090 /* RNKMPreviousNextViewManager.m */; };
 /* End PBXBuildFile section */

 /* Begin PBXCopyFilesBuildPhase section */
@@ -75,6 +76,8 @@
 		A51184171EFAD3660077C68F /* IQUIView+IQKeyboardToolbar.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = "IQUIView+IQKeyboardToolbar.m"; sourceTree = "<group>"; };
 		A51184191EFAD3660077C68F /* IQKeyboardManager.bundle */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.plug-in"; path = IQKeyboardManager.bundle; sourceTree = "<group>"; };
 		A54A31CC1F4243FF00950C4B /* IQKeyboardManager.bundle */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.plug-in"; path = IQKeyboardManager.bundle; sourceTree = "<group>"; };
+		A5A1B0581F76A1FE000B2090 /* RNKMPreviousNextViewManager.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNKMPreviousNextViewManager.h; sourceTree = "<group>"; };
+		A5A1B0591F76A1FE000B2090 /* RNKMPreviousNextViewManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNKMPreviousNextViewManager.m; sourceTree = "<group>"; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -111,6 +114,8 @@
 		A511835A1EFAC0300077C68F /* ReactNativeKeyboardManager */ = {
 			isa = PBXGroup;
 			children = (
+				A5A1B0581F76A1FE000B2090 /* RNKMPreviousNextViewManager.h */,
+				A5A1B0591F76A1FE000B2090 /* RNKMPreviousNextViewManager.m */,
 				A511835B1EFAC0300077C68F /* ReactNativeKeyboardManager.h */,
 				A511835C1EFAC0300077C68F /* ReactNativeKeyboardManager.m */,
 			);
@@ -268,6 +273,7 @@
 				A511841A1EFAD3660077C68F /* IQNSArray+Sort.m in Sources */,
 				A511841B1EFAD3660077C68F /* IQUIScrollView+Additions.m in Sources */,
 				A51184231EFAD3660077C68F /* IQBarButtonItem.m in Sources */,
+				A5A1B05A1F76A1FF000B2090 /* RNKMPreviousNextViewManager.m in Sources */,
 				A511841F1EFAD3660077C68F /* IQUIWindow+Hierarchy.m in Sources */,
 				A51184221EFAD3660077C68F /* IQTextView.m in Sources */,
 				A511841C1EFAD3660077C68F /* IQUITextFieldView+Additions.m in Sources */,
--- a/ios/ReactNativeKeyboardManager/RNKMPreviousNextViewManager.h
+++ b/ios/ReactNativeKeyboardManager/RNKMPreviousNextViewManager.h
@@ -0,0 +1,28 @@
+// MIT License
+//
+// Copyright (c) 2017 Douglas Nassif Roma Junior
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+#import "IQPreviousNextView.h"
+
+#import <React/RCTViewManager.h>
+
+@interface RNKMPreviousNextViewManager : RCTViewManager
+@end
--- a/ios/ReactNativeKeyboardManager/RNKMPreviousNextViewManager.m
+++ b/ios/ReactNativeKeyboardManager/RNKMPreviousNextViewManager.m
@@ -0,0 +1,34 @@
+// MIT License
+//
+// Copyright (c) 2017 Douglas Nassif Roma Junior
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+#import "RNKMPreviousNextViewManager.h"
+
+@implementation RNKMPreviousNextViewManager
+
+RCT_EXPORT_MODULE()
+
+- (UIView *)view
+{
+  return [[IQPreviousNextView alloc] init];
+}
+
+@end