(null);
+ const [html, setHtml] = useState(
+ 'Edit the input above, then press Render.
'
+ );
+
+ const buttons = [
+ {
+ label: 'Bold',
+ state: state?.bold,
+ onPress: () => ref.current?.toggleBold(),
+ },
+ {
+ label: 'Italic',
+ state: state?.italic,
+ onPress: () => ref.current?.toggleItalic(),
+ },
+ { label: 'H1', state: state?.h1, onPress: () => ref.current?.toggleH1() },
+ {
+ label: 'Quote',
+ state: state?.blockQuote,
+ onPress: () => ref.current?.toggleBlockQuote(),
+ },
+ ];
+
+ // Pull the current HTML off the editor and hand it to the viewer.
+ const render = async () => {
+ const value = await ref.current?.getHTML();
+ if (value) setHtml(value);
+ };
+
+ return (
+
+ setState(e.nativeEvent)}
+ />
+
+ {buttons.map(button => (
+
+
+ {button.label}
+
+
+ ))}
+
+
+
+
+ Render ↓
+
+
+
+
+ {html}
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: { gap: 12 },
+ input: {
+ fontSize: 18,
+ color: '#232736',
+ padding: 12,
+ borderRadius: 12,
+ minHeight: 96,
+ backgroundColor: '#eef0ff',
+ },
+ row: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ gap: 8,
+ },
+ button: {
+ width: 90,
+ padding: 8,
+ borderRadius: 24,
+ borderWidth: 1,
+ borderColor: '#919fcf',
+ },
+ buttonActive: {
+ borderColor: '#57b495',
+ backgroundColor: '#57b495',
+ },
+ buttonDisabled: {
+ opacity: 0.4,
+ },
+ text: {
+ textAlign: 'center',
+ color: '#919fcf',
+ },
+ textActive: {
+ color: '#eef0ff',
+ },
+ viewer: {
+ fontSize: 18,
+ color: '#232736',
+ padding: 12,
+ borderRadius: 12,
+ minHeight: 64,
+ backgroundColor: '#eef0ff',
+ },
+});