CODEWITHSUNDEEP
javascriptreact-native
Mendes
Mendes

Reputation: 18471

React Native FlatList with clickable items

I'm building a custom line style for a react-native FlatList.

I want the user to navigate to item details when clicking on the line text, or navigate to another page (drill down next level) when clicked on the right caret, something like:

enter image description here

Here is my current list components code:

class MyList extends Component {
  handleShowDetails = index => {
    ...
  };


  handleDrillDown = index => {
    ...
  }

  render = () => {
    let data = // Whatever data here

    return (
      <View style={styles.container}>
        <FlatList
          data={data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (
            <MyListItem
              onTextPress={this.handleShowDetails}
              onCaretPress={this.handleDrillDown}
              item={item}
            />
          )}
        />
      </View>
    );
  };
}

export default MyList;

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
    backgroundColor: colors.white,
    borderStyle: "solid",
    marginBottom: 1
  }
});

And my list item component:

class MyListItem extends Component {
  handleTextPress = () => {
    if (this.props.onTextPress) this.props.onTextPress(this.props.item.id);
  };

  handleIconPress =() => {
    if (this.props.onCaretPress) this.props.onCaretPress(this.props.item.id)
  }

  render = () => {
    return (
      <View style={styles.container}>
        <View style={styles.textContainer}>
          <Text onPress={this.handleTextPress}>{this.props.item.title}</Text>
        </View>
        <View style={styles.iconContainer}>
          <Button onPress={this.handleIconPress}>
            <Icon name="ios-arrow-forward"/>
          </Button>
        </View>
      </View>
    );
  };
}

export default MyListItem;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: colors.white,
    marginBottom: 1,
    height: 30
  },
  textContainer: {
    backgroundColor: colors.light,
    paddingLeft: 5,
    fontSize: 26
  },
  iconContainer: {
    alignSelf: "flex-end",
    backgroundColor: colors.primary,
    paddingRight: 5, 
    fontSize: 26
  }
});

Problems I'm facing:

a. Clicking on text is not working properly. Sometimes it navigates but most of time I cannot navigate, specially if I click on the empty space between the text and the caret.

b. I simply cannot style the fontSize of the text.

c. I'm not being able to space then accordingly.

d. I need to vertical center both itens on row.

Here is what I'm getting for now:

enter image description here

Upvotes: 0

Views: 5869

Answers (3)

Ramon Lobo
Ramon Lobo

Reputation: 56

For the clicking issue, you could set an TouchableHighlight or a TouchableOpacity for the View.

For spacing and alignment issues, maybe you could set the text to flex: 9 and the icon to flex: 1 with FlexBox. Here are the docs for that https://facebook.github.io/react-native/docs/flexbox.html.

Upvotes: 3

dentemm
dentemm

Reputation: 6379

For part a I would suggest an improvement over Anthu's answer:

I you want the entire textContainer to be clickable I suggest using TouchableWithoutFeedback (or another Touchable which suits your needs) and wrap this around the textContainer View

Upvotes: 0

tuledev
tuledev

Reputation: 10327

a. Try to make the text full the cell. I can see your text just in 50% of the cell. style <Text> with height: 44

b. fontsize has to be placed in the <Text> component. You are placing it in <View> component

c. "I'm not being able to space then accordingly". I can't get your point clearly.

d. Try justifyContent: 'center' in iconContainer

Upvotes: 0

Related Questions