Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Duration/Animation effect does not work with "function as a child" pattern #425

Open
karol-ciolczyk opened this issue Feb 7, 2022 · 0 comments

Comments

@karol-ciolczyk
Copy link

karol-ciolczyk commented Feb 7, 2022

I have tried use function as a child pattern to ease some logic for my case. But if I use Collapsible component this way, i haven't got duration/animation effect in my rendered component. Collapse effect works. There is code sample below. Have anybody encountered similar issue and found solution ?

const CustomCollapsible: React.VFC<CustomCollapsibleProps> = ({
  children,
  ...restProps
}) => {
  const [isCollapsed, setIsCollapsed] = useState(true);
  const toggleExpanded = () => {
    setIsCollapsed(!isCollapsed);
  };

  const TouchableWrapper: React.VFC<TouchableOpacityProps> = ({
    children,
    style: propStyle,
    ...restProps
  }) => {
    return (
      <TouchableOpacity
        onPress={toggleExpanded}
        style={[style.touchableComponent, propStyle]}
        {...restProps}>
        {children}
      </TouchableOpacity>
    );
  };  

const CollapsibleWrapper: React.VFC<CollapsibleWrapperProps> = ({
    children,
    style: styleProp,
    ...restProps
  }) => {
    return (
      <Collapsible
        collapsed={isCollapsed}
        align="center"
        style={[style.collapsibleComponent, styleProp]}
        {...restProps}>
        {children}
      </Collapsible>
    );
  };

  return (
    <View {...restProps}>{children(TouchableWrapper, CollapsibleWrapper)}</View>
  );
};

and i want to use this CustomCollapsible component somewhere in app:

      <CustomCollapsible>
        {(TouchableWrapper, CollapsibleWrapper) => (
          <View>
            <TouchableWrapper>
              <Text>touchable component</Text>
            </TouchableWrapper>
            <CollapsibleWrapper>
              <Text>
                Bacon ipsum dolor amet chuck turducken landjaeger tongue spare
                ribs Bacon ipsum dolor amet chuck turducken landjaeger tongue
                spare ribs Bacon ipsum dolor amet chuck turducken landjaeger
                tongue spare ribs Bacon ipsum dolor amet chuck turducken
                landjaeger tongue spare ribs Bacon ipsum dolor amet chuck
                turducken landjaeger tongue spare ribs
              </Text>
            </CollapsibleWrapper>
          </View>
        )}
      </CustomCollapsible>
@karol-ciolczyk karol-ciolczyk changed the title Duration dose not work with function as a prop pattern Duration/Animation effect does not work with function as a prop pattern Feb 7, 2022
@karol-ciolczyk karol-ciolczyk changed the title Duration/Animation effect does not work with function as a prop pattern Duration/Animation effect does not work with "function as a child" pattern Feb 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant