Package Exports

react-native-awesome-container
react-native-awesome-container/lib/commonjs/index.js
react-native-awesome-container/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-awesome-container) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-awesome-container

header

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.

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,
  },
});

example

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