i'm building Raect Native with Expo, trying to make custom dropdown and i find and article wit an awesome expiation how to do that here

the code written with typeScript syntax, but my project using a javaScript syntax so

1. how can i change the code syntax's to work on my project?
2. can use both Typescript and javascript on one project (so build the reusable component with Typescript)?

interface Props {
  label: string;
}

const Dropdown: FC<Props> = ({ label }) => {
  const [visible, setVisible] = useState(false);

  const toggleDropdown = () => {
    setVisible(!visible);
  };

  const renderDropdown = () => {
    if (visible) {
      return (
          <Text style={styles.dropdown}>
            This is where the dropdown will be rendered.
          </Text>
      );
    }
  };

  return (
    <TouchableOpacity
      style={styles.button}
      onPress={toggleDropdown}
    >
      {renderDropdown()}
      <Text style={styles.buttonText}>{label}</Text>
      <Icon type='font-awesome' name='chevron-down'/>
    </TouchableOpacity>
  );
}

CodePudding user response：

A js script is a valid ts script so you can 'use both'.

(In fact every thing is typescript (sometimes without types))

To make this full javascript you have to suppress types and interfaces, like this :

// interface Props {
//   label: string;
// }

// const Dropdown: FC<Props> = ({ label }) => {
const Dropdown = ({ label }) => {
  const [visible, setVisible] = useState(false);

  const toggleDropdown = () => {
    setVisible(!visible);
  };

  const renderDropdown = () => {
    if (visible) {
      return (
          <Text style={styles.dropdown}>
            This is where the dropdown will be rendered.
          </Text>
      );
    }
  };

  return (
    <TouchableOpacity
      style={styles.button}
      onPress={toggleDropdown}
    >
      {renderDropdown()}
      <Text style={styles.buttonText}>{label}</Text>
      <Icon type='font-awesome' name='chevron-down'/>
    </TouchableOpacity>
  );
}