React native transitioning is not animating

Question

I watched a tutorial on yt, here's the source code from the developer gives https://github.com/catalinmiron/react-native-accordion-menu/blob/master/App.js

My codes are

import {Transition, Transitioning} from 'react-native-reanimated';
const transition = (
  <Transition.Together>
    <Transition.In type="fade" durationMs={200} />
    <Transition.Change />
    <Transition.Out type="fade" durationMs={200} />
  </Transition.Together>
);
const expndRef = React.createRef(null);

export default class MyComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
         
        subLen: 80,
        txt: 'continue',
      };
    }

in render

<Transitioning.View
  transition={transition}
  ref={expndRef}
  marginVertical={10}
  flexDirection="row"
  flexWrap="wrap"
  bg="#fff"
  justifyContent="flex-start"
>
  <Text>
    {this.props.text.substring(0, this.state.subLen)}
    <Text
      color="blue"
      onPress={() => {
        if (this.state.subLen == 80) {
          this.setState({ subLen: 700, txt: "close" }, () => {
            expndRef.current?.animateNextTransition();
          });
        } else {
          expndRef.current?.animateNextTransition();
          this.setState({ subLen: 80, txt: "continue" });
        }
      }}
    >  
      {this.state.txt}
    </Text>
  </Text>
</Transitioning.View>

It's really simple but why its not animating

Result

with continue

Anyone to help to fix animation – masterAvatarr Mar 07 '22 at 10:55 — masterAvatarr, Mar 07 '22 at 10:55

score 0 · Answer 1 · answered Dec 20 '22 at 18:54

Make sure to register react-native-reanimated plugin in your babel.config.js file like this

module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
};

When you are done make sure to reset cache. Depending on your workflow your can use any of these listed:

yarn start --reset-cache

npm start -- --reset-cache

expo start -c

You can find a reference to this answer here https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

Let me know if this helps.

React native transitioning is not animating

1 Answers1