Search code examples
reactjsreact-nativestylingtextinput

How can I make the a TextInput adapt size to avoid the keyboard?

I am working with a packaged component that has a toolbar (containing bold, italics, underline, etc. buttons) and an editor (like a TextInput).

I would like the toolbar to be just above the keyboard and the editor to change its height dynamically to take up the rest of the vertical place (between the header and the toolbar).

This is what I have so far, the toolbar is just below a horizontal scrollview (the squares will be images later). How can I make this toolbar attach itself to the keyboard, and the textInput's height dynamic to fill the rest of the screen above it, until the header?

enter image description here

Here's the code I have so far, not sure how to make these dynamic!

    <View behavior={'padding'} >
          <RichEditor
              style={{ minHeight: 150 }}
          />
          <ScrollView horizontal={true} style={{ backgroundColor: 'green' }}>
              <View style={{ backgroundColor: 'white', height: 60, width: 60, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
              <View style={{ backgroundColor: 'white', height: 60, width: 60, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
              <View style={{ backgroundColor: 'white', height: 60, width: 60, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
              <View style={{ backgroundColor: 'white', height: 60, width: 60, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
          </ScrollView>
          <KeyboardAvoidingView>
            <RichToolbar e/>
          </KeyboardAvoidingView>
          </View>
Solution

  • wrap the entire view in KeyboardAvoidingView. then let your Richtoolbar stick to bottom.

    <KeyboardAvoidingView
  behavior={Platform?.OS == 'ios' ? 'padding' : 'height'}
  style={{flex: 1}}
  enabled
  keyboardVerticalOffset={34}> //adjust the offset to  adjust position

    <View style={{ flex: 1, paddingBottom: 4 }} >
      //Content here
    </View>

  <View
    style={{
      height: 100, //or whatever height richtoolbar is
    }}>

      RICHTOOLBAR HERE

  </View>
  {/*<KeyboardSpacer topSpacing={-40}/> */}
</KeyboardAvoidingView>