rishabhbhatia / react-native-awesome-alerts Goto Github PK

hi, thanks for your component.
how to change backgroundcolor, textsize, and progress's size.
I suggest adding the following functions:
1.change textsize and textcolor.
2.change backgroundcolor
3.change progress size

Thanks for this awesome library but i just want to know that how to add 3rd button like ask me later?
is this library currently supporting 3rd button?

Hi, I love your package, but I can't style it as I want. Looking in your code I found a that I can't override with my style. Also I want to modify .

The results is that I want to put the title and message left aligned and the buttons right aligned. It is possible to achieve this? Or if you prefer I can modify and do a pull request.

Thanks!

Hey Guys,

I have a state showAlert: false as default and when I click in a button, like "Open Alert" the alert gets open. Its working well =)

onCancelPressed() method I have a setup to change showAlert: false to true, but when I click outside of the alert, the modal get closed but my state does not change. Is that a problem?

Because after any state changes interaction in the PARENT COMPONENT, the modal gets open again because we have a re-render and the current state is still true. We do not have any control when the alert is closed tapping outside of it.

Hi,
If the alert is present and just change the screen orientation, then the alert styling is not working properly.

My code as follows:

   render() {
	const {showLoginAlert} = this.state;
	return(
		<SafeAreaView style={style.scrollContainer}>
		   <View style={style.loginContainer}>
		   <Card >
                                     ....
		 </Card>
		<View style={style.footerWrapper}>
                               ....
	        </View>
	       <AwesomeAlert
	          show={showLoginAlert}
	          showProgress={false}
	          message="Invalid email or password"
	          closeOnTouchOutside={false}
	          closeOnHardwareBackPress={false}
	          showConfirmButton={true}
	          confirmText="OK"
	          confirmButtonColor={language.primary}
	          onConfirmPressed={() => {
	            this.hideLoginAlert();
	          }}
	          alertContainerStyle={{height: Dimensions.get('window').height}
	        />
		</SafeAreaView>
	)
}

Thanks

Layout confusion

• [email protected]
  added 1 package from 1 contributor in 3.37s

2 packages are looking for funding
run npm fund for details

I face same issue with all packages I try to install. Can you help me?

That would be great, if we could actively call show/hide methods, which is basically exposing the _toggleAlert or specialized counterparts as public.

Also an "on dismiss" event would be great, so we can know if the alert was dismissed from background etc.

Awesome library. Thank you!

I'm on a Samsung Galaxy S6 with Android 7.

        <AwesomeAlert
            show={!assistanceConfirmed}
            showProgress
            title="Esperando confirmación de asistencia"
            closeOnHardwareBackPress={false}
            closeOnTouchOutside={false}
            overlayStyle={styles.overlay}
          />

Am I missing something?

Add input support inside modal

I'm currently using AwesomeAlert as a spinner. I have an API call that will set show to false to close the AwesomeAlert fire Alert.alert() whenever the response is received. The problem is, whenever the spinner is closed, my successful Alert will be dismissed altogether. Any idea why?

import { Alert } from 'react-native';

const Login = ({ navigation }) => {
  const [visible, setVisible] = useState(false);

  const onSubmit = (values) => {
      setVisible(true);
      doAPICall().then(() => {
            setVisible(false);
           Alert.alert('Success') // This alert will be automatically dismissed when visible is false
      })
  };

  return (
    <Container>
      <Spinner show={isLoading} /> // Awesome Alert component
          <Button my={10} onPress={handleSubmit(onSubmit)}>
            Submit
          </Button>
    </Container>
  );
};

export default Login;

It will be good to have Typescript support for better type checking.

Getting the following warning as it doesn't have the index.d.ts file

Could not find a declaration file for module 'react-native-awesome-alerts'. 'home/projects/NewApp/node_modules/react-native-awesome-alerts/index.js' implicitly has an 'any' type.
Try npm install @types/react-native-awesome-alerts if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-awesome-alerts';

Hi

I'm going to create a separate file myAlert.js and use it in other files to have my customized alerts everywhere! I make myAlert.js file and import it in the main.js

here are my codes:

// main.js


onLoginPressed() {
// Call showAlert from child
}

render() {
  return (
    <View>
      <TouchableHighlight
         onPress = {this.onLoginPressed.bind(this)}
       />
    </View>
  )
}

and now myAlert.js:

// myAlert.js


export default class myAlert extends React.Component {
  constructor(){
  super();
  }

render() {
const {showAlert} = this.state;

  return (
      <View>

        <AwesomeAlert
          showProgress = {false}
          title = "AwesomeAlert"
        />

      </View>
  )
}
}

the point is, i want to send "showProgress" and "title" to the child so i can have my customized alert every time is call the child method!

but i get errors...

1. where is my mistake?
2. Should i use redux to control my states in situations like this?

Hi, i get this error when i try to show the alert.

Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'RCTRawText [text: ]' to a 'RCTView')
addChildAt
ReactShadowNodeImpl.java:279
addChildAt
ReactShadowNodeImpl.java:56
setChildren
UIImplementation.java:482
setChildren
UIManagerModule.java:441
invoke
Method.java
invoke
JavaMethodWrapper.java:372
invoke
JavaModuleWrapper.java:160
run
NativeRunnable.java
handleCallback
Handler.java:751
dispatchMessage
Handler.java:95
dispatchMessage
MessageQueueThreadHandler.java:29
loop
Looper.java:154
run
MessageQueueThreadImpl.java:192
run
Thread.java:761

<ImageBackground
source={bg}
resizeMode={"cover"}
style={styles.container}
>
<AwesomeAlert
show={this.state.showAlert}
showProgress={false}
title=""
message={this.state.alertMessage}
closeOnTouchOutside={true}
closeOnHardwareBackPress={false}
showCancelButton={false}
showConfirmButton={true}
cancelText="Cancelar"
confirmText="Confirmar"
confirmButtonColor="#DD6B55"
onCancelPressed={() => {
this.hideAlert();
}}
onConfirmPressed={() => {
this.hideAlert();
}}
/>
...

I am trying to disable buttons while showProgress as i am waiting from a server call and i want to prevent many clicks which will cause many server calls.

Just as described. The animation on android devices is very very slow and incredibly jerky. Works fine in iOS.

React Native: 0.52
react-native-awesome-alerts: 1.1.1

This is a great library by the way.

However, when I installed the version 1.2.0 in my project, the VSCode couldn't find the AwesomeAlert.js inside the node_module/react-native-awesome so I had to manually update the package and add the missing files based from your code.

Hope you can look into this one.
Thanks for this awesome piece of code!

First off, Loving the package. I would Like to add an image/icon on top of the alert box (before the title). I know there is a customView but it adds the elements to the bottom of message text. However, for now I am able to do something like this (for anyone wondering):

customView={<Text style={{ position: 'absolute', top: 0 }}>testing</Text>}

When implemen this libray in the last vesion of react-native has this error:
look this img
thanks for your attention

<AwesomeAlert
show={true}
useNativeDriver={true}
showProgress={false}
title="Error!"
message="Invalid Username or Password!"
closeOnTouchOutside={false}
closeOnHardwareBackPress={false}
showCancelButton={false}
showConfirmButton={true}
cancelText="No, cancel"
confirmText="OK"
confirmButtonColor="#DD6B55"
confirmButtonStyle={{minWidth: 60, justifyContent: 'center'}}
confirmButtonTextStyle={{ textAlign: "center"}}
/>

Hello! I found what I think is a bug. Any time state changes, even if it is unrelated to what is being passed into the 'show' property, it will cause the alert to hide if it currently showing. That is, you cannot have state changing in the background of the alert without it forcing the alert to hide. See below for an example:

this.setState({displayNotification: true})
this.setState({test: false})

In the example above, the alert wouldn't show (or maybe it would, for a time too short to notice) because once 'state.test' is set, it causes the alert to disappear.

Let me know if you need more info!

My app is landscape only and everything works fine until this moment.

Modal was presented with 0x2 orientations mask but the application only supports 0x18.Add more interface orientations to your app's Info.plist to fix this.NOTE: This will crash in non-dev mode.

Maybe it's due iOS 14 update but I can't find solution for this.
Native modal works fine.

this is issue only on iOS

Hey there,
Using Expo 36 SDK,
Android Version 9,

When trying to hide alert by change is state Its just make the modal smaller everytime you press the cancel button,

If I use native driver its just makes the alert smaller once but still displayed
With NativeDriver set to True:

After:

NativeDriver set to False:

After:

And just keep getting smaller..
When even I press outside of the screen its working ok, and closing it
The Problem is in the Animation I think..

Code:

 constructor(props) {
    super(props);
    this.state = {
        email: '',
        password: '',
        defaultLoading: false,
        showErrorAlert: false,
        errorMessageAlert: '',
    }
}

  showErrorAlert = () => {
    this.setState({ showErrorAlert: true })
}

  hideErrorAlert = () => {
    this.setState({ showErrorAlert: false })
}

      <AwesomeAlert
               show={this.state.showErrorAlert}
                title="Error Sign in"
                message={this.state.errorMessageAlert}
                showCancelButton={true}
                cancelText="Ok"
                showProgress={false}
                showConfirmButton={true}
                // useNativeDriver={true}
                onCancelPressed={() => {
                    this.hideErrorAlert()
                }}
            />

(Partially discussed here)

Hi @rishabhbhatia,

after some tests, I can deduce that having a translucent status bar prevents the overlay to cover all the screen on devices like Galaxy S10 Plus. It's like both Dimensions.get('screen') and Dimensions.get('window') return the same height value which is not the real screen height. No issue if I set the status bar as non translucent. Is there any solution? Thanks for your efforts.

Screen component:

componentDidMount() {
    if (utils.ANDROID) {
        this.onWillFocusSubscription = this.props.navigation.addListener(
            'willFocus',
            () => {
                StatusBar.setBarStyle("light-content");
                StatusBar.setBackgroundColor("transparent");
                StatusBar.setTranslucent(true);
            }
        );
    }
}

componentWillUnmount() {
    if (utils.ANDROID) {
        this.onWillFocusSubscription.remove();
    }
}

render(): * {

    const {navigate, pop} = this.props.navigation;
    const {loading, showDialog, dialogText} = this.state;

    return (
        <LinearGradient
            style={{
                flex: 1
            }}
            colors={Resources.gradients.green}
            locations={[0, 0.85]}>
            <WarningDialog
                show={showDialog}
                text={dialogText}
                buttonAction={this._hideDialog.bind(this)}
            />
        </LinearGradient>
    );
}

WarningDialog component:

render(): * {

    const { height } = Dimensions.get('screen');

    return (
        <AwesomeAlert
            show={this.props.show}
            alertContainerStyle={{
                height: height
            }}
            contentContainerStyle={{
                minWidth: utils.wp(70),
                padding: utils.wp(10),
                borderRadius: utils.wp(10),
                backgroundColor: this.props.backgroundColor
            }}
            customView={
                <View>
                    <Text
                        style={{
                            ...GlobalStyle.textBase,
                            marginBottom: utils.hp(5),
                            fontSize: this.props.fontSize,
                            color: this.props.textColor,
                            textAlign: 'center'
                        }}>
                        {this.props.text}
                    </Text>
                    <ActionButton
                        onPress={this.props.buttonAction}
                        height={utils.hp(utils.on(6, 8))}
                        width={utils.wp(50)}
                        backgroundColor={this.props.buttonColor}
                        text={this.props.buttonText}
                    />
                </View>
            }
        />
    )
}

Generic Android Device (with translucent status bar and navigation bar)

Samsung Galaxy S10 Plus (with translucent status bar and NO navigation bar)

Samsung Galaxy S10 Plus (without translucent status bar and NO navigation bar)

I have integrated the Awesome-alert in one of my view. When I click the next button the loader starts and after a few moments, I am redirected to my targeted view. It works as expected. But when I click back I am redirected to same view where Awesome alerts dialog is integrated, after that everytime when I click on the NEXT button the dialog "Awesome Alert" sizes deceased

Please Advise. Thanks

When using the component to a modal, there the alert dismisses too quickly and the animation does not have mush effect. It disappears immediately.

For example I'm doing this with react-native-navigation overlay:

onDismiss={() => {
  Nav.dismissOverlay(componentId)
}}

I've noticed that on _springHide there is a setTimeout with 70ms to call the this._onDismiss() method after a Animated.spring(...).start() animation. I think it would be better to use the finish callback that the start method accepts and then call the _onDismiss after the animation has finished, something like this:

  _springHide = () => {
    if (this.state.showSelf === true) {
      Animated.spring(this.springValue, {
        toValue: 0,
        tension: 10
      }).start(() => {
          this._toggleAlert();
          this._onDismiss();
      });

      // - setTimeout(() => {
      // -  this._toggleAlert();
      // -  this._onDismiss();
      // - }, 70);
    }
  }

Working with animations
Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.

https://facebook.github.io/react-native/docs/animated#spring

What do you think? Maybe there is an other way to ensure the closing animation is finished?

After closing the dialog one, it reappears again with a smaller size and locks the screen.
I made sure "states" are implemented correctly

If set as an integer it fine and setting progressSize not working on iOS.

I'm getting a memory leak warning when using AwesomeAlert.

Hi,

I am using custom font in my application. So how can I change the font family of the title, message, cancel button and confirm button text font style.

Thanks

Would be good if you add the topic of Hacktoberfest to estimulate people to help on solving issues.

Ineligible Repository
Your PR was submitted to a repository that is not participating in Hacktoberfest. Maintainers of the repository can add the "hacktoberfest" topic to their repository if they wish to participate.

Only the content is covered by the alert backdrop. Even when the alert is shown, I can click the header bar buttons.

const AddTagRegister = () => {
const [tagId, setTagId] = useState('');
const [tagData, setTagData] = useState('');
const [tagCycle, setValueCycle] = useState('');
const [tagType, setValueType] = useState('');
const [showAlert, setShowAlert] = useState(false);
const [requestAddRegister, errorMessage] = useResults();

const showNotif = () => {
    setShowAlert({
        showAlert: true
    });
};

const hideAlert = () => {
    setShowAlert({
        showAlert: false
    });
};

const onChangeCycle = (value: string) => {
    setValueCycle(value);
};

const onChangeType = (value: string) => {
    setValueType(value);
};

return (
    <View style={styles.viewStyle}>
        <Image style={styles.imageStyle} source={require('../assets/react.jpg')} />
        <View style={styles.itemViewStyle}>
            <MaterialCommunityIcons style={styles.iconStyle} name="identifier" size={24} />
            <TextInput
                autoCapitalize='none'
                autoCorrect={false}
                style={styles.textInputStyle}
                placeholder='Please Insert Tag Id'
                autoFocus={true}
                value={tagId}
                onChangeText={setTagId}
            />
        </View>
        <View style={styles.itemViewStyle}>
            <Feather name="command" style={styles.iconStyle} />
            <TextInput
                autoCapitalize='none'
                autoCorrect={false}
                style={styles.textInputStyle}
                placeholder='Please Insert Tag Data'
                value={tagData}
                onChangeText={setTagData}
            />
        </View>
        <View style={styles.viewDropdown}>
            <Dropdown
                style={styles.itemDropdown}
                label="Select Tag Cycle"
                data={dataCycle}
                // enableSearch
                value={tagCycle}
                onChange={onChangeCycle}
            />
            <Dropdown
                style={styles.itemDropdownType}
                label="Select Tag Type"
                data={dataType}
                // enableSearch
                value={tagType}
                onChange={onChangeType}
            />
        </View>
        <View style={styles.viewTouchableStyle}>
            <TouchableOpacity style={styles.touchableStyle} onPress={() => showNotif()}>
                <Text style={{ color: 'white' }}>Save</Text>
            </TouchableOpacity>
            <AwesomeAlert
                show={showAlert}
                showProgress={false}
                title="Information"
                message="Save the Register?"
                closeOnTouchOutside={false}
                closeOnHardwareBackPress={false}
                showCancelButton={true}
                showConfirmButton={true}
                cancelText="No, cancel"
                confirmText="Yes, save it"
                confirmButtonColor="#3a74cf"
                onCancelPressed={() => hideAlert() }
                onConfirmPressed={() => hideAlert() }
            />
        </View>
    </View>
);

};

Hey, I'm new to react native and I'm using this library for all the alerts in my project, and so far it's working great.

However when enabling full screen mode in Android (I just hide the navigation bar using this library https://github.com/thebylito/react-native-navigation-bar-color), the overlay surrounding the alert stops at the non-existant bottom navigation bar.

I couldn't get the expo snack to work since the navigation color library probably uses a lot of native code, but the code works in a normal react-native-app.

Here's the link for the code if you want to reproduce the issue. https://snack.expo.io/@moncefbkb/navigation-bar-awesome-alert

Note (What i tried) :

Referring to this SO question https://stackoverflow.com/questions/46126521/android-navigation-bar-height-react-native, it seems like there's a difference between getting the dimensions from the "screen" and for the "window", as, on Android, the former includes the height of the navigation bar and the status bar.

I thought that this was causing the issue so I changed the library's "styles.js" file to get the height from the "screen" instead of getting it from the "window", but nothing changed.

I even tried to set the height to an absurd amount (1000) and it still stops before the navigation bar. I then tried to do the same thing with a simple view (Giving it a background color, and giving it a height of 1000), and it covered all the screen just fine.

So it seems likely that the problem doesn't come from the other library, and this is why i'm posting the issue here.

I can't turn off this prop
When i set true and then i set false it still there
Can you check this thank you

Hi,
The Modal doesn't take full screen in SafeAreaView

I have a header with a bigger zIndex than entire content so when you scroll content will be under the header. Because of that when alert shows header is not covered by alert layout.
I tried setting zIndex style in AwesomeAlert but it doesn't works is there a way to achieve this?

Hello. I have a FlatList component that shows all clients. Inside each child i have button for change status of client. When i press it alert should open and it works but it is behind of my flatlist and can not see it at all. Can you help with maybe some style tuning . Thx in advance

Hi,
I am using react native awesome alert to display over react native modal. But in iOS, it is displaying correctly but in Android, it is not displaying as required.
I have attached screenshots of both ios and android.

In iOS

In Android

My environment is as follows:
"react": "16.6.3",
"react-native": "0.57.8",
"react-native-awesome-alerts": "^1.2.0",
"react-native-modal": "^7.0.2",

My code is as follows:

  <Modal isVisible={this.state.opt_modal} style={{backgroundColor: 'white', overflow: 'hidden', marginVertical: 50 }} >
    <View style={{position: 'absolute' , top: 10, right: 20}}>
       <Button style={{backgroundColor: 'white', elevation: 0}} onPress={() => this.close_modal()}>
     <Image style={{width: 25, height: 25, opacity: 0.3}} source={require('../../assets/cancel-music.png')} />
     </Button>
   </View>
   <View style={{flexDirection: 'row', justifyContent: 'center',alignItems: 'center'}}>
   <Text style={{ marginVertical: 10, fontSize: 19, flexWrap: 'wrap', flex: 1, marginHorizontal: 25}}>Bitte gib den an deine E-Mail-Adresse gesendeten Code ein.</Text>
  </View>
  <View style={{flexDirection: 'row', }}>
     <OtpInputs handleChange={(opt)=> this.setState({opt})}  numberOfInputs={4} />
   </View>
   <View style={{flexDirection: 'row' }}>
   <Button bordered style={{flex: 1, justifyContent: 'center', borderRadius: 20, marginVertical: 20,marginHorizontal: 25, borderColor: '#FA872D', backgroundColor: 'white', borderWidth: 5, elevation: 2}}
onPress={() => this.authenticate()}>
    <Text style={{color: '#FA872D', fontWeight: 'bold' }}>Verifizieren</Text>
 </Button>
    </View>
    <View style={{flexDirection: 'row' }}>
      <Button bordered style={{flex: 1, justifyContent: 'center', borderRadius: 20, marginVertical: 20,marginHorizontal: 25, borderColor: '#FA872D', backgroundColor: 'white', borderWidth: 5, elevation: 2}}
onPress={() => this.resend_otp()}>
       <Text style={{color: '#FA872D', fontWeight: 'bold' }}>Code noch einmal senden</Text>
  </Button>
  </View>
 <AwesomeAlert
     show={showAlert_invalid_otp}
     showProgress={false}
     message="Ungültiger Code!"
     closeOnTouchOutside={false}
     closeOnHardwareBackPress={false}
     showConfirmButton={true}
     confirmText="OK"
     confirmButtonColor="#FA872D"
     onConfirmPressed={() => {
    this.hideAlert_invalid_otp();
    }}
/>
</Modal>

Is there any workaround to solve this problem?

Thanks

Hi everyone,
I try to setting full width style on confirm and cancel button and show each button on each row, but I can't. Please help me. Thanks you for your suggestion.

Hello guys, i have a problem, the Alert appears when i use TextInput with the onChange or onChangeText event and i try to set the state of that input value.

I guess the problem is not the onChangeText event of the TextInput, maybe when i'm trying to change the value of other states, is like when i'm setting whatever state automatly the showAlert state is changed to true, is so weird.

i must close the alert by myself, but sometimes i hope the alert can be close automatic after some seconds.

What is the best way to go about stylizing the message text (adding line breaks, italics, etc)? I could simply pass a Text component into the message prop but this would go against the required prop type of string.

I have using AwesomeAlert(android and ios) but ios side its not showing and android side showing perfectly
please help me out

here's code i hve write in my app

<AwesomeAlert
show={this.state.isError}
showProgress={false}
title={this.state.txtTitle}
message={this.state.txtInfo}
closeOnTouchOutside={false}
closeOnHardwareBackPress={false}
showCancelButton={false}
showConfirmButton={true}
confirmText="Dismiss"
confirmButtonColor={MyColors.LightBlue}
onConfirmPressed={() => {
if (this.state.isNetwork) {
this.props.navigation.goBack();
}
this.setState({
isError: false
});

                    }}
                />

update when error

this.setState({
isError: true,
txtInfo: "No data found..!",
txtTitle: "Error"
});

With the latest version of Awesome Alerts installed, with the help of Expo, I built the app to "Run in web browser" and the alert was misplaced to the bottom left:

The iOS device and simulator obviously worked alright.

Specifically @react-navigation/bottom-tabs
Are not covered by the overlay and are still pressable.

I'm currently on RN 0.61 and I get these warnings when showing the alert:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: AwesomeAlert

How can you update this methods without breaking it for older RN versions? Just replacing componentWillReceiveProps with componentDidUpdate?
I think the best way will be to migrate the class component to react hooks and maybe create a new (next) version for RN >= 0.60.

Would like to see your thoughts on this.