Rich Text Editing
Software Mansion's production rich text editing patterns for React Native using react-native-enriched.
Use react-native-enriched
react-native-enriched is a native rich text editor for React Native. It provides EnrichedTextInput, a component that supports inline styles (bold, italic, underline, strikethrough, inline code), block-level formatting (headings, block quotes, code blocks, ordered/unordered/checkbox lists), mentions, links, and images.
npm install react-native-enriched
import { EnrichedTextInput } from 'react-native-enriched';
import type {
EnrichedTextInputInstance,
OnChangeStateEvent,
} from 'react-native-enriched';
import { useState, useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';
export default function App() {
const ref = useRef<EnrichedTextInputInstance>(null);
const [stylesState, setStylesState] = useState<OnChangeStateEvent | null>();
return (
<View style={styles.container}>
<EnrichedTextInput
ref={ref}
=> setStylesState(e.nativeEvent)}
style={styles.input}
/>
<Button
title={stylesState?.bold.isActive ? 'Unbold' : 'Bold'}
color={stylesState?.bold.isActive ? 'green' : 'gray'}
=> ref.current?.toggleBold()}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
width: '100%',
fontSize: 20,
padding: 10,
maxHeight: 200,
backgroundColor: 'lightgray',
},
});
References
1---2name: rich-text3description: Software Mansion's best practices for rich text editing in React Native apps using react-native-enriched. Use when building rich text editors, formatted text inputs, or any feature requiring inline styling, mentions, links, or structured text editing. Trigger on: 'rich text editor', 'rich text input', 'text editor', 'react-native-enriched', 'EnrichedTextInput', 'formatted text input', 'WYSIWYG', 'mentions input', 'text formatting toolbar', or any request to build a rich text editing experience in React Native.4---56# Rich Text Editing78Software Mansion's production rich text editing patterns for React Native using `react-native-enriched`.910## Use react-native-enriched1112`react-native-enriched` is a native rich text editor for React Native. It provides `EnrichedTextInput`, a component that supports inline styles (bold, italic, underline, strikethrough, inline code), block-level formatting (headings, block quotes, code blocks, ordered/unordered/checkbox lists), mentions, links, and images.1314```bash15npm install react-native-enriched16```1718```tsx19import { EnrichedTextInput } from 'react-native-enriched';20import type {21 EnrichedTextInputInstance,22 OnChangeStateEvent,23} from 'react-native-enriched';24import { useState, useRef } from 'react';25import { View, Button, StyleSheet } from 'react-native';2627export default function App() {28 const ref = useRef<EnrichedTextInputInstance>(null);2930 const [stylesState, setStylesState] = useState<OnChangeStateEvent | null>();3132 return (33 <View style={styles.container}>34 <EnrichedTextInput35 ref={ref}36 onChangeState={(e) => setStylesState(e.nativeEvent)}37 style={styles.input}38 />39 <Button40 title={stylesState?.bold.isActive ? 'Unbold' : 'Bold'}41 color={stylesState?.bold.isActive ? 'green' : 'gray'}42 onPress={() => ref.current?.toggleBold()}43 />44 </View>45 );46}4748const styles = StyleSheet.create({49 container: {50 flex: 1,51 justifyContent: 'center',52 alignItems: 'center',53 },54 input: {55 width: '100%',56 fontSize: 20,57 padding: 10,58 maxHeight: 200,59 backgroundColor: 'lightgray',60 },61});62```6364---6566## References6768- [react-native-enriched on GitHub](https://github.com/software-mansion/react-native-enriched)69- [API Reference](https://github.com/software-mansion/react-native-enriched/blob/main/docs/API_REFERENCE.md)
bidah