search

bamlab / react-native-formik

Set of helpers to make form awesome with React Native and Formik
MIT License
398 stars 50 forks source link

KeyboardSpacer collapses momentarily when transitioning between fields #43

Open b33son opened 5 years ago

b33son commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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" } } } } }