wix-incubator / react-native-keyboard-input

Use your own custom input component instead of the system keyboard
MIT License
818 stars 150 forks source link

The Keyboard android hide toolbar #122

Open socheat-leang opened 3 years ago

socheat-leang commented 3 years ago

Testing with iOS is working fine with Keyboard and toolbar. But the android has little problem by tool bar does not move up when the keyboard appear. It seem like the whole don't move up.

"react": "16.9.0",
"react-native": "0.61.2",
"react-native-keyboard-input": "^6.0.2",

render content toolbar

const renderToolBar = () => {
      return (
        <View style={styles.TOOLBAR}>
          <Button style={styles.BUTTON} onPress={onArrowClose}>
            <Icon icon="arrowRight" />
          </Button>
        </View>
      )
  }

render content view

return (
    <View style={{ flex: 1 }}>
      <ScrollView
        // style={styles.SCROLLING}
        contentContainerStyle={styles.SCROLLING}
        keyboardDismissMode={trackInteractive ? 'interactive' : 'none'}
      >
        <TextInput
          autoCorrect={false}
          style={styles.INPUT}
          onFocus={onInputFocuse}
          placeholder="Enter message here"
          ref={refInput}
        />
        <View style={{ position: 'absolute', bottom: 0, backgroundColor: 'white' }}>
          <Text>bottom</Text>
        </View>
      </ScrollView>
      <KeyboardAccessoryView
        renderContent={renderToolBar}
        kbInputRef={refInput}
        trackInteractive={trackInteractive}
        revealKeyboardInteractive
      />
    </View>
  )

render style

const styles = {
  MAIN: {
    flex: 1,
  } as ViewStyle,
  SCROLLING: {
    paddingTop: 100,
    height: 1000,
    backgroundColor: 'red',
    paddingHorizontal: 50,
  } as ViewStyle,
  INPUT: {
    backgroundColor: color.lightestGrey,
    height: 60,
  } as ViewStyle,
  TOOLBAR: {
    padding: 10,
    backgroundColor: 'rgb(208,210,216)',
    alignItems: 'flex-end',
  } as ViewStyle,
  BUTTON: {
    width: 60,
    height: 40,
  } as ViewStyle,
}

use ref to support textinput

const [trackInteractive, setTrackInteractive] = useState(true)
  const refInput = useRef(null)

image

I have tried go to androidManifest.xml and remove the softinput

android:windowSoftInputMode="adjustResize"

It still doesn't help. Anyone Experience this before?.

Thanks