React Native: clickable list of items

Question

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:

Answer 1

According to doc:

Text supports nesting, styling, and touch handling.

So I think the best solution is to properly nest your texts and pass them a function to handle the onPress action.

I will give an example code, not styled at all but completely stylable:

  onPress = (text) => {
    // do stuff
    return
  }

  render() {
    return (
      <View style={styles.container}>
        <Card>
          <Text>
          Synonyms: 
            {this.state.synonyms.map(synonym => {
              return <Text onPress={() => this.onPress(synonym)}> {synonym} </Text>
            })}
          </Text>
        </Card>
      </View>
    );
  }

And here is a snack if you wanna take a look