react-native-rich-editor icon indicating copy to clipboard operation
react-native-rich-editor copied to clipboard

How can the <RichEditor /> component have a flex height?

Open Lastofthefirst opened this issue 3 years ago • 1 comments

I have tried quit a bit of different approaches to styling to give the RichEditor a flex height. I would like it to fill its container entirely and then scroll if it becomes bigger than that. Is it possible someone could show me a code example that does this? Everything I have tried has been unsuccessful.

I don't want to hardcode a height because I want it to fill the remainder of the page independent of which device. When I give it {flex: 1} the RichEditor just has no height.

Lastofthefirst avatar Jan 10 '22 16:01 Lastofthefirst

I have tried quit a bit of different approaches to styling to give the RichEditor a flex height. I would like it to fill its container entirely and then scroll if it becomes bigger than that. Is it possible someone could show me a code example that does this? Everything I have tried has been unsuccessful.

I don't want to hardcode a height because I want it to fill the remainder of the page independent of which device. When I give it {flex: 1} the RichEditor just has no height.

Hello guy, try something like this:

use Dimensions for get height from screen and add initialHeight in RichEditor Component, i believe this will be able to fill its container entirely.

import { Dimensions } from 'react-native';
...

const windowWidth = Dimensions.get('window');

<View style={{flex: 1}}>
    <ScrollView>
      <RichEditor
        disabled={false}
        ref={richText}
        placeholder={'Start Writing Here'}
        onChange={(text) => setArticle(text)}
        editorStyle={editorStyleConfig}
        initialHeight={windowWidth.height}
      />
    </ScrollView>
    <View
        style={{
          position: 'absolute',
          width: '100%',
          bottom: 0,
        }}
      >
      <RichToolbar
        editor={richText}
        actions={[
          actions.undo,
          actions.redo,
          actions.setBold,
          actions.setItalic,
          actions.insertBulletsList,
          actions.insertOrderedList,
          actions.insertImage,
          actions.insertVideo,
          actions.removeFormat,
        ]}
      />
    </View>
</View>

brunofariasd avatar Feb 15 '22 00:02 brunofariasd