RTL support - StorylyView's layout is broken when setting its storylyLayoutDirection property
sylvainAlexandre opened this issue · 5 comments
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
- Implement an integration of a
StorylyView
- The
StorylyView
instance has a required height constraint (not an issue isstorylyLayoutDirection
isn't set) - 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
}()
Thanks for your help 🙏🏻
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.
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,
Thank you 🙏🏻