imnapo / react-native-cn-quill

Quill rich-text editor for react-native
MIT License
190 stars 77 forks source link

onBlur doesn't work #129

Open GrigoriyPol opened 11 months ago

GrigoriyPol commented 11 months ago

I want to dismiss keyboard when user loses focus (scroll or tap outside of the editor area) but it doesn't work. Also I couldn't find how to use focus and blur methods to do it manually.

BeenishHanif commented 3 months ago

hey have u found out any way to achieve this?

kevalkikani180 commented 2 weeks ago

To implement a shared editor ref for managing blur behavior, follow these steps:

Create a context for the editor ref in a new file:

`// FlowChatRefContext.js import React, { createContext, useContext } from "react";

// Create the context const FlowChatRefContext = createContext(null);

// Provider component to wrap around components needing access to the ref export const FlowChatRefProvider = ({ children }: any) => { const ref: any = React.createRef(); return (

{children} ); }; // Custom hook to access the ref export const useSharedRef = () => { const context = useContext(FlowChatRefContext); if (!context) { throw new Error("useSharedRef must be used within a FlowChatRefProvider"); } return context; }; ` Use the shared ref in your component: `const _editor = useSharedRef(); ` Add blur functionality to your main view by attaching it to SafeAreaView: ` _editor?.current?.blur()}> {/* Your main view content */} ` This solution ensures that the editor blurs properly by calling blur on _editor when the SafeAreaView is touched.