Send props to another screen

Question

help, so lets say i got a bunch of data from an API (in Homescreen.js), which then i send to a component called "Artikel.js", how should i send the data in each of these articles to a screen called "DetailScreen.js". please someone help me, i'd appreciate it very very much, thanks in advance and sorry for bad english

const Homescreen = () => {
  const [articles, setArticles] = useState([]);

  const getArticles = () => {
    axios
      .get(
        "https://newsapi.org/v2/top-headlines?country=us&apiKey=API_KEY",
        {
          params: {
            category: "technology",
          },
        }
      )
      .then((response) => {
        setArticles(response.data.articles);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {});
  };

  useEffect(() => {
    getArticles();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={articles}
        renderItem={({ item }) => (
          <Artikel
            urlToImage={item.urlToImage}
            title={item.title}
            description={item.description}
            author={item.author}
            publishedAt={item.publishedAt}
            sourceName={item.source.name}
            url={item.url}
          />
        )}
        keyExtractor={(item) => item.title}
      />
    </SafeAreaView>
  );
};

export default Homescreen;

Artikel.js

const Artikel = (props) => {
  const navigation = useNavigation();
  const goToDetail = () => {
    navigation.navigate("Detail", {judul: 'Asu'});
  };

  // const goToSource = () => {
  //   WebBrowser.openBrowserAsync(props.url);
  // };

  return (
    <SafeAreaView style={styles.container}>
      <Pressable onPress={goToDetail}>
        <Image
          style={styles.image}
          on
          source={{
            uri: props.urlToImage,
          }}
        />
      </Pressable>
      <View style={{ paddingHorizontal: 20, paddingBottom: 10 }}>
        <Text style={styles.title}>{props.title}</Text>
        <Text style={styles.deskripsi} numberOfLines={3}>
          {props.description}
        </Text>
        <View style={styles.data}>
          <Text style={styles.h2}>
            source:<Text style={styles.sumber}> {props.sourceName}</Text>
          </Text>
          <Text style={styles.tanggal}>
            {moment(props.publishedAt).format("MMM Do YY")}
          </Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default Artikel;

"DetailScreen.js"

const DetailScreen = (props) => {
  return (
    <SafeAreaView style={styles.container}>
      <Header />
      <View style={styles.image}>
        <Image
          source={{
            uri: props.thumbnail,
          }}
          style={styles.image}
        />
      </View>

      <View style={styles.bodyartikel}>
        <Text style={styles.judul}>PROPS TITLE</Text>
        <Text style={styles.artikel}>
          PROPS.ARTICLE
        </Text>
        <View style={styles.footer}>
          <Text style={styles.h1}>
            By: <Text style={styles.sumber}>Salman</Text>
          </Text>
          <Text>12 Okt 2020</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default DetailScreen;

i tried to make a list of the datas i need in Artikel.js and made it into a list, but it didnt work

Answer 1

So in your Article.js you have called an method to navigate to DetailScreen.js. You have can do like this.

In Article.js:

<Pressable onPress={() => goToDetail(props)}> // pass props as argument
  <Image
    style={styles.image}
    source={{
      uri: props.urlToImage,
    }}
  />
</Pressable>

now in your goToDetail method:

// Catch passed arguments as props   
const goToDetail = (props) => {
  navigation.navigate('Details', {
    title: props.title,
    description: props.description,
  })
// As for now just passing title and description from props
};

Now to access Passed data in Detail.js:

import { useRoute } from '@react-navigation/native';

const DetailScreen = () => {
  let route = useRoute(); // using route hooks
  let {title, data} = route.params
  return (
    <YourComponent/>
  );
};

In this way you can pass data from one screen to another. For more detail you always can visit react native navigation docs: https://reactnavigation.org/docs/params