Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The Keyboard android hide toolbar #122

Open
socheat-leang opened this issue Apr 30, 2021 · 0 comments
Open

The Keyboard android hide toolbar #122

socheat-leang opened this issue Apr 30, 2021 · 0 comments

Comments

@socheat-leang
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant