KeyboardSpacer collapses momentarily when transitioning between fields

[b33son]

I'm not sure if it's expect behavior or not, but I tried out the advanced example and (at least on IOS) the keyboard closes and the fields reposition to the expanded state for a moment before the next field takes focus. The result is that the form jumps around when using the next button on the keyboard. This does not happen when tapping on the next field or any other field.

[louiszawadzki]

Thanks a lot for reporting this issue :)

@b33son can you provide the device you are using as well as the content of your package.json?
I tried on a fresh react-native app on an iPhoneX simulator and I could not reproduce this.

[b33son]

Sorry for the slow reply...

It's an iPhone 6 Plus. I'm using the physical device when I get this, not the simulator. I actually haven't tried it on the simulator. I'm running an iPhone X simulator rather than a 6 Plus.

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"debug": "open 'rndebugger://set-debugger-loc?host=localhost&port=19001'",
"postinstall": "rndebugger-open --expo",
"eject": "expo eject",
"import:graphql": "ts-node ./src/gql/yoga/index.ts",
"gen": "npm run import:graphql",
"test": "npm run import:graphql && npm run tslint && npm run tsc-test && npm run jest",
"tslint": "tslint -t verbose --project .",
"tsc-test": "tsc --project . --noEmit",
"jest": "jest"
},
"dependencies": {
"@types/graphql": "^14.0.3",
"apollo-cache-inmemory": "^1.3.11",
"apollo-client": "^2.4.7",
"apollo-link-context": "^1.0.11",
"apollo-link-http": "^1.5.7",
"expo": "^31.0.2",
"formik": "^1.4.0",
"graphql": "^14.0.2",
"graphql-tag": "^2.10.0",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"native-base": "^2.8.1",
"react": "16.5.0",
"react-apollo": "^2.3.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-formik": "^1.6.0",
"react-native-hide-with-keyboard": "^1.2.0",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-vector-icons": "^6.1.0",
"react-router-native": "^4.3.0",
"recompose": "^0.30.0",
"yup": "^0.26.6"
},
"devDependencies": {
"@types/expo": "^31.0.1",
"@types/isomorphic-fetch": "^0.0.34",
"@types/jest": "^23.3.10",
"@types/lodash": "^4.14.118",
"@types/node": "^10.12.12",
"@types/react": "^16.7.13",
"@types/react-native": "^0.57.18",
"@types/react-test-renderer": "^16.0.3",
"babel-preset-expo": "^5.0.0",
"fs": "^0.0.1-security",
"isomorphic-fetch": "^2.2.1",
"jest": "^23.6.0",
"jest-expo": "^31.0.0",
"react-native-debugger-open": "^0.3.17",
"react-test-renderer": "^16.6.3",
"ts-jest": "^23.10.5",
"ts-node": "^7.0.1",
"tslint": "^5.11.0",
"tslint-config-airbnb": "^5.11.1",
"typescript": "^3.2.2"
},
"private": true,
"jest": {
"preset": "jest-expo",
"transform": {
"^.+\.js$": "/node_modules/react-native/jest/preprocessor.js",
"^.+\.tsx?$": "ts-jest"
},
"testMatch": [
"/tests//.ts?(x)",
"**/?(.)+(spec|test).ts?(x)"
],
"moduleFileExtensions": [
"js",
"ts",
"tsx"
],
"globals": {
"ts-jest": {
"tsConfig": {
"jsx": "react"
}
}
}
}
}