React Native — Toasts and Activity Indicator

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

ToastAndroid

We can show a toast in our Android app with the ToastAndroid component.

For instance, we can write:

import React from 'react';
import { View, StyleSheet, ToastAndroid, Button } from "react-native";
import Constants from "expo-constants";

const showToast = () => {
  ToastAndroid.show("Hello World", ToastAndroid.SHORT);
};

const showToastWithGravity = () => {
  ToastAndroid.showWithGravity(
    "Hello World",
    ToastAndroid.SHORT,
    ToastAndroid.CENTER
  );
};

const showToastWithGravityAndOffset = () => {
  ToastAndroid.showWithGravityAndOffset(
    "A wild toast appeared!",
    ToastAndroid.LONG,
    ToastAndroid.BOTTOM,
    25,
    50
  );
};

export default function App() {
  return (
    <View style={styles.container}>
      <Button title="Toggle Toast" onPress={() => showToast()} />
      <Button
        title="Toggle Toast With Gravity"
        onPress={() => showToastWithGravity()}
      />
      <Button
        title="Toggle Toast With Gravity & Offset"
        onPress={() => showToastWithGravityAndOffset()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
});

We call the ToastAndroid.show method to show a simple toast.

ToastAndroid.showWithGravity shows the toast with gravity.

ToastAndroid.showWithGravity shows a toast with gravity and position offset.

Also, we can show a toast by setting the visibility state manually.

For example, we can write:

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, ToastAndroid, Button } from "react-native";
import Constants from "expo-constants";

const Toast = ({ visible, message }) => {
  if (visible) {
    ToastAndroid.showWithGravityAndOffset(
      message,
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      25,
      50
    );
    return null;
  }
  return null;
};

export default function App() {
  const [visibleToast, setvisibleToast] = useState(false);

  useEffect(() => setvisibleToast(false), [visibleToast]);

  const handleButtonPress = () => {
    setvisibleToast(true);
  };

  return (
    <View style={styles.container}>
      <Toast visible={visibleToast} message="Example" />
      <Button title="Toggle Toast" onPress={() => handleButtonPress()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
});

We created our own Toast component with the visible prop to control the toast’s visibility.

Also, we pass the message into the toast with the message prop.

When the visibleToast state changes, we make it invisible first with the useEffect callback and then make it visible again.

ActivityIndicator

We can add an activity indicator in our app with the ActivityIndicator component.

For example, we can write:

import React from 'react';
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={[styles.container, styles.horizontal]}>
      <ActivityIndicator />
      <ActivityIndicator size="large" />
      <ActivityIndicator size="small" color="green" />
      <ActivityIndicator size="large" color="blue" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  },
  horizontal: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 10
  }
});

We add the ActivityIndicator component to show it.

The size prop controls the size and the color changes the color.

Conclusion

We can add an activity indicator and toasts with React Native.