Is it possible to create a horizontally scrollable and sortable navigation tabs with Sortable.Flex?

[hakanayata]

Hi! Thanks for this amazing library. I'm new to mobile development, and I've been having trouble creating a horizontally scrollable and sortable navigation menu for my app. Is it possible to implement something like the one you can see on the App Store's Apps tab but with a sortable feature?

ScreenRecording_02-05-2025.23-49-25_1.mov

I attached my code down below, and it doesn't show the items (TouchableOpacity) unless I add flex:1 to the containerStyle, but then it doesn't let me scroll to the right.

ScreenRecording_02-06-2025.00-21-20_1.mov

            <ThemedScrollView
              horizontal
              showsHorizontalScrollIndicator={false}
              contentContainerStyle={{
                flex: 1, // items are not visible without this
                flexDirection: "row",
                alignItems: "center",
                gap: 12,
              }}
            >
              <Sortable.Flex columnGap={12} flexWrap="nowrap">
                {tabs
                  .filter((t) =>
                    activities.includes(t.title)
                  )
                  .map((tab, index) => (
                    <TouchableOpacity>
                      <ThemedText>
                        {tab.emoji}
                      </ThemedText>
                      <ThemedText>
                        {t(`${tab.title}`)}
                      </ThemedText>
                    </TouchableOpacity>
                  ))}
              </Sortable.Flex>
            </ThemedScrollView>

Any kind of help would be appreciated.

[MatiPl01]

Hey @hakanayata!

I haven't tested sortable components with horizontal ScrollView yet and haven't added support for that. I was playing for a while with your example and I can see what is the problem.

Basically, after items are rendered on the screen, I start positioning them absolutely and set parent container dimensions manually, based on the calculated layout od the children. The problem with the current implementation is that I set only the height of the parent container but leave its with unspecified. When children's position change to absolute, the parent container in the horizontal ScrollView collapses because 0 is its default width.

Give me some time to fix this issue. I will most likely be able to fix it by the end of the week and release a new version of the library at the beginning of the next one.

[hakanayata]

Thanks for a quick response. I am looking forward to the next release.

[MatiPl01]

Hey @hakanayata!

I just want to let you know that I've just merged PRs that add support for horizontally scrollable Sortable.Flex.

Sorry for the delay, it took me a bit more time to implement this feature than I expected. These changes will be available in the next release, which I will publish within a few days. I want to add all new things to docs before publishing the new version.

If you want to test it now, you can clone this repo and look at the example in the example app. You can also take a look at the recording in this PR description and tell me if it looks as you want.

[hakanayata]

Hey!

Thank you so much for your effort, it looks absolutely perfect! Just like I imagined it.

I'll keep waiting for it to be released, I've been keeping myself busy with implementing other features into the app, and avoiding this part for a week. I can't wait to get my hands on it.

[MatiPl01]

Hey @hakanayata!
I just want to let you know that I've just released a new version of the library and you should now be able to create horizontally scrollable sortable tabs.