How do I navigate to a screen within a React Native class?

Question

Disclaimer: I am still getting familiar with the React Native API.

I currently have code that displays a column of dog pictures which is formatted similar to most popular marketplace UI (i.e Mercari, Facebook Marketplace, etc.).

import React from 'react';
import {
  StyleSheet,
  View,
  SafeAreaView,
  Dimensions,
  Image,
  ImageBackground,
  Text,
  FlatList,
  TouchableOpacity } from 'react-native';

import DogInfoScreen from '../config/DogInfoScreen';

const data = [
  {image: 'https://images.unsplash.com/photo-1588022274210-7aab7c55c631?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80',
   key: "Golden Retriever"},
  {image: 'https://images.unsplash.com/photo-1589965716319-4a041b58fa8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1334&q=80',
   key: "Corgi"},
]

const columns = 2
const width = Dimensions.get('window').width

export default class Browse extends React.Component {

  format = (data, columns) => {
    const rows = Math.floor(data.length / columns)
    let lastrow = data.length - (rows * columns)

    {/* Add an empty panel if num of column items is odd */}
    while (lastrow !== 0 && lastrow !== columns) {
      data.push({key: "empty", empty: true})
      lastrow++
    }

    return data
  }

  renderData = ({item, index}) => {
    {/* Index to display all items */}
    return (
      <View style={styles.item}>
        <TouchableOpacity style={styles.itemRedirect}>
          <ImageBackground
            source={{uri: item.image}}
            style={{width: '100%', height: '100%'}} />
        </TouchableOpacity>
      </View>
    )
  }

  render() {
    return (
      <View style ={styles.container}>
        <FlatList
          data={this.format(data,columns)}
          renderItem={this.renderData}
          keyExtractor={(item, index) => index.toString()}
          numColumns={columns}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 115,
  },
  item: {
    alignItems: 'center',
    justifyContent: 'center',
    height: width / columns,
    flex: 1,
    margin: 4,
    backgroundColor: 'white',
  },
  itemRedirect: {
    width: '95%',
    height: '95%',
    alignItems: 'center',
  },
});

Given that I have a separate screen (DogInfoScreen) that display's a dog's info and data, what would be the best way to navigate to that screen from this class? For example, if I were to click on any dog in the list, it would take me to a screen that gives me more information on its breed, origin, etc.

Thanks in advance!

Answer 1

Navigation is not build into core react-native. You'll have to you use a third party navigation library for this. The two most popular ones are https://reactnavigation.org/ and https://github.com/wix/react-native-navigation