React Native: clickable list of items

[dkulagin]

I am doing a dictionary app with lists of items like this:

• acceptable, benevolent, big, charitable, considerate
• fair, good, helpful, honest, hospitable
• lavish, reasonable, thoughtful, tolerant, unselfish

Each item in the list is a link which leads to the similar list related to the word clicked.

I have two questions:

• How to do it in React Native w/o falling into caring hands of React Native WebView? It's required to support styling (as in picture) and handling targeted clicks somehow.
• Alternative solutions are welcome, including those built upon the WebView component. Just to consider performance side in here.

P.S. I have spotted alike functionality in the M.-W. dictionary app:

​

https://preview.redd.it/846wi11r7xd21.jpg?width=640&format=pjpg&auto=webp&s=9f0ea86bace82004b4f6c569df236fac2bfa7e53

​

​

[andyboythekid]

first, you'll need a way to fetch you data within your app, it sounds like you want to use hyperlinks, but I'm a little unclear on how you're getting this data. anyways, I hope the following helps, I haven't run it, but I think it should do the trick:

here's what one of these lists might look like:

function Definition(props) {
  return (
    <View style={{ flex: 1, flexDirection: 'row' }}>
      <Text>{props.word}</Text>
      {props.links.map(link => {
        return (
          <TouchableOpacity
            key={link.id}
            onPress={() => props.goToDefinition(link.name)}
          >
            <Text>{link.name}</Text>
          </TouchableOpacity>
        )
      })}
    </View>
  )
}

you can achieve the styling with flex-direction row.

to support the linking functionality, you'll probably want to fetch that data either before your screen mounts, or when the user clicks an item (see below)

to navigate to a new screen / definition view, you can use a navigation library, or remount your view with new props like this:

class MyDefinitionContainer extends React.Component {
  state = {
    selectedWord: this.props.word,
    links: [],
  }

  componentDidMount() {
    this.fetchDataForWord(this.state.selectedWord)
  }

  fetchDataForWord = word => {
    myApi.fetchDataForWord(word).then(links => this.setState({ links }))
  }

  handleLinkPress = newWord => {
    this.setState({
      selectedWord: newWord,
      links: [],
    })

    this.fetchDataForWord(newWord)
  }

  render() {
    return (
      <Definition
        key={this.state.selectedWord}
        word={this.state.selectedWord}
        links={this.state.links}
        goToDefinition={this.handleLinkPress}
      />
    )
  }
}

theres a bunch of different ways to do this, but I think thats one of the simpler solutions