CODEWITHSUNDEEP
react-nativereact-native-tab-view
Anirban Baisya
Anirban Baisya

Reputation: 111

react-native-tab-view is not visible , not displayed on screen or not working

react-native-tab-view is not visible , not displayed on screen or not working because of the flex: 1 styling , we have to give flex: 1 styling inside parent view , otherwise it not displayed on screen .

for reference : https://github.com/satya164/react-native-tab-view/blob/main/example/src/CustomTabBarExample.tsx

solution :-

1st ex. with default tab bar -

import { StyleSheet, Text, View, useWindowDimensions } from 'react-native'
import React from 'react'

import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const BookingScreen = () => {

const layout = useWindowDimensions();

const FirstRoute = () => (
    <View style={{ flex: 1, backgroundColor: '#ff4081' }} /> // here also writing flex: 1 is mandatory
);

const SecondRoute = () => (
    <View style={{ flex: 1, backgroundColor: '#673ab7' }} /> // here also writing flex: 1 is mandatory
);



const [index, setIndex] = React.useState(0);
const [routes, setRoutes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
]);

const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
    // first: FeedbackScreen,
    // second: ProfileScreen,
});





return (
    <>
        <View style={{ flex: 1 }}> // wrtie flex: 1 inside parent view its mandatory ***



            <TabView
                navigationState={{ index, routes }}
                renderScene={renderScene}
                onIndexChange={setIndex}
                initialLayout={{ width: layout.width }}
            />

            


        </View>

    </>
)
}

export default BookingScreen

2nd ex. with custom tab bar -

import { StyleSheet, Text, View, useWindowDimensions } from 'react-native'
import React from 'react'

import { TabView, TabBar, SceneMap } from 'react-native-tab-view';


const BookingScreen = () => {


const [index, setIndex] = React.useState(0);
const [routes, setRoutes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
]);



const _renderTabBar = props => (
    <TabBar
        {...props}
        style={{ backgroundColor: '#fafafa' }}
        tabStyle={[styles.tab, { height: 38, maxHeight: 38, minHeight: 38, padding: 0 }]}
        labelStyle={[styles.label, { color: colors.text, }]}
        indicatorStyle={{ backgroundColor: 'blue' }}
    />
);



return (
    <>
        <View style={{ flex: 1 }}> // giving flex:1 inside parent view is mandatory


            

            <TabView
                navigationState={{ index, routes }}

                renderTabBar={_renderTabBar}
                onIndexChange={setIndex}
                renderScene={({ route }) => {
                    switch (route.key) {
                        case 'first':
                            return (<>
                                <View style={{ flex: 1, backgroundColor: '#ff4081' }} > // giving flex:1 is mandatory otherwise content will not shown
                                    <Text style={{ color: 'black' }}>sadfghjkljhgfcgvhbj</Text>
                                </View>

                            </>);

                        case 'second':
                            return (<>
                                <View style={{ flex: 1, backgroundColor: '#673ab7' }} > // giving flex:1 is mandatory otherwise content will not shown
                                    <Text style={{ color: 'black' }}>sadfghjkljhgfcgvhbj</Text>
                                </View>

                            </>);
                        default:
                            return null;


                    }
                }}
            />



        </View>

    </>
)
}

export default BookingScreen

const styles = StyleSheet.create({
    label: {
        fontWeight: '600',
        // fontSize: 12,
        flexWrap: 'wrap',
        // color: Colors.text,
        // minWidth: Dimensions.get('window').width < 375 ? '100%' : '60%'
    },
})

Upvotes: 7

Views: 7333

Answers (3)

Simon
Simon

Reputation: 6452

For future readers, a common problem is that the parent container doesn't have a defined height.

You must set the parent container height, for instance:

    <View style={{height: "100%"}}> //or flex: 1
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
        />
    </View>

Upvotes: 20

kratosgado
kratosgado

Reputation: 31

I encountered a similar issue where my TabView was located within a ScrollView. Interestingly, it operated without issue when executed on Expo Web, but the same could not be said for an Android emulator or device. The solution I found was to remove the TabView from the ScrollView. That's all there was to it - if your TabView is contained in a ScrollView, you should extract it from there, or encase it in a different container that utilizes a different flexDirection.

Upvotes: 3

SPG
SPG

Reputation: 6197

Remove parent container will fix this problem.

return (
            <TabView
                navigationState={{ index, routes }}
                renderScene={renderScene}
                onIndexChange={setIndex}
                initialLayout={{ width: layout.width }}
            />
)

Upvotes: 1

Related Questions