BottomNavigation and Tabs children not rendering

[t1amat9409]

I know the react-nativescript-navigation kinda takes care of the <tabs /> section, but would it be possible to also make it that they can also be used as child components?

See https://nativescript.org/blog/tabs-and-bottomnavigation-nativescripts-two-new-components/

[t1amat9409]

@shirakaba would this be possible?

[shirakaba]

would it be possible to also make it that they can also be used as child components?

Tabs extends View, so it might be possible to use it as a child component already. I haven’t tried, though.

When you say you want to use it as a child component, what parent are you planning to put it into? Have you tried already and seen it fail?

The React NativeScript Navigation navigators do support nesting, if you want nested navigators – though it sounds like you want to use it as a raw UI component.

You can see how I’ve implemented TabNavigator (or whatever the name is) in React NativeScript Navigation to see how to use directly.

Bear in mind that I’ve never tried nesting Tabs in NativeScript Core. If it’s not possible in Core, then it won’t be possible in React NativeScript, either.

[t1amat9409]

Here is an example of how you'd do it in Core: https://play.nativescript.org/?template=play-vue&id=Bga80w

<template>
    <Page>
        <ActionBar flat="true" title="Home" />
        <GridLayout rows="*,58">
            <Tabs row="0">
                <TabStrip>
                    <TabStripItem>
                        <Label text="Tab 1"></Label>
                    </TabStripItem>
                    <TabStripItem>
                        <Label text="Tab 2"></Label>
                    </TabStripItem>
                </TabStrip>

                <TabContentItem>
                    <GridLayout>
                        <Label text="Content"></Label>
                    </GridLayout>
                </TabContentItem>

                <TabContentItem>
                    <BottomNavigation>
                        <TabStrip>
                            <TabStripItem>
                                <Label text="Title"></Label>
                                <Image src="~/icon.png"></Image>
                            </TabStripItem>
                            <TabStripItem>
                                <Label text="Title"></Label>
                                <Image src="~/icon.png"></Image>
                            </TabStripItem>
                        </TabStrip>

                        <TabContentItem>
                            <GridLayout>
                                <Label text="Content"></Label>
                            </GridLayout>
                        </TabContentItem>

                        <TabContentItem>
                            <GridLayout>
                                <Label text="Content"></Label>
                            </GridLayout>
                        </TabContentItem>
                    </BottomNavigation>
                </TabContentItem>
            </Tabs>
            <StackLayout row="1" backgroundColor="crimson" />
        </GridLayout>
    </Page>
</template>

<script>
    export default {
        data() {
            return {};
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }

    .description-label {
        margin-bottom: 15;
    }
</style>

[t1amat9409]

@shirakaba I used NS-Vue here, but also in Core it works

[shirakaba]

@t1amat9409 That use-case should all work in RNS too, then. I've not written documentation for the Tabs component, but you can see how I'm using it in React NativeScript Navigation:

https://github.com/shirakaba/react-nativescript-navigation/blob/4e65f9cdb1ddaace7f58cc14ecf36e11acabb3c8/react-nativescript-navigation/src/native-tabs/tabNavigatorFactory.tsx#L56

Pay attention to the nodeRole attributes that need to be added, but other than that, the code should look broadly the same as the equivalent NativeScript Core and NativeScript Vue code.

[t1amat9409]

@shirakaba will see

[t1amat9409]

@shirakaba now closing issue