web-ridge / react-native-paper-tabs

Smooth and fast cross platform Material Design Tabs for React Native Paper
https://reactnativepapertabs.com
MIT License
190 stars 34 forks source link

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. #4

Closed rcasari1987 closed 3 years ago

rcasari1987 commented 3 years ago

Hello community, I am trying to implement the tabs component, I follow the installation and implementation instructions, but I have the following error:

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. [[24,2,24],[0,22,0],[[80,0,1611760122794,false],[81,0,1611760122833,false]],3984]

Estoy usando react native 0.63.2

RichardLindhout commented 3 years ago

Do you change amount of TabScreens dynamically, can you share some code?

rcasari1987 commented 3 years ago

does not change the number of tabs dynamically, it just doesn't like to be inside a container that has no width fixed, and if the container has alignItems it doesn't work, fix it as follows:

<Tabs uppercase= {true} showTextLabel= {true} mode={'fixed'} style={styles.tabs}>
  <TabScreen label="Historial">
    <View style={{flex: 1, alignItems: 'center'}}>
      <View
        style={{width: width * 0.8, marginTop: containerHeight * 0.03}}>
        <Searchbar
          placeholder="Buscar"
          onChangeText={onChangeSearch}
          value={searchQuery}
          style={styles.searchBar}
        />
      </View>
    </View>
  </TabScreen>
  <TabScreen label="Agenda">
    <View style={{flex: 1, alignItems: 'center'}}>
      <View
        style={{width: width * 0.8, marginTop: containerHeight * 0.03}}>
        <Searchbar
          placeholder="Buscar"
          onChangeText={onChangeSearch}
          value={searchQuery}
          style={styles.searchBar}
        />
      </View>
    </View>
  </TabScreen>
</Tabs>

image

vaibhavshah0201 commented 11 months ago

Hello community, I am trying to implement the tabs component, I follow the installation and implementation instructions, but I have the following error:

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. [[24,2,24],[0,22,0],[[80,0,1611760122794,false],[81,0,1611760122833,false]],3984]

Estoy usando react native 0.63.2

Hey, can you explain how you solve this error??

I'm using react-native-gesture-handler in the child component and its throw me same error as above