oblador / react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
MIT License
2.44k stars 451 forks source link

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

Open karol-ciolczyk opened 2 years ago

karol-ciolczyk commented 2 years ago

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>