invalid ygdisplay 'noneNaN' should be one of (flex, none)

[amin79]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

I need to change the display of a view to "none" or undefined and show it with animation.

Expected Behavior

hide and show with styling without getting any errors.

Steps To Reproduce

No response

Versions

- Moti:^0.18.0
- Reanimated:~2.9.1
- React Native:0.69.5

Screenshots

No response

Reproduction

const animation = useDynamicAnimation(() => { return { display: "none", }; });

useEffect(()=> { if (page === 2) { animation.animateTo({ display: undefined }); } },[page])

<View delay={400} state={animation}

[nandorojo]

change it to’flex’ not undefined

[amin79]

@nandorojo I did but nothing changed. same error...

[nandorojo]

if you make an expo snack i can look, but the code you shared isn't sufficient

[amin79]

@nandorojo here is the code. I was not able to run it in expo snack.

import { Text,View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';

import { MotiView, useDynamicAnimation } from "moti";

export default function App() {

const [page, setPage] = useState(1);
  const animation1 = useDynamicAnimation(() => {    
    return {
      display: "flex",
    };
  });
  const animation2 = useDynamicAnimation(() => {    
    return {
      display: "none",
    };
  });

  return (
    <View style={styles.container}>
      <MotiView  state={animation1} style={{flex:1, height: 300, backgroundColor:"yellow"}}>
        <Text>Panel1</Text>
      </MotiView>
      <MotiView state={animation2} style={{flex:1, height: 300, backgroundColor:"green"}}>
        <Text>Panel2</Text>
      </MotiView>
      <View>
      <Button title={page === 1 ? "page 2" : "page 1"} style={{flex:1}} onPress={()=> {
        if(page === 1) {
          setPage(2);
          animation1.animateTo({display: "none"});
          animation2.animateTo({display: "flex"})
        } else {
          setPage(1);
          animation1.animateTo({display: "flex"});
          animation2.animateTo({display: "none"})
        }       
      }}/>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection:"row",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

[nandorojo]

oh i see. the display property can't be animated. you probably want to animate the opacity, use AnimatePresence, or reanimated layout animations

[amin79]

@nandorojo opacity keeps the space. I need it to be removed. Reanimated layout also has a bug for a long time which is not solved yet. The screen frezzes in IOS when I use it.

[nandorojo]

You can try AnimatePresence from moti like I said.

[amin79]

I also tested AnimatePresence. It is not also what I need. It keeps the empty space of the component, and the bad thing is that for example if I have a dropdown there, it does not show it, but when I click on the place it would be open. It is because the component is there and just its opacity is 0. I decided to use display:"none" without animation for now. But would be glad if you can offer something else.