react-native-rich-editor
react-native-rich-editor copied to clipboard
How can the <RichEditor /> component have a flex height?
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.
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>