Is there any React Native text editor component? - react-native

Question

I am looking for a text editor component for React Native without WebView. I found only react-native-zss-rich-text-editor, but it uses WebView, which I think is terrible.
I hope to find something, that works with NSAttributedString and SpannableString for IOS and Android in a native way, like in Evernote, for example.
Evernote Android app text editor

Answer 1

Here is a TextArea component, that wraps TextInput and resizes it automatically, when you press "new line" button
import React, { PropTypes } from 'react'
import { TextInput } from 'react-native'
export default class TextArea extends React.Component {
static propTypes = {
text: PropTypes.string.isRequired,
onChangeText: PropTypes.func.isRequired,
initialHeight: PropTypes.number,
isEditing: PropTypes.bool,
scrollViewRef: PropTypes.object,
}
static defaultProps = {
initialHeight: 40,
isEditing: true,
scrollViewRef: null,
}
state = {
height: this.props.initialHeight,
}
componentWillUnmount(){
this._isUnmounted = false
}
focus(){
this.refs.textInput.focus()
}
blur(){
this.refs.textInput.blur()
}
_contentSizeChanged = e => {
this.setState({
height: e.nativeEvent.contentSize.height,
}, () => {
if (this.props.scrollViewRef) {
setTimeout(() => {
if (!this._isUnmounted) this.props.scrollViewRef.scrollToEnd()
}, 0)
}
})
}
_onChangeText = text => {
this.props.onChangeText(text)
}
render(){
return (
<TextInput
ref = "textInput"
multiline
value = {this.props.text}
style = {{ height: this.state.height, color: 'black', flex: 1 }}
onChangeText = {this._onChangeText}
onContentSizeChange = {this._contentSizeChanged}
editable = {this.props.isEditing}
blurOnSubmit = {false}
/>
)
}
}