CODEWITHSUNDEEP
react-nativereact-navigationreact-native-iosreact-native-navigationreact-navigation-v5
hellomello
hellomello

Reputation: 8597

React Navigation Top Bar Getting Same Height (NOT) dependent on its own components

Looking at this example from React Navigation website, between Chat and Contacts, the heights are independent of each other. However, When I tried to implement a top bar, the heights are the same. It takes the height of which ever tab has the most content in it.

But in the example, you can see in Contacts that there may be more contacts where you can scroll, and in Chat, the input field is at the bottom, making it look like that's where it stops.

Here's a screen shot from the example:

Chat tab

enter image description here

Contacts tab

enter image description here

Here's some of my code and what I'm experiencing:

<View style={{backgroundColor: 'orange'}}>
  {!loading &&
    !loadingProfileInfo &&
    typeof data.infoByUser !== 'undefined' && (
      <FlatList
        data={data.infoByUser}
        ListHeaderComponent={
          <View>
            <UserInfo />

            <Tab.Navigator>
              <Tab.Screen 
                name="Test" 
                component={TestComponent} />
              <Tab.Screen
                name="New Tab"
                component={NewTabComponent}
              />
            </Tab.Navigator>
          </View>
        }
        numColumns={2}
        renderItem={({item}) => (
          <View>
           // ...
          </View>
        )}
        keyExtractor={item => item._id}
      />
    )}
</View>

TestComponent

<View style={{backgroundColor: 'grey'}}>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
</View>

NewTabComponent

<View style={{backgroundColor: 'red'}}>
  <Text>new tab</Text>
</View>

enter image description here enter image description here

Notice how the New Tab has a big gap between the red and the orange, that's from the Test tab's height.

Upvotes: 3

Views: 3072

Answers (4)

Harshal
Harshal

Reputation: 8308

To have heights according to the content inside the particular tab, use Scrollview inside each tab screen. Thank me later if this works perfectly. :)

import * as React from "react";
import { ScrollView, Text, View } from "react-native";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

function Screen1() {
  return (
    <ScrollView>
      <View style={{ flex: 1, alignItems: "center" }}>
        <Text style={{ padding: 10 }}>Screen1 </Text>
      </View>
    </ScrollView>
  );
}

function Screen2() {
  return (
    <ScrollView>
      <View style={{ flex: 1, alignItems: "center" }}>
        <Text style={{ padding: 10 }}>Screen2</Text>
      </View>
    </ScrollView>
  );
}

function Screen3() {
  return (
    <ScrollView>
      <View style={{ flex: 1, alignItems: "center" }}>
        <Text style={{ padding: 10 }}>Screen3 </Text>
      </View>
    </ScrollView>
  );
}

const Tab = createMaterialTopTabNavigator();

export default function TopBarNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Screen1" component={Screen1} />
      <Tab.Screen name="Screen2" component={Screen2} />
      <Tab.Screen name="Screen3" component={Screen3} />
    </Tab.Navigator>
  );
}

Upvotes: 1

CevaComic
CevaComic

Reputation: 2114

After a long research I found out that your problem is because react-native-tab-view (which is used by material-tob-tabs), has this code :

_defineProperty(this, "handleLayout", e => {
  const {
    height,
    width
  } = e.nativeEvent.layout;

  if (this.state.layout.width === width && this.state.layout.height === height) {
    return;
  }

  this.setState({
    layout: {
      height,
      width
    }
  });

With option lazy={true} , and using the "New Tab" component on first tab and "Test" on second, you get the right height until you change the tab. When you press on "Test" the layout changes so the height is bigger. After changing tab the height does't change anymore because the layout stays the same ("New Tab" fits perfectly in the bigger height) and doesn't trigger handleLayout from react-native-tab-view.

Hope you can find a way to change the layout again when you change tabs.

Upvotes: 0

Ben Butterworth
Ben Butterworth

Reputation: 28968

You are rendering your entire navigator as the FlatList 'header'. You shouldn't even use Flatlist in this component. Each screen has a different number of items, and should have its own Flatlist.

To fix this:

  • Remove the FlatList from your main component (with backgroundColor: 'orange'), and just render the Tab Navigator in that render function.

  • Inside of TestComponent and NewTabComponent, render a ScrollView (or FlatList) if you need it.

  • All screens (TestComponent and NewTabComponent) should have a height: '100%' or flex: 1 if you want all screens to take all up all the space of the screen, even when its real height is less than the screen height.

Upvotes: 1

Ashwin Mothilal
Ashwin Mothilal

Reputation: 2532

I'm having no idea why you're rendering it inside FlatList as it also inherits props from Scroll View. 

<View style={{backgroundColor: 'orange'}}>
  <Tab.Navigator>
      <Tab.Screen 
        name="Test" 
        component={TestComponent} />
      <Tab.Screen
        name="New Tab"
        component={NewTabComponent}
      />
  </Tab.Navigator>
</View>

and move the FlatList and other business logics inside the TestComponent or the NewTabComponent.

The point is don't render Tabs inside ScrollView or FlatList or SectionList as they both inherit the props of ScrollView.

Upvotes: 0

Related Questions