React-native-animatable: Slide out animations only go 100px out of view

Created on 13 Dec 2016 · 3Comments · Source: oblador/react-native-animatable

translate{X,Y} values in RN are in pixels, not percents. So the 100 values inside definitions/sliding-exits.js mean that slide out animations are hardcoded to only move 100 px out of the viewing area.

Which leads to them breaking when the view in question is larger than 100 in that direction.

Source

dantman

👍5

Most helpful comment

@dantman I managed to work around this with a custom animation for the time being:

const mySlideOutDown = {
    from: {
      height: 400,
    },
    to: {
      height: 0,
    }
}

const mySlideInUp = {
    from: {
      height: 0,
    },
    to: {
      height: 400,
    }
}

Animatable.initializeRegistryWithDefinitions({
  mySlideInUp: mySlideInUp,
  mySlideOutDown: mySlideOutDown
});

mcavaliere on 17 Feb 2017

👍3

All 3 comments

@dantman I managed to work around this with a custom animation for the time being:

const mySlideOutDown = {
    from: {
      height: 400,
    },
    to: {
      height: 0,
    }
}

const mySlideInUp = {
    from: {
      height: 0,
    },
    to: {
      height: 400,
    }
}

Animatable.initializeRegistryWithDefinitions({
  mySlideInUp: mySlideInUp,
  mySlideOutDown: mySlideOutDown
});

mcavaliere on 17 Feb 2017

👍3

The workaround looks good, but are there any plans to actually solve the issue with sliding-exits?
Seems this has been open without response for over 6 months now...