How can I use Promises in React Native with TypeScript?

How can I use Promises in React Native with TypeScript?

You can use Promises in React Native with TypeScript by defining asynchronous functions that return a Promise. For example, you can fetch data from an API using the fetch method.

Can you show me a code example?

Sure! Here's a simple example:

const fetchData = async (): Promise<DataType> => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

This function fetches data and returns it as a Promise.

What if the fetch fails?

You can handle errors using a try-catch block. Here's how:

const fetchData = async (): Promise<DataType> => {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Network response was not ok');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
};

How do I use this data in my React Native component?

You can use the useEffect hook to call your fetchData function and store the result in state. Here's an example:

const MyComponent = () => {
  const [data, setData] = useState<DataType | null>(null);

  useEffect(() => {
    const loadData = async () => {
      const result = await fetchData();
      setData(result);
    };
    loadData();
  }, []);

  return <View>{data ? <Text>{JSON.stringify(data)}</Text> : <Text>Loading...</Text>}</View>;
};