cally/components/pages/brain_dump/AddBrainDump.tsx

import {Button, Dialog, TextField, TextFieldRef, TouchableOpacity, View,} from "react-native-ui-lib";
import React, {useEffect, useRef, useState} from "react";
import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
import {Dimensions, Platform, StyleSheet} from "react-native";

import DropModalIcon from "@/assets/svgs/DropModalIcon";
import {useBrainDumpContext} from "@/contexts/DumpContext";
import KeyboardManager from "react-native-keyboard-manager";

interface IAddBrainDumpProps {
    isVisible: boolean;
    setIsVisible: (value: boolean) => void;
}

const AddBrainDump = ({
                          addBrainDumpProps,
                      }: {
    addBrainDumpProps: IAddBrainDumpProps;
}) => {
    const {addBrainDump} = useBrainDumpContext();
    const [dumpTitle, setDumpTitle] = useState<string>("");
    const [dumpDesc, setDumpDesc] = useState<string>("");
    const {width} = Dimensions.get("screen");


    // Refs for the two TextFields
    const descriptionRef = useRef<TextFieldRef>(null);
    const titleRef = useRef<TextFieldRef>(null);

    useEffect(() => {
        setDumpDesc("");
        setDumpTitle("");
    }, [addBrainDumpProps.isVisible]);

    useEffect(() => {
        if (addBrainDumpProps.isVisible) {
            setTimeout(() => {
                titleRef?.current?.focus()
            }, 500)
        }
    }, [addBrainDumpProps.isVisible]);

  useEffect(() => {
    if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(false);
  }, []);

    return (
        <Dialog
            bottom={true}
            height={"90%"}
            width={width}
            panDirection={PanningDirectionsEnum.DOWN}
            onDismiss={() => addBrainDumpProps.setIsVisible(false)}
            containerStyle={styles.dialogContainer}
            visible={addBrainDumpProps.isVisible}
        >
            <View row spread style={styles.topBtns} marginB-20>
                <Button
                    color="#05a8b6"
                    label="Cancel"
                    style={styles.topBtn}
                    onPress={() => {
                        addBrainDumpProps.setIsVisible(false);
                    }}
                />
                <TouchableOpacity onPress={() => addBrainDumpProps.setIsVisible(false)}>
                    <DropModalIcon style={{marginTop: 15}}/>
                </TouchableOpacity>
                <Button
                    color="#05a8b6"
                    label="Save"
                    style={styles.topBtn}
                    onPress={() => {
                        addBrainDump({
             
                            id: '99',
             
                            title: dumpTitle.trimEnd().trimStart(),
             
                            description: dumpDesc.trimEnd().trimStart(),
           
                        });
                        addBrainDumpProps.setIsVisible(false);
                    }}
                />
            </View>
            <View marginH-20>
                <TextField
                    value={dumpTitle}
                    ref={titleRef}
                    placeholder="Set Title"
                    text60R
                    onChangeText={(text) => {
                        setDumpTitle(text);
                    }}
                    onSubmitEditing={() => {
                        // Move focus to the description field
                        descriptionRef.current?.focus();
                    }}
                    style={styles.title}
                    blurOnSubmit={false} // Keep the keyboard open when moving focus
                    returnKeyType="next"
                />
                <View height={2} backgroundColor="#b3b3b3" width={"100%"} marginB-20/>
                <TextField
                    ref={descriptionRef}
                    value={dumpDesc}
                    placeholder="Write Description"
                    text70
                    onChangeText={(text) => {
                        setDumpDesc(text);
                    }}
                    style={styles.description}
                    multiline
                    numberOfLines={4}
                    maxLength={255}
                    onEndEditing={() => {
                        descriptionRef.current?.blur();
                    }}
                    returnKeyType="done"
                />
            </View>
        </Dialog>
    );
};

const styles = StyleSheet.create({
  dialogContainer: {
    borderTopRightRadius: 15,
    borderTopLeftRadius: 15,
    backgroundColor: "white",
    padding: 0,
    paddingTop: 3,
    margin: 0,
  },
  topBtns: {},
  topBtn: {
    backgroundColor: "white",
    color: "#05a8b6",
  },
  title: {
    fontSize: 22,
    fontFamily: "Manrope_500Medium",
  },
  description: {
    fontFamily: "Manrope_400Regular",
    fontSize: 14,
    textAlignVertical: "top",
  },
});

export default AddBrainDump;