TabView inside a Popover

[fatihyildizhan]

🐛 Bug Report

I am getting:

Malformed calls from JS: field sized are different.
[ExpoErrorRecovery".0,[null],.........]

To Reproduce

export const TabViewSimpleUsageShowcase = () => {

  const [selectedIndex, setSelectedIndex] = React.useState(0);

  return (
    <TabView
      selectedIndex={selectedIndex}
      onSelect={setSelectedIndex}>
      <Tab title='USERS'>
        <Layout style={styles.tabContainer}>
          <Text>List of users.</Text>
        </Layout>
      </Tab>
      <Tab title='ORDERS'>
        <Layout style={styles.tabContainer}>
          <Text>List of orders.</Text>
        </Layout>
      </Tab>
      <Tab title='TRANSACTIONS'>
        <Layout style={styles.tabContainer}>
          <Text>List of transactions.</Text>
        </Layout>
      </Tab>
    </TabView>
  );
};

const styles = StyleSheet.create({
  tabContainer: {
    minHeight: 64,
  },
});


return (
    <Popover
      visible={visible}
      content={TabViewSimpleUsageShowcase()}
      onBackdropPress={togglePopover}>
      <Button onPress={togglePopover}>
        TOGGLE POPOVER
      </Button>
    </Popover>
  );

Expected behavior

I need to show TabView inside in the Popover.

UI Kitten and Eva version

Package	Version
@eva-design/eva	1.3.1
@ui-kitten/components	4.3.2

Environment information

• Windows 10
• react-native: 16.9.0
• expo: 36.0.0

[artyorsh]

Can you please provide the whole code?

[fatihyildizhan]

@artyorsh I copy and pasted TabViewSimpleUsageShowcase on the same file with a popover.

I also tried to put TabView directly into a popover. The error is same too.

return (
    <Popover
      visible={visible}
      content={
<TabView
      selectedIndex={selectedIndex}
      onSelect={setSelectedIndex}>
      <Tab title='USERS'>
        <Layout style={styles.tabContainer}>
          <Text>List of users.</Text>
        </Layout>
      </Tab>
      <Tab title='ORDERS'>
        <Layout style={styles.tabContainer}>
          <Text>List of orders.</Text>
        </Layout>
      </Tab>
      <Tab title='TRANSACTIONS'>
        <Layout style={styles.tabContainer}>
          <Text>List of transactions.</Text>
        </Layout>
      </Tab>
    </TabView>
}
      onBackdropPress={togglePopover}>
      <Button onPress={togglePopover}>
        TOGGLE POPOVER
      </Button>
    </Popover>
  );

[artyorsh]

Well, I don't know why, but this is reproducible. I'll investigate it later
Please ping if you will resolve this somehow

[artyorsh]

Probably, the same issue as #826