boostnote-mobile icon indicating copy to clipboard operation
boostnote-mobile copied to clipboard

Word prediction of keyboad is concealing bottom line.

Open shogochiai opened this issue 7 years ago • 10 comments

screenshot_2017-12-09-08-47-44

screenshot_2017-12-09-08-47-59

shogochiai avatar Dec 09 '17 01:12 shogochiai

https://facebook.github.io/react-native/docs/keyboardavoidingview.html

This might be a solution. But need some prototyping.

shogochiai avatar Dec 09 '17 02:12 shogochiai

https://github.com/BoostIO/boostnote-mobile/blob/master/app/components/MultilineTextInput.js#L38

This component is the target.

shogochiai avatar Dec 09 '17 02:12 shogochiai

@shogochiai Thank you for your report! Since we made this app in a hurry, we using MultilineTextInput component. Original one is here. I think that we should remake this component.

kazup01 avatar Dec 09 '17 02:12 kazup01

I could guess why. And my hope is making this cool app to be production readied. Just go forward.

I found sample code of keyboard hack

import React from 'react';
import { View, TextInput, Image, KeyboardAvoidingView } from 'react-native';
import styles from './styles';
import logo from './logo.png';

const Demo = () => {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
    >
      <Image source={logo} style={styles.logo} />
      <TextInput
        placeholder="Email"
        style={styles.input}
      />
      <TextInput
        placeholder="Username"
        style={styles.input}
      />
      <TextInput
        placeholder="Password"
        style={styles.input}
      />
      <TextInput
        placeholder="Confirm Password"
        style={styles.input}
      />
      <View style={{ height: 60 }} />
    </KeyboardAvoidingView>
  );
};

export default Demo;

shogochiai avatar Dec 09 '17 02:12 shogochiai

And demo

1_yrvctp6rn8zn7r7w1ljtuq

cite: https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

shogochiai avatar Dec 09 '17 02:12 shogochiai

Cool! Thanks for suggestion😄 Could you try to send us this pull request? @shogochiai

kazup01 avatar Dec 09 '17 02:12 kazup01

I would take some time for env setting though will try to. If there's other guy who can solve this instantly, please go ahead.

shogochiai avatar Dec 09 '17 03:12 shogochiai

Sure. @kohei-takata -san will check it soon ;)

kazup01 avatar Dec 09 '17 04:12 kazup01

I can't fix the bug with using above codes. But I notice that there are no need to use MultilineTextInput.js , because of update of React Native. So I will delete that.

kohei-takata avatar Dec 09 '17 05:12 kohei-takata

I created a PR that deleting MultilineTextInput.js #128

kohei-takata avatar Dec 09 '17 05:12 kohei-takata