Skip to content

The Keyboard android hide toolbar #122

@socheat-leang

Description

@socheat-leang

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions