3.11.0 • Published 5 years ago
@erhanbicer/react-native-dropdownalert v3.11.0
react-native-dropdownalert
Table of contents
A simple alert to notify users about new chat messages, something went wrong or everything is ok. It can be closed by tap, cancel button, automatically with closeInterval
, pan responder up gesture or programmatically.
Support
react-native version | package version | reason |
---|---|---|
0.50.0 | >=3.2.0 | Added SafeAreaView (iPhone X) |
0.44.0 | >=2.12.0 | Added ViewPropTypes |
Installation
npm i react-native-dropdownalert --save
Demo
Usage
// ...
import DropdownAlert from 'react-native-dropdownalert';
export default class App extends Component {
componentDidMount() {
this.fetchData();
}
fetchData = async () => {
try {
await fetch('https://mywebsite.com/endpoint/');
} catch (error) {
this.dropdown.alertWithType('error', 'Error', error.message);
}
};
render() {
return (
<View>
// !!! Make sure it is the last component in your document tree.
<DropdownAlert ref={ref => this.dropdown = ref} />
</View>
);
}
}
Caveats
- Modals can overlap DropdownAlert if it's not inside the modal's document tree.
- It is important you place the
DropdownAlert
ABOVE theStackNavigator
.- DropdownHolder example #1
- DropdownHolder example #2
- Redux + router flux example
- Repo: react-native-dropdownalert-router-sample Thanks @mitsuruog and @articolo
Props
Name | Type | Description | Default |
---|---|---|---|
closeInterval | Number | dismiss alert at a certain time in milliseconds | 4000 |
imageSrc | String or Number | local or network source for custom alert type | null |
infoImageSrc | String or Number | local or network source for info alert type | require('./assets/info.png') |
warnImageSrc | String or Number | local or network source for warn alert type | require('./assets/warn.png') |
errorImageSrc | String or Number | local or network source for error alert type | require('./assets/error.png') |
successImageSrc | String or Number | local or network source for success alert type | require('./assets/success.png') |
startDelta | Number | where the container starts (changes based on container height onLayout) | -100 |
endDelta | Number | where the container ends | 0 |
onClose | Function | Invoked when alert is closed Returns: data = {type, title, message, action} | null |
cancelBtnImageSrc | String or Number | local or network source | require('./assets/cancel.png') |
titleNumOfLines | Number | number of lines | 1 |
messageNumOfLines | Number | number of lines | 3 |
onCancel | Function | Cancel button action. Returns: data = {type, title, message, action} | null |
bashowCancel | Bool | whether or not to show cancel button | false |
tapToCloseEnabled | Bool | enable/disable close with tap | true |
panResponderEnabled | Bool | enable/disable close with pan responder | true |
replaceEnabled | Bool | enables the alert to either state change without dismissal or go to next alert with dismissal | true |
translucent | Bool | StatusBar prop | false |
useNativeDriver | Bool | enable/disable native driver for animations. For android platform, in some older React Native versions, enable useNativeDriver can cause some problems. See #65 | true (iOS) / false (Android) |
updateStatusBar | Bool | whether or not to update status bar styles | true |
activeStatusBarStyle | String | StatusBar barStyle when alert is open | light-content |
activeStatusBarBackgroundColor | String | StatusBar backgroundColor when alert is open | It takes on the backgroundColor of alert if predefined else default or provided prop |
inactiveStatusBarStyle | String | StatusBar barStyle when alert dismisses | StatusBar._defaultProps.barStyle.value |
inactiveStatusBarBackgroundColor | String | StatusBar backgroundColor when alert dismisses | StatusBar._defaultProps.backgroundColor.value |
wrapperStyle | Object | styles for the view that wraps the container. For React Native Web support you might want to set this to { position: 'fixed' } | null |
containerStyle | Object | styles for container for custom type only | { padding: 16, flexDirection: 'row' } |
zIndex | Number | zIndex attribute on outermost container | null |
titleStyle | Object | styles for title for all types | { fontSize: 16, textAlign: 'left', fontWeight: 'bold', color: 'white', backgroundColor: 'transparent' } |
messageStyle | Object | styles for message for all types | { fontSize: 14, textAlign: 'left', fontWeight: 'bold', color: 'white', backgroundColor: 'transparent' } |
imageStyle | Object | styles for image for all types | { padding: 8, width: 36, height: 36, alignSelf: 'center' } |
cancelBtnImageStyle | Object | styles for image for all types | { padding: 8, width: 36, height: 36, alignSelf: 'center' } |
successColor | String | Default background color of success message | #32A54A |
infoColor | String | Default background color of info message | #2B73B6 |
warnColor | String | Default background color of warn message | #cd853f |
errorColor | String | Default background color of error message | #cc3232 |
elevation | Number | Animated.View elevation | 1 |
sensitivity | Number | Sensitivity for the pan responder up gesture | 20 |
defaultContainer | Object | Style for inner view container (override paddingTop with this) | { padding: 8, paddingTop: IS_ANDROID ? 0 : 20, flexDirection: 'row' } |
defaultTextContainer | Object | Style for inner text container (holds title and message) | { flex: 1, padding: 8 } |
renderImage | Function | Use to override the left image component | undefined |
renderCancel | Function | Use to override the cancel button component | undefined |
renderTitle | Function | Use to override the title component | undefined |
renderMessage | Function | Use to override the message component | undefined |
testID | String | Top level TouchableOpacity's testID | undefined |
accessibilityLabel | String | Top level TouchableOpacity's accessibilityLabel | undefined |
accessible | Boolean | Top level TouchableOpacity's accessible | false |
titleTextProps | Object | title text props. does not override numOfLines (use titleNumOfLines) | undefined |
messageTextProps | Object | message text props. does not override numOfLines (use messageNumOfLines) | undefined |
Inspired by: RKDropdownAlert
3.11.0
5 years ago