AnimatePresence and initial={false}

I have a issue with latest version 0.14.2 where initial now is supported https://github.com/nandorojo/moti/pull/102

If you are using react native tab navigation and open a tab where the elements should be hidden on mount. What happens is that it will run the animation going from “opacity .75” to “opacity 0” while the screen is mounted. The specific screen is mounted when visited. Expected behaviour is that it should not run the animation because of initial={false}. I also tried adding animateInitialState={false} to the Something element, but that did not change anything.

const editMode = false;

<AnimatePresence initial={false}>
  {editMode && (
    <Something
      from={{ opacity: 0 }}
      animate={{ opacity: 0.75 }}
      exit={{ opacity: 0 }}
      transition={{
        type: 'timing',
        duration: 250,
      }}
    />
  )}
 </AnimatePresence>

Styles (style-components)

import styled from 'styled-components/native';
  
const Something = styled(MotiView)`
  position: absolute;
  background-color: #000000;
  border-radius: 10px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
`;

The styles has nothing to do with it, i just pasted it anyway

[nandorojo]

Thanks for the issue. I’m having a little trouble following. Can you make a snack (on iOS) reproducing, and explain what should have happened?

Can you also confirm the same happens with styled components?

[TommySorensen]

Found the issue 🙄, it was error 40 🤣. My initial state was true, meaning that it was in first render true and then false just after since i got a useEffect that turned it into false.

const [editMode, setEditMode] = useState(true);

Thx for helping 👍