0

I'm trying to use material-top-tabs in modalize but only headers are coming in. The page itself is not rendering. When I try to use react-native-tab-view instead of material, the pages render, but there is a problem with adjusting the height. so the material made more sense, but as I said, this is not rendering either.

these are my codes;

import React from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {CustomerEvaluation} from './FirstRoute';
import {ShippingNotes} from './SecondRoute';
import {Transactions} from './ThirdRoute';
import routes from '../../../constants/routes';

const Tab = createMaterialTopTabNavigator();

export const MaterialTopTabView = () => {
  return (
    <Tab.Navigator
      initialRouteName={routes.CustomerEvaluation}
      screenOptions={{
        tabBarLabelStyle: {fontSize: 12},
        tabBarIndicatorStyle: {
          borderBottomColor: '#32cd32',
          borderBottomWidth: 4,
        },
        tabBarStyle: {backgroundColor: '#f9f9f9', paddingTop: 10},
        swipeEnabled: true,
        tabBarScrollEnabled: true,
        tabBarItemStyle: {width: 'auto', minWidht: '100'},
      }}>
      <Tab.Screen
        name={routes.CustomerEvaluation}
        component={CustomerEvaluation}
        options={{
          tabBarLabel: 'Müşteri değerlendirmesi',
          tabBarLabelStyle: {
            fontSize: 13,
            fontFamily: 'Metropolis-SemiBold',
            textTransform: 'capitalize',
          },
        }}
      />
      <Tab.Screen
        name={routes.ShippingNotes}
        component={ShippingNotes}
        options={{
          tabBarLabel: 'Gönderi notları',
          tabBarLabelStyle: {
            fontSize: 13,
            fontFamily: 'Metropolis-SemiBold',
            textTransform: 'capitalize',
          },
        }}
      />
      <Tab.Screen
        name={routes.Transactions}
        component={Transactions}
        options={{
          tabBarLabel: 'İşlemler',
          tabBarLabelStyle: {
            fontSize: 13,
            fontFamily: 'Metropolis-SemiBold',
            textTransform: 'capitalize',
          },
        }}
      />
    </Tab.Navigator>
  );
};

 <Modalize
          ref={modalizeRef}
          contentRef={contentRef}
          // HeaderComponent={renderTabBar}
          modalStyle={{backgroundColor: '#f9f9f9'}}
          handleStyle={{width: 35, backgroundColor: '#75777a', zIndex: 10000}}
          handlePosition="inside"
          modalHeight={height * 0.6}
          // snapPoint={height * 0.4}
          alwaysOpen={HEADER_HEIGHT + 5}
          childrenStyle={{
            borderTopLeftRadius: 12,
            borderTopRightRadius: 12,
            overflow: 'hidden',
          }}
          scrollViewProps={{
            onScroll: Animated.event(
              [{nativeEvent: {contentOffset: {y: scrollY}}}],
              {
                useNativeDriver: true,
              },
            ),
            scrollEventThrottle: 16,
          }}>
          {/* <Tabs active={index} onIndexChange={handleIndexChange} /> */}

          <MaterialTopTabView />
          {/* <Text style={{color:"#000"}}>sadjhasdkjhaskjdhaskjdk</Text> */}
        </Modalize>

I want material-top-tabs to render but it returns blank page.

knlcl
  • 1
  • 2

1 Answers1

0

I solved the problem. I needed to give height to tab navigator with style prop.

knlcl
  • 1
  • 2