Check value callback whether it is valid or not

[vietdung97]

TypeError: right operand of 'in' is not an object

TypeError: Cannot convert undefined value to object

Summary

Test plan

[tomekzaw]

Hey @vietdung97, thanks for submitting this PR!

Just out of curiosity, could you please also share the code snippet that causes this error? We'd like to know how this error can be triggered from the user code.

[NikitaDudin]

@tomekzaw this error appears on passing array with falsy condition or null or undefined element.

import { StyleSheet } from 'react-native';
import Animated from 'react-native-reanimated';

const styles = StyleSheet.create({
  style1: {
    flex: 1,
  },
  style2: {
    backgroundColor: '#ff0000',
  },
});

function Sample(): JSX.Element {
  // case 1
  const condition = false;

  return (
    <Animated.View style={[styles.style1, condition && styles.style2]} />
  );

  // case 2
  return (
    <Animated.View style={[styles.style1, null]} />
  );

  // case 3
  return (
    <Animated.View style={[styles.style1, undefined]} />
  );
}

export default Sample;

[tomekzaw]

@NikitaDudin Thanks!

[vietdung97]

Hey @vietdung97, thanks for submitting this PR!

Just out of curiosity, could you please also share the code snippet that causes this error? We'd like to know how this error can be triggered from the user code.

Here is my sample code. It appear due to animation entering={FadeIn}>. I try to removing this props then my project works normally

import React from 'react';
import { TextStyle, ViewStyle } from 'react-native';
import Animated, { FadeIn } from 'react-native-reanimated';
import { scale } from 'react-native-size-scaling';
interface ErrorLabelProps {
  text: string;
  containerStyle?: ViewStyle;
  textStyle?: TextStyle;
}
const ErrorLabel = ({ text, containerStyle, textStyle }: ErrorLabelProps) => {
  return (
    <Animated.View style={[{ paddingTop: scale(6) }, containerStyle]} entering={FadeIn}>
      ...
    </Animated.View>
  );
};

I don't have problems with style contains falsy conditions or null or undefined elements, @NikitaDudin

const ErrorLabel = ({ text, containerStyle, textStyle }: ErrorLabelProps) => {
  return (
    <Animated.View style={[{ paddingTop: scale(6) }, undefined, null]}>
      ...
    </Animated.View>
  );
};

[kesha-antonov]

I got this error with latest version of rnr

[NikitaDudin]

@vietdung97 you right, this error appears for styles array with falsy(null, undefined, false) element when set entering animation

import { StyleSheet } from 'react-native';
import Animated, { FadeIn /* or other entering animation */ } from 'react-native-reanimated';

const styles = StyleSheet.create({
  style1: {
    flex: 1,
  },
  style2: {
    backgroundColor: '#ff0000',
  },
});

function Sample(): JSX.Element {
  // case 1
  const condition = false;

  return (
    <Animated.View entering={FadeIn} style={[styles.style1, condition && styles.style2]} />
  );

  // case 2
  return (
    <Animated.View entering={FadeIn} style={[styles.style1, null]} />
  );

  // case 3
  return (
    <Animated.View entering={FadeIn} style={[styles.style1, undefined]} />
  );
}

export default Sample;

cc @tomekzaw

[m-bert]

Hi @vietdung97! Thanks for this PR! I've looked at it with @piaskowyk and we decided that it will be better to use filter.

If you could add

  componentStyleFlat = componentStyleFlat.filter(Boolean);

after componentStyleFlat declaration, we will be happy to merge this change!

[vietdung97]

Hi @vietdung97! Thanks for this PR! I've looked at it with @piaskowyk and we decided that it will be better to use filter.

If you could add

  componentStyleFlat = componentStyleFlat.filter(Boolean);

after componentStyleFlat declaration, we will be happy to merge this change!

Hi @m-bert , I've made changes to my PR based on your comments. I believe it now addresses the feedback and would be happy if it's accepted.

[m-bert]

Thanks for fixing that ❤️