Skip to content

Commit 997bf02

Browse files
gh-clement-taboulotAlmouro
authored andcommitted
docs: add guide for keyboard spacer
* doc/Bottom form * Add gif * wording * Update README.md Review's changes
1 parent ff019be commit 997bf02

2 files changed

Lines changed: 86 additions & 0 deletions

File tree

README.md

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,3 +389,89 @@ export default props => (
389389
/>
390390
);
391391
```
392+
393+
## Guide
394+
395+
### Move form above keyboard
396+
397+
The purpose of this section is to give you a solution to create a bottom form which will go up when the keyboard appears, and the content at the top at the page will disappear.
398+
399+
You have to:
400+
401+
* Create a form like you learnt above ;
402+
* Use [react-native-keyboard-spacer](https://github.com/Andr3wHur5t/react-native-keyboard-spacer): it will create view with the keyboard's size when the keyboard will opened;
403+
* Use [react-native-hide-with-keyboard](https://github.com/bamlab/react-native-hide-with-keyboard): it will hide component when the keyboard will opened.
404+
405+
```javascript
406+
import React, { PureComponent } from "react";
407+
import { Image, Platform, ScrollView } from "react-native";
408+
import Hide from "react-native-hide-with-keyboard";
409+
import KeyboardSpacer from "react-native-keyboard-spacer";
410+
import { Formik } from "formik";
411+
import { Button, FormFormik, TextInputFormik } from "./components";
412+
const cat = require("./cat.jpg");
413+
414+
class AdoptACat extends PureComponent<{}> {
415+
render() {
416+
return (
417+
<ScrollView
418+
style={styles.container}
419+
contentContainerStyle={styles.contentContainer}
420+
keyboardShouldPersistTaps="handled"
421+
>
422+
<Hide>
423+
<Image source={cat} style={styles.image} />
424+
</Hide>
425+
<View style={styles.fillContainer} />
426+
<Formik
427+
onSubmit={() => {}}
428+
render={props => (
429+
<FormFormik>
430+
<TextInputFormik
431+
name="catName"
432+
placeholder={"His name"}
433+
returnKeyType="next"
434+
type="name"
435+
/>
436+
<TextInputFormik
437+
name="humanName"
438+
placeholder={"Your name"}
439+
returnKeyType="done"
440+
type="name"
441+
/>
442+
<Button text={"Adopt him ..."} />
443+
</FormFormik>
444+
)}
445+
/>
446+
{Platform.OS === "ios" && <KeyboardSpacer />}
447+
</ScrollView>
448+
);
449+
}
450+
}
451+
452+
const styles = {
453+
container: {
454+
backgroundColor: "white",
455+
flex: 1,
456+
padding: 20
457+
},
458+
contentContainer: {
459+
flex: 1
460+
},
461+
fillContainer: {
462+
flex: 1
463+
},
464+
image: {
465+
alignSelf: "center",
466+
resizeMode: "contain"
467+
}
468+
};
469+
470+
export default AdoptACat;
471+
```
472+
473+
For Android, we don't have to use react-native-keyboard-spacer because `android:windowSoftInputMode` is in `adjustResize` mode. Indeed, the view is automatically resize and you don't have to fill it like on iOS.
474+
475+
Enjoy your life :
476+
477+
![iOS](https://github.com/bamlab/react-native-formik/blob/bottom-form/doc/images/bottomForm.gif)

doc/images/bottomForm.gif

1.87 MB
Loading

0 commit comments

Comments
 (0)