TabView has no height unless specified.

[imeidopf]

Is there an existing issue for this?

• [X] I have searched the existing issues

Explain what you did

`import { Component, ReactNode, createElement } from "react"; import { Text, View } from "react-native"; import { Tab, TabView } from '@rneui/themed';

import { mergeNativeStyles } from "@mendix/pluggable-widgets-tools";

import { CustomStyle } from "../ReactNativeElementsTabs"; import { TabArrayType } from "typings/ReactNativeElementsTabsProps";

export interface TabContainerProps { name?: string; tabArray: TabArrayType[]; style: CustomStyle[]; }

interface TabContainerState { index: number; }

const defaultStyle: CustomStyle = { container: {}, label: { color: "#F6BB42" } };

export class TabContainer extends Component<TabContainerProps, TabContainerState> { constructor(props: TabContainerProps) { super(props); this.state = { index: 0 }; }

private readonly styles = mergeNativeStyles(defaultStyle, this.props.style);

handleTabChange = (index: number) => {
    this.setState({ index });
};

render(): ReactNode {
    return (
        <View style={this.styles.container}>
            <Tab
                value={this.state.index}
                onChange={(e) => this.handleTabChange(e)}
                indicatorStyle={{
                    display: "none"
                }}
                containerStyle={{
                    backgroundColor: "transparent"
                }}
                style={{
                    backgroundColor: "#D1E1E8",
                    borderRadius: 16,
                    padding: 2
                }}
                variant="primary"
                >
                {this.props.tabArray.map((tab) => {
                    return (
                        <Tab.Item
                            title={tab.ruleRegex}
                            buttonStyle={(active) => ({
                                backgroundColor: active ? "white" : "transparent",
                                padding: 4,
                                margin: 2,
                                borderRadius: 16
                            })}
                            titleStyle={{
                                color: "#163548"
                            }}
                        >
                        </Tab.Item>
                    );
                })}
            </Tab>

            <TabView value={this.state.index} onChange={this.handleTabChange} animationType="spring">
                {this.props.tabArray.map((tab, index) => {
                    return (
                        <TabView.Item style={{width: "100%", backgroundColor: "grey", borderRadius: 16}}> // Adding a height here is the only way I see the tab content. Based on the documentation snippet, I thought it would be full height.
                            <View>
                                <Text style={{color: "red"}}>{index}</Text>
                                <Text style={{color: "red"}}>{tab.ruleLabel}</Text>
                            </View>
                        </TabView.Item>
                    )
                })}
            </TabView>
        </View>
    );
}

}`

Expected behavior

TabView height would respond to the content within.

Describe the bug

Unless I give the TabView component a height, there is no height. If I place the TabView.Item children in a view, then I get something but the children render over each other and overflow the parent container.

Steps To Reproduce

Unless you develop widgets in Mendix Native Mobile, I don't have steps to reproduce.

Screenshots

Your Environment

`npx @rneui/envinfo`

``` Output from `npx @rneui/envinfo` goes here. ```

[imeidopf]

I've replicated this issue in the starter app, AwesomeProject, that React Native showcases in their docs. reactNativeElements-main.zip

[harryhw]

I got a same problem and I found the answer when testing on https://snack.expo.dev/TeR_zOjmY . Seems TabView from rneui doesn't work with View component from react-native. The solution: remove out all components from react-native and replace by elements from rneui. In the example above, we can replace by <></> as in rneui documentation. Cheers!