wix-incubator
Richtext Toolbar hide behind keyboard
The rich text toolbar hide behind keyboard when keyboard is show.
When i focus on the content/title text input to edit the content, the keyboard is appear but its hide the rich text tool bar so i can't able to apply bold,italic and some other styles to text. My code...
`
<ScrollView>
<View style={{height:300}}>
<RichTextEditor
ref={(r) => this.richtext = r}
titlePlaceholder='Title...'
contentPlaceholder='Content...'
editorInitializedCallback={() => this.onEditorInitialized()}
/>
<RichTextToolbar
getEditor={() => this.richtext}
actions={defaultActions}
iconTint='black'
selectedButtonStyle={{backgroundColor:'yellow'}}
/>
</View>
.....
</ScrollView>
I have scrollview because i had more components in a single screen screen. without scrollview also tool bar doesn't show when keyboard appears.
How to make it to display tool bar when key board appears?
Try using KeyboardAvoidingView to wrap around the scrollview. something like this:
import { KeyboardAvoidingView } from 'react-native' <KeyboardAvoidingView style={{flex: 1}} behavior={'padding'}> <ScrollView /> </KeyboardAvoidingView>
The funny thing is the Toolbar I can show in the app but the rich text editor doesn't show,
This is my code:
<RichTextEditor
ref={(r)=>this.richtext = r}
style={styles.richText}
initialTitleHTML={'Title!!'}
initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
editorInitializedCallback={() => this.onEditorInitialized()}
/>
<RichTextToolbar
getEditor={() => this.richtext}
/>
I found out if the rich text editor inside the scroll view it doesn't show but if outside the scrollview the rich text editor will show, the screenshot is below:
And the code:
<ScrollView
automaticallyAdjustContentInsets={false}
contentContainerStyle={styles.scrollViewContainer}>
<View style={styles.inputContainer}>
<RichTextEditor // <= The rich text editor doesn't show
ref={(r)=>this.richtext = r}
style={styles.richText}
initialTitleHTML={'Title!!'}
initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
editorInitializedCallback={() => this.onEditorInitialized()}
/>
<RichTextToolbar
getEditor={() => this.richtext}
/>
return (
...
<View style={styles.container}>
<View style={styles.topBar}>
...
<RichTextEditor // <= This rich text editor show in the top bar
ref={(r) => this.richtext = r}
titlePlaceholder='Title...'
contentPlaceholder='Content...'
editorInitializedCallback={() => this.onEditorInitialized()}
/>
...
</View>
</View>
Please advice and thanks for the help. Thank you
I was able to display the rich text editor using the view and style to do it, use the view inside the scrollview as shown in the image below:
But the title and the content should have the placeholder name but it doesn't show and another question is the Toolbar no have any function at all, when I got put the text try the bold or italic style it didn't works and image, attachment action also no works, please advice. Thank you
@JohnHour89 Hello， can you tell me how to reset the placehold' style.I want to let the title's placeholder fontsize the same as the fontsize of the content's placeholder.Thank you very much!
How to let the tool above the keybord?If it will be hard,can It be above the Input?
using
<KeyboardAvoidingView style={styles.container} behavior={"height"}>
show be working
