cally/components/pages/brain_dump/AddBrainDump.tsx

import {
  View,
  Text,
  Button,
  TextField,
  TextFieldRef,
  TouchableOpacity,
} from "react-native-ui-lib";
import React, { useEffect, useState, useRef } from "react";
import { Dialog } from "react-native-ui-lib";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { Dimensions, Keyboard, 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(() => {
    setTimeout(() => {
      titleRef?.current?.focus();
    }, 500);
  }, []);

  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;