react-native-awesome-container

An easy-to-use React Native library that provides a View component with built-in loaders and popups. This library is designed to simplify the process of adding loading and popup functionality to your React Native Views with minimal setup.

Expo Snack example

Installation

yarn add react-native-awesome-container

Usage

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { Container } from 'react-native-awesome-container';

// ...

export default function App() {
  const [showPopup, setShowPopup] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);
  const [popupMessage, setPopupMessage] = React.useState('');

  React.useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);

        const response = await fetch(
          'https://jsonplaceholder.typicode.scom/todos/1'
        );

        if (!response.ok) {
          throw new Error('Unable to get todos');
        }

      } catch (error: any) {
        setShowPopup(true);
        setPopupMessage(error?.message);
      } finally {
        setIsLoading(false);
      }
    })();
  }, []);

  return (
    <View style={styles.container}>
      <Container
        isLoading={isLoading}
        popupMessage={
          popupMessage || "You've successfully displayed a message."
        }
        popupTitle="Error"
        buttonText="OK"
        popupType={'Danger'}
        onPressPopup={() => setShowPopup(false)}
        showPopup={showPopup}
        spinner={'Grid'}
        spinnerColor="blue"
        style={styles.box}
      >
        ...
      </Container>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 80,
    paddingHorizontal: 30,
    paddingBottom: 30,
  },
  box: {
    flex: 1,
    gap: 10,
  },
});

Properties

Prop	Default	Type	Description
showPopup	false	boolean	Visibility of the Popup
popupType		string	Type of Popup (Danger, Success or Warning)
popupTitle		string	Popup title
popupMessage		string	Popup message
onPressPopup	() => {}	function	onPress Popup button
children		ReactNode	React components
isLoading	false	boolean	Visibility of the loader
buttonText	Close	string	Popup button text
style		ViewStyle	Style of the container
contentStyle		ViewStyle	Style of the Popup container
iconContentStyle		ViewStyle	Style of the icon container
iconColor	#000	string	The color of the icon
textBodyStyle		TextStyle	Style of the Popup's text body
buttonStyle		ViewStyle	Style of the Popup's button
buttonTextStyle		TextStyle	Popup's button text style
spinnerColor		string	Color of the spinner
spinner		string	Type of the spinner
loaderOverlay	false	boolean	Visibility of the loader overlay
overlayStyle		ViewStyle	Style of the loader overlay

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library