React Native - Анимация работает только после Toggle Inspect на Android

Question

Я новичок в среде React / React-Native, и у меня возникли проблемы с анимацией в Android.

Я использую анимацию реакции, чтобы показать нижнее предупреждение об ошибках и предупреждения. Проблема в том, что анимация работает нормально на iOS, но работает только на Android после того, как я включаю «Toggle Inspector», если я не включаю его, анимация не работает, в отладчике я могу убедитесь, что компонент находится в структуре компонентов React.

Я уже пробовал обходные пути, установив для Animated.Value значение 0,01 и изменив Animated.createAnimatedComponent * от 1012 * до Animated.View .

Анимация должна появиться после изменения состояния и свойства visible установлен на TRUE , изменение состояния в порядке, поскольку я вижу, что он работает с React Native Debbuger, а функции slideIn / slideOut выполняются вызывается хуком useEffect .

Я использую версию React 16.11.0 и React-Native 0.62 .2

ОБНОВЛЕНИЕ

Я удалил position: absolute из мой компонент, и теперь я могу видеть анимацию в верхней части экрана, я попытался изменить значение z-index на более высокое значение (у меня нет z- индекс выше 1 в моем приложении), но это тоже не сработало.

Вот основная часть кода:

export const Alert = withTheme(({ theme: { primary, textGray } }) => {
  const translateValue = useRef(new Animated.Value(0)).current;
  const dispatch = useDispatch();
  const {
    visible,
    data: { type, message }
  } = useSelector(({ notification }) => notification);

  const slideIn = useCallback(() => {
    Animated.timing(translateValue, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true
    }).start();
  }, [translateValue]);

  const slideOut = useCallback(() => {
    Animated.timing(translateValue, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true
    }).start();
  }, [translateValue]);

  const handleClose = () => {
    dispatch(hideNotification());
  };

  useEffect(() => {
    if (visible) {
      slideIn();
    } else {
      slideOut();
    }
  }, [visible, slideIn, slideOut]);

  return (
    <Wrapper
      style={{
        transform: [
          {
            translateY: translateValue.interpolate({
              inputRange: [0, 1],
              outputRange: [300, 0]
            })
          }
        ]
      }}>
      <Content>
        <Icon name={icons[type]} size={20} color={primary} />
        <Message>{message}</Message>
      </Content>
      <Button
        onPress={handleClose}
        accessible
        accessibilityRole="button"
        accessibilityLabel="Fechar notificação">
        <Icon size={20} name="x" color={textGray} />
      </Button>
    </Wrapper>
  );
});

const Wrapper = Animated.createAnimatedComponent(styled.SafeAreaView`
  width: 100%;
  border-top-width: 1px;
  border-top-color: ${({ theme: { border } }) => border};
  background: ${({ theme: { background } }) => background};
  z-index: 1;
  position: absolute;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  left: 0;
`);

Answer 1

Исправлено! Кажется, есть проблемы с z-index на Android. Чтобы решить эту проблему, я просто добавил высоту: 1 , когда Платформа Android.

См. Код ниже:

    <Wrapper
          isAndroid={Platform.OS === 'android'}
          style={{
            transform: [
              {
                translateY: translateValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [300, 0]
                })
              }
            ]
          }}>
          <Content>
            <Icon name={icons[type]} size={20} color={primary} />
            <Message>{message}</Message>
          </Content>
          <Button
            onPress={handleClose}
            accessible
            accessibilityRole="button"
            accessibilityLabel="Fechar notificação">
            <Icon size={20} name="x" color={textGray} />
          </Button>
        </Wrapper>
      );

    const Wrapper = Animated.createAnimatedComponent(styled.SafeAreaView`
      width: 100%;
      border-top-width: 1px;
      border-top-color: ${({ theme: { border } }) => border};
      background: ${({ theme: { background } }) => background};
      z-index: 1;
      position: absolute;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      bottom: 0;
      left: 0;
      ${({ isAndroid }) => isAndroid && 'elevation: 1'}
    `);