Skip to content

Conversation

@kkafar
Copy link
Member

@kkafar kkafar commented Dec 16, 2025

Description

Closes https://github.com/software-mansion/react-native-screens-labs/issues/735

I'm open to discussion on the naming here.

This PR changes only JS layer of the component naming. If necessary native-side will be handled separately.

Changes

  • Export split component as Split instead of separate ones
    I've removed exports for SplitViewHost & SplitViewScreen in favour
    of Split.Host & Split.Column / Split.Inspector.

    The naming here is open for discussion. I prefer short version of Split
    instead of SplitView, but that's matter of preference, can't find
    reasonable (& clinching) arguments for one or the other.

    Most important thing here is to just make it consistent. If we are to
    use View suffix, then we should do similar thing for Stack ->
    StackView.Host & StackView.Screen.

    So it's either:

    Stack.Host, Stack.Screen,
    Tabs.Host, Tabs.Screen,
    Split.Host, Split.Column, Split.Inspector

    OR

    StackView.Host, StackView.Screen,
    TabsView.Host, TabsView.Screen,
    SplitView.Host, SplitView.Column, SplitView.Inspector

    OR MAYBE (?)

    Stack.HostView, Stack.ScreenView,
    Tabs.HostView, Tabs.ScreenView,
    Split.HostView, Split.ColumnView, Split.InspectorView

  • Update examples

  • Remove view substring from SplitView prefix used across symbols

@kkafar kkafar requested review from kligarski, kmichalikk and t0maboro and removed request for t0maboro December 16, 2025 16:23
I've removed exports for `SplitViewHost` & `SplitViewScreen` in favour
of `Split.Host` & `Split.Column` / `Split.Inspector`.

The naming here is open for discussion. I prefer short version of `Split`
instead of `SplitView`, but that's matter of preference, can't find
reasonable (& clinching) arguments for one or the other.

Most important thing here is to just make it consistent. If we are to
use `View` suffix, then we should do similar thing for Stack ->
`StackView.Host` & `StackView.Screen`.

So it's either:

`Stack.Host`, `Stack.Screen`,
`Tabs.Host`, `Tabs.Screen`,
`Split.Host`, `Split.Column`, `Split.Inspector`

OR

`StackView.Host`, `StackView.Screen`,
`TabsView.Host`, `TabsView.Screen`,
`SplitView.Host`, `SplitView.Column`, `SplitView.Inspector`

OR MAYBE (?)

`Stack.HostView`, `Stack.ScreenView`,
`Tabs.HostView`, `Tabs.ScreenView`,
`Split.HostView`, `Split.ColumnView`, `Split.InspectorView`
@kkafar kkafar force-pushed the @kkafar/refactor-split-api branch from c46bba0 to 2860ff8 Compare December 16, 2025 16:28
Copy link
Contributor

@t0maboro t0maboro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm okay with dropping View suffix.

One more question, can we correct warnings like SplitView is supported only for iOS. Consider using an alternative layout for Android. to drop the suffix? (I cannot ask for that in file directly as it was moved without changes)

@kkafar
Copy link
Member Author

kkafar commented Dec 17, 2025

Yeah, you're right. Thanks for noticing this. I'll fix the warning messages.

Copy link
Contributor

@t0maboro t0maboro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additionally, I'd suggest updating it in:

  • SplitHost.tsx, L79 : This enables us to fully recreate the SplitView when necessary, ensuring the correct column configuration is always applied.
  • SplitHost.types.ts, L299 Inspector will be displayed on the trailing edge of the main (secondary) column (for expanded Split) or as a modal (for collapsed SplitView).

Comment on lines 23 to 30
const splitViewBaseConfig: SplitBaseConfig = {
preferredDisplayMode: 'twoBesideSecondary',
preferredSplitBehavior: 'tile',
};

return (
<SplitBaseApp splitBaseConfig={splitViewBaseConfig} />
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const splitViewBaseConfig: SplitBaseConfig = {
preferredDisplayMode: 'twoBesideSecondary',
preferredSplitBehavior: 'tile',
};
return (
<SplitBaseApp splitBaseConfig={splitViewBaseConfig} />
);
const splitBaseConfig: SplitBaseConfig = {
preferredDisplayMode: 'twoBesideSecondary',
preferredSplitBehavior: 'tile',
};
return (
<SplitBaseApp splitBaseConfig={splitBaseConfig} />
);

@kkafar kkafar marked this pull request as draft December 17, 2025 12:59
@kkafar
Copy link
Member Author

kkafar commented Dec 17, 2025

This is back to draft for some time, as thanks to some recent commit the TestSplit example stopped to work.

@kkafar
Copy link
Member Author

kkafar commented Dec 17, 2025

Works now

@kkafar
Copy link
Member Author

kkafar commented Dec 17, 2025

SplitHost.tsx, L79 : This enables us to fully recreate the SplitView when necessary, ensuring the correct column configuration is always applied.

@t0maboro this one is left deliberately, as this one refers to the SplitViewHostNativeComponent / UIKit view, name of which remains unchanged.

@kkafar kkafar marked this pull request as ready for review December 17, 2025 13:20
@kkafar kkafar merged commit 952b7cd into main Dec 17, 2025
3 checks passed
@kkafar kkafar deleted the @kkafar/refactor-split-api branch December 17, 2025 13:23
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

Successfully merging this pull request may close these issues.

3 participants