Skip to content

Commit

Permalink
Scroll to caret position on focused field (#461)
Browse files Browse the repository at this point in the history 
* Add measureSelectionInWindow native call

* Add scroll to caret ability

* Update react-native-keyboard-aware-scroll-view ref

* Use public method viewForReactTag to get the view

* Remove unnecessary self usage

* Move native call to its own project

* Update react-native-keyboard-aware-scroll-view ref

* Update react-native-keyboard-aware-scroll-view ref to version
  • Loading branch information
@pinarol
pinarol authored Jan 4, 2019
1 parent 529cd6e commit 704d003
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 21 deletions.
30 changes: 30 additions & 0 deletions ios/gutenberg.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
7EC7328F21907E3F00FED2E6 /* GutenbergViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7EC7328E21907E3F00FED2E6 /* GutenbergViewController.swift */; };
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
8C666FF0C9224FB88C2C0447 /* libRNSVG-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 9BFAFEB337654221B2F14D03 /* libRNSVG-tvOS.a */; };
91C7517C21DE3A2400106645 /* libRNKeyboardAwareScrollView.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 91C7517721DE393000106645 /* libRNKeyboardAwareScrollView.a */; };
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
CF45443564B845C8BDCFBAB6 /* libRNTAztecView.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3ADEFEC092CF4D00BEF1019E /* libRNTAztecView.a */; };
DD2AE937473A49B2B5A0E7B6 /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 0EB766FE2F6D446A80AC6E6A /* libRNSVG.a */; };
Expand Down Expand Up @@ -334,6 +335,13 @@
remoteGlobalIDString = 6DA7B8031F692C4C00FD1D50;
remoteInfo = RNSafeArea;
};
91C7517621DE393000106645 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = 91C7514D21DE393000106645 /* RNKeyboardAwareScrollView.xcodeproj */;
proxyType = 2;
remoteGlobalIDString = 6DA7B8031F692C4C00FD1D50;
remoteInfo = RNKeyboardAwareScrollView;
};
ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
Expand Down Expand Up @@ -406,6 +414,7 @@
7EA30CF021AC8CDA0092F894 /* libxml2.tbd */ = {isa = PBXFileReference; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libxml2.tbd; path = usr/lib/libxml2.tbd; sourceTree = SDKROOT; };
7EC7328E21907E3F00FED2E6 /* GutenbergViewController.swift */ = {isa = PBXFileReference; indentWidth = 4; lastKnownFileType = sourcecode.swift; name = GutenbergViewController.swift; path = gutenberg/GutenbergViewController.swift; sourceTree = "<group>"; tabWidth = 1; };
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
91C7514D21DE393000106645 /* RNKeyboardAwareScrollView.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNKeyboardAwareScrollView.xcodeproj; path = "../node_modules/react-native-keyboard-aware-scroll-view/ios/RNKeyboardAwareScrollView.xcodeproj"; sourceTree = "<group>"; };
9B18D59B9364468890D0E546 /* RNSVG.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNSVG.xcodeproj; path = "../node_modules/react-native-svg/ios/RNSVG.xcodeproj"; sourceTree = "<group>"; };
9BFAFEB337654221B2F14D03 /* libRNSVG-tvOS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = "libRNSVG-tvOS.a"; sourceTree = "<group>"; };
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
Expand Down Expand Up @@ -447,6 +456,7 @@
DD2AE937473A49B2B5A0E7B6 /* libRNSVG.a in Frameworks */,
CF45443564B845C8BDCFBAB6 /* libRNTAztecView.a in Frameworks */,
7E45CC5B218B42E000C0B2AB /* libRNReactNativeGutenbergBridge.a in Frameworks */,
91C7517C21DE3A2400106645 /* libRNKeyboardAwareScrollView.a in Frameworks */,
16AEBAC87CB24520ADA106D7 /* libRNSafeArea.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
Expand Down Expand Up @@ -641,6 +651,7 @@
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */,
00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */,
00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */,
91C7514D21DE393000106645 /* RNKeyboardAwareScrollView.xcodeproj */,
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */,
00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */,
139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */,
Expand Down Expand Up @@ -697,6 +708,14 @@
name = Products;
sourceTree = "<group>";
};
91C7514E21DE393000106645 /* Products */ = {
isa = PBXGroup;
children = (
91C7517721DE393000106645 /* libRNKeyboardAwareScrollView.a */,
);
name = Products;
sourceTree = "<group>";
};
ADBDB9201DFEBF0600ED6528 /* Products */ = {
isa = PBXGroup;
children = (
Expand Down Expand Up @@ -899,6 +918,10 @@
ProductGroup = 146834001AC3E56700842450 /* Products */;
ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
},
{
ProductGroup = 91C7514E21DE393000106645 /* Products */;
ProjectRef = 91C7514D21DE393000106645 /* RNKeyboardAwareScrollView.xcodeproj */;
},
{
ProductGroup = 7E45CC56218B42C000C0B2AB /* Products */;
ProjectRef = 7E45CC55218B42C000C0B2AB /* RNReactNativeGutenbergBridge.xcodeproj */;
Expand Down Expand Up @@ -1193,6 +1216,13 @@
remoteRef = 9161EFC721D277D300314043 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
91C7517721DE393000106645 /* libRNKeyboardAwareScrollView.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libRNKeyboardAwareScrollView.a;
remoteRef = 91C7517621DE393000106645 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
"react": "16.6.1",
"react-native": "0.57.5",
"react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3",
"react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.1",
"react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.2",
"react-native-modal": "^6.5.0",
"react-native-recyclerview-list": "git+https://github.com/wordpress-mobile/react-native-recyclerview-list.git#v1.0.0",
"react-native-safe-area": "^0.5.0",
Expand Down
22 changes: 22 additions & 0 deletions ...utenberg-bridge/third-party-podspecs/react-native-keyboard-aware-scroll-view.podspec.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "react-native-keyboard-aware-scroll-view",
"version": "0.8.2",
"homepage": "https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view",
"summary": "React Native module to arrange scroll poisition according to keyboard on input fields.",
"license": "MIT",
"authors": "WordPress Mobile Gutenberg Team",
"platforms": {
"ios": "8.0"
},
"source": {
"git": "https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git",
"tag": "gb-v0.8.2"
},
"source_files": "ios/RNKeyboardAwareScrollView/*.{h,m}",
"preserve_paths": "**/*.js",
"dependencies": {
"React": [

]
}
}
1 change: 0 additions & 1 deletion src/block-management/block-manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,6 @@ export class BlockManager extends React.Component<PropsType, StateType> {
blockToolbarHeight={ toolbarStyles.container.height }
innerToolbarHeight={ inlineToolbarStyles.toolbar.height }
safeAreaBottomInset={ this.state.safeAreaBottomInset }
parentHeight={ this.state.rootViewHeight }
keyboardShouldPersistTaps="always"
style={ styles.list }
data={ this.state.blocks }
Expand Down
1 change: 0 additions & 1 deletion src/components/keyboard-aware-flat-list.android.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import KeyboardAvoidingView from '../components/keyboard-avoiding-view';
type PropsType = {
...FlatList.propTypes,
shouldPreventAutomaticScroll: void => boolean,
parentHeight: number,
blockToolbarHeight: number,
innerToolbarHeight: number,
}
Expand Down
18 changes: 3 additions & 15 deletions src/components/keyboard-aware-flat-list.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,26 @@
*/
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import React from 'react';
import { FlatList, Dimensions } from 'react-native';
import { FlatList } from 'react-native';
import styles from '../block-management/block-holder.scss';

type PropsType = {
...FlatList.propTypes,
shouldPreventAutomaticScroll: void => boolean,
parentHeight: number,
blockToolbarHeight: number,
innerToolbarHeight: number,
safeAreaBottomInset: number,
}

const KeyboardAwareFlatList = ( props: PropsType ) => {
const {
parentHeight,
blockToolbarHeight,
innerToolbarHeight,
shouldPreventAutomaticScroll,
...listProps
} = props;

const extraScrollHeight = ( () => {
const { height: fullHeight, width: fullWidth } = Dimensions.get( 'window' );
const keyboardVerticalOffset = fullHeight - parentHeight;
const blockHolderPadding = styles.blockContainerFocused.paddingBottom;

if ( fullWidth > fullHeight ) { //landscape mode
//we won't try to make inner block visible in landscape mode because there's not enough room for it
return blockToolbarHeight + keyboardVerticalOffset;
}
//portrait mode
return blockToolbarHeight + keyboardVerticalOffset + blockHolderPadding + innerToolbarHeight;
} )();
const extraScrollHeight = styles.blockContainerFocused.paddingBottom + innerToolbarHeight;

return (
<KeyboardAwareScrollView
Expand All @@ -46,6 +33,7 @@ const KeyboardAwareFlatList = ( props: PropsType ) => {
keyboardShouldPersistTaps={ 'handled' }
extraScrollHeight={ extraScrollHeight }
extraBottomInset={ -props.safeAreaBottomInset }
inputAccessoryViewHeight={ blockToolbarHeight }
extraHeight={ 0 }
innerRef={ ( ref ) => {
( this: any ).scrollViewRef = ref;
Expand Down
6 changes: 3 additions & 3 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7316,9 +7316,9 @@ react-native-iphone-x-helper@^1.0.3:
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.0.tgz#9f8a376eb00bc712115abff4420318a0063fa796"
integrity sha512-xIeTo4s77wwKgBZLVRIZC9tM9/PkXS46Ul76NXmvmixEb3ZwqGdQesR3zRiLMOoIdfOURB6N9bba9po7+x9Bag==

"react-native-keyboard-aware-scroll-view@git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.1":
version "0.8.1"
resolved "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#241415de549ab4084c3df54581a8485efb51272e"
"react-native-keyboard-aware-scroll-view@git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.2":
version "0.8.2"
resolved "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#cfa411de3fe09fd071a4226bc55cd478724e1cc0"
dependencies:
prop-types "^15.6.2"
react-native-iphone-x-helper "^1.0.3"
Expand Down

0 comments on commit 704d003

Please sign in to comment.