Add a loading animation as the indicator when calling toast.loading

[troyeguo]

When calling toast.loading and toast.promise, the toast only shows plain text. It would be nice if we could have a loading animation as the indicator.

[nickdebaise]

This is a good feature to have natively, I will add to the todos.

For now, you can pass in a react component to the message or "loading" field of a loading/promise toast like so:

// Example 1
toast.loading(
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <ActivityIndicator style={{ marginRight: 16 }} />
    <Text
      style={{
        color: 'white',
      }}
    >
      Loading1
    </Text>
  </View>,
  {
    position,
    duration,
  }
);

// Example 2
toast.promise(
  sleep,
  {
    loading: (
      <View
        style={{ flexDirection: 'row', alignItems: 'center' }}
      >
        <ActivityIndicator style={{ marginRight: 16 }} />
        <Text
          style={{
            color: 'white',
          }}
        >
          Loading
        </Text>
      </View>
    ),
    success: (data: any) => 'Welcome ' + data.username,
    error: (err) => err.toString(),
  },
  {
    position,
    duration,
  }
);

[nickdebaise]

Updated an example in the docs: Custom Loading Indicator

[troyeguo]

I'm using the latest 0.12.1 version, but i kept getting the following error when i tried the example code.

TypeError: Cannot assign to read-only property 'validated'

[nickdebaise]

@troyeguo Added an example of a custom loading indicator in the ./example directory and updated docs to match. Docs may take a minute to propagate. Please let me know if this works! Thank you.

[troyeguo]

Thanks，I've tried the example in the ./example directory. Loading Indicator works.