RTL support - StorylyView's layout is broken when setting its storylyLayoutDirection property

[sylvainAlexandre]

The StorylyView layout is wrong when setting a value to the storylyLayoutDirection property.

In the process of adapting our codebase to Arabic language support, we had to use the storylyLayoutDirection property of StorylyView.

Environment Details

Storyly SDK Version: ---
iOS SDK Version: Latest version (Storyly 1.32.5)
Device Model: iPhone 14 Pro (simulator) / iPhone 12 Pro (device)
Device OS Version: iOS 16.4 / iOS 16.4.1(a)
Additional Info: ---

Expected Behavior

In left-to-right layout direction, the StorylyView layout should stay the same whether we set the storylyLayoutDirection to .LTR or not.
In right-to-left, while setting the .RTL value to the storylyLayoutDirection property, the layout should invert leading and trailing without any other effect

Here is what our integration looks like without setting the storylyLayoutDirection property:

Current Behavior

Here is what our integration looks like when we set the storylyLayoutDirection property to .LTR

Steps to Reproduce

1. Implement an integration of a StorylyView
2. The StorylyView instance has a required height constraint (not an issue is storylyLayoutDirection isn't set)
3. Update the code as follow:

//    let storylyView = StorylyView()
    private (set) lazy var storylyView = {
        let view = StorylyView()
        let isRTL = effectiveUserInterfaceLayoutDirection == .rightToLeft
        view.storylyLayoutDirection = isRTL ? .RTL : .LTR
        return view
    }()

[sylvainAlexandre]

Thanks for your help 🙏🏻

[levent-oral]

Hi @sylvainAlexandre ,

Do you use any other UI customization field in StorylyView?

Thanks,

[sylvainAlexandre]

Do you use any other UI customization field in StorylyView?

Yes we do, we set story group and story item properties as follow:

    private func setUpStoryGroups() {
        storylyView.storyGroupSize = "small"
        storylyView.storyGroupAnimation = "disabled"
        storylyView.storyGroupListStyling = StoryGroupListStyling(
            orientation: .Horizontal,
            sections: 1,
            horizontalEdgePadding: context.style.storyGroupListHorizontalEdgePadding,
            verticalEdgePadding: CGFloat.S,
            horizontalPaddingBetweenItems: 20.0,
            verticalPaddingBetweenItems: 20.0
        )
        storylyView.storyGroupTextStyling = StoryGroupTextStyling(
            isVisible: true,
            colorSeen: context.style.storyGroupTextColorSeen,
            colorNotSeen: context.style.storyGroupTextColorNotSeen,
            font: context.style.storyGroupTextFont,
            lines: 2
        )
        storylyView.storyGroupPinIconColor = context.style.storyGroupPinIconColor
        storylyView.storyGroupIconBorderColorSeen = context.style.storyGroupIconBorderColorSeen
        storylyView.storyGroupIconBorderColorNotSeen = context.style.storyGroupIconBorderColorNotSeen
    }

    private func setUpStoryItems() {
        storylyView.storyItemIconBorderColor = context.style.storyItemIconBorderColor
        storylyView.storyItemTextFont = context.style.storyItemTextFont
        storylyView.storyInteractiveFont = context.style.storyInteractiveFont
    }

These methods are called before the parent view containing the StorylyView is displayed.

[levent-oral]

Hello @sylvainAlexandre ,

We're able to reproduce the issue. The problem is that the order of customization fields causes a conflict in rendering. We would suggest adding storylyLayoutDirection to the end of story group custimizations, in your case, as the last line of setUpStoryGroups.

Moreover, we have an active task to change implementation of UI Customizations of Storyly. It will address this issue as well.

Thanks,

[sylvainAlexandre]

Thank you 🙏🏻