Functional components cannot be given refs with react-native-rich-editor on Expo

Viewed 57

I am trying to use this package :

https://www.npmjs.com/package/react-native-pell-rich-editor

And I have the following code :

import { useState, useRef } from "react";
import { RFPercentage } from "react-native-responsive-fontsize";
import BottomSheet from "@gorhom/bottom-sheet";
import {
  StyleSheet,
  View,
  Text,
  Platform,
  KeyboardAvoidingView,
  SafeAreaView,
  ScrollView,
} from "react-native";
import {
  actions,
  RichEditor,
  RichToolbar,
} from "react-native-pell-rich-editor";

export default function Publish() {

  const postSheetRef = useRef(null);
  const richText = useRef();

  const snapPoints = ["90%"];
    
  };

 return (
    <>
      <View style={styles.container}>
        <View style={styles.publishHeader}>
          <Text style={styles.titleHeader}>Publier un post</Text>
        </View>
        <BottomSheet
          ref={postSheetRef}
          snapPoints={snapPoints}
          handleIndicatorStyle={{ display: "none" }}
        >
          <View style={styles.main}>
            <SafeAreaView>
              <ScrollView>
                  <RichEditor
                    ref={richText}
                    onChange={(descriptionText) => {
                      console.log("descriptionText:", descriptionText);
                    }}
                  />
              </ScrollView>

              <RichToolbar
                editor={richText}
                actions={[
                  actions.setBold,
                  actions.setItalic,
                  actions.setUnderline,
                  actions.heading1,
                ]}
                iconMap={{
                  [actions.heading1]: ({ tintColor }) => (
                    <Text style={[{ color: tintColor }]}>H1</Text>
                  ),
                }}
              />
            </SafeAreaView>
          </View>
        </BottomSheet>
      </View>
    </>
  );
}

I get this error :

Functional components cannot be given refs

It concerns the Rich Editor component.

But I just followed the documentation, so I can't understand why.

I use ref with the Bottom sheet component and it works perfectly.

I am working with Expo.

How can I solve this ? This is the only package I have found that is compatible with Expo so I need to make it work ^^.

1 Answers
<RichEditor
    ref={(r)=>{richText.current = r}}
    onChange={(descriptionText) => {
        console.log("descriptionText:", descriptionText);
    }}
/>
Related