0.4.3 • Published 6 months ago
react-native-awesome-container v0.4.3
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.
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 |
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