React-native-ui-kitten: TabView swipeable

[mishkeTz]

I have 3 tabs and inside of each tab I have a List component.
Is it possible to disable changing active tab when a user swipes the content of one tab. I want to change tabs only when the tab title is pressed.
Because I have onPress event on List item component and the behavior is really bad I can't press the item because the tab starts the transition from one tab to another. Or maybe I did something wrong with the components order?

[32penkin]

Hi @mishkeTz ! Thank you for your reply. One of the possible solutions is using TabBar instead.
Example:

import React from 'react';
import {
  StyleSheet,
  View,
  Alert,
  ListRenderItemInfo,
  ViewProps,
} from 'react-native';
import {
  TabBar,
  Tab,
  ListItem,
  List,
  ListItemProps,
  Text,
} from '@kitten/ui';

interface State {
  selectedIndex: number;
}

export class Example extends React.Component<any, State> {

  public state: State = {
    selectedIndex: 0,
  };

  private data: { title: string; description: string }[] = [
    { title: 'Item 1', description: 'Item 1 description' },
    { title: 'Item 2', description: 'Item 2 description' },
    { title: 'Item 3', description: 'Item 3 description' },
    { title: 'Item 4', description: 'Item 4 description' },
    { title: 'Item 5', description: 'Item 5 description' },
    { title: 'Item 6', description: 'Item 6 description' },
    { title: 'Item 7', description: 'Item 7 description' },
    { title: 'Item 8', description: 'Item 8 description' },
    { title: 'Item 9', description: 'Item 9 description' },
    { title: 'Item 10', description: 'Item 10 description' },
  ];

  private onSelect = (selectedIndex: number): void => {
    this.setState({ selectedIndex });
  };

  private onListItemPress = (index: number): void => {
    Alert.alert(`Item ${index} pressed`);
  };

  private renderItem = (info: ListRenderItemInfo<{ title: string; description: string }>)
    : React.ReactElement<ListItemProps> => {

    return (
      <ListItem
        title={info.item.title}
        description={info.item.description}
        onPress={this.onListItemPress}
      />
    );
  };

  private renderListShell = (title: string,
                             data: { title: string; description: string }[]): React.ReactElement<ViewProps> => {

    return (
      <View>
        <Text>{title}</Text>
        <List
          data={data}
          renderItem={this.renderItem}
        />
      </View>
    );
  };

  private renderList = (): React.ReactElement<ViewProps> => {
    const { selectedIndex } = this.state;

    switch (selectedIndex) {
      case 0:
        return this.renderListShell('List 1', this.data);
      case 1:
        return this.renderListShell('List 2', this.data.reverse());
      case 2:
        return this.renderListShell('List 3', this.data.sort(() => .5 - Math.random()));
    }
  };

  public render(): React.ReactNode {
    return (
      <View style={styles.container}>
        <TabBar
          selectedIndex={this.state.selectedIndex}
          onSelect={this.onSelect}>
          <Tab title='Tab 1'/>
          <Tab title='Tab 2'/>
          <Tab title='Tab 3'/>
        </TabBar>
        {this.renderList()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

[mishkeTz]

Great. That's what I needed.

[gochev]

Great instead of fixing the component, use another one not shown in the docs.. awesome quality.

[artyorsh]

@gochev

1. It works in the latest library versions. KittenTricks proves it.
2. Docs (Notice the Overview section)
3. If you still have problems with implementation - why not just share a reproducible demo instead of opening a discussion with a sort of aggression?

[joao-vieira]

@artyorsh can you please indicate in which of the KittenTricks examples this technique is available?

In my case, I have a TabView with two Tabs inside and in one of these Tabs there is a ScrollView with horizontal prop as true. So I would like to disable the Tab change when the user scrolls and leave this behavior active only when the Tab title is pressed. If you have a better suggestion, it would be most welcome :)