Ionic 4 react enterAnimation

Ionic Framework Ionic React
1

Hi, I am making a IOS app using Ionic 4 and React. I want to animate my popover https://ionicframework.com/docs/api/popover using enterAnimation attribute, but couldn’t make it work. Can anyone please provide any example of popover animation with enterAnimation using Ionic 4 and React? There are some examples of the popover animation in Angular out there, but couldn’t find any React example.
Here’s my code

It would be helpfull if i can get a full example to use animations with this popover maybe update docs it will be much more helpfull

import React, { useState } from ‘react’;
import { IonPopover } from ‘@ionic/react’;

export const PopOver: React.FC = ({ children, showPopover, setShowPopover, popOverProps }) => {
const [popoverEvent, setPopoverEvent] = useState();
const button = children[0];
const content = children[1];
return (
<>
{React.cloneElement(button as React.ReactElement, {
onClick: (e: any) => {
e.persist();
setPopoverEvent(e);
setShowPopover(!showPopover);
}
})}
<IonPopover
mode=“ios”
animated
enterAnimation={(e: any) => { //what to do here? }}
isOpen={showPopover}
event={popoverEvent}
showBackdrop={false}
onDidDismiss={() => setShowPopover(false)}
{…popOverProps}
>
{content}

</>
);
};

PopOver.defaultProps = {
showPopover: false,
setShowPopover: () => { },
children: ,
popOverProps: {}
};

2

Hello,
You should provide your code in code tags, it’s more readable :stuck_out_tongue:
To do so use ``` (3 back quotes) on both sides of your code.

I found that https://www.joshmorony.com/create-a-custom-modal-page-transition-animation-in-ionic/
It is not dedicated to React and it’s potentially not React but it seems that enterAnimation takes pure Javascript code.
You should look in this side, Javascript Animation :wink:

Malo

1 Like
3

Did you see this documentation?

2 Likes
4

Yeah definitely didn’t know about the quotes :sweat_smile: Thanks for that I would definitely look into it :smile:

5

Yeah, I found this one in ionic 5 docs It does have examples that are gonna be helpful. Thanks :smile: