I want to share this JSON DATA when user click on share button

Question

This is JSON DATA

{
  "sad": [
    { "id": "1", "title": "hello this is no.1" },
    {
      "id": "2",
      "title": "आँखें थक गई है आसमान को देखते देखते पर वो तारा नहीं टूटता ,जिसे देखकर तुम्हें मांग लूँ"
    },
    {
      "id": "3",
      "title": "मेरी हर आह को वाह मिली है यहाँ…..,कौन कहता है दर्द बिकता नहीं है !"
    },
    {
      "id": "4",
      "title": "तुझसे अच्छे तो जख्म हैं मेरे । उतनी ही तकलीफ देते हैं जितनी बर्दास्त कर सकूँ"
    },
    {
      "id": "5",
      "title": "रुठुंगा अगर तुजसे तो इस कदर रुठुंगा की ये तेरीे आँखे मेरी एक झलक को तरसेंगी !!"
    },
    {
      "id": "6",
      "title": "बेवफा लोग बढ़ रहे हैं धीरे धीरे, इक शहर अब इनका भी होना चाहिए"
    },
    {
      "id": "7",
      "title": "बेवफा लोग बढ़ रहे हैं धीरे धीरे, इक शहर अब इनका भी होना चाहिए"
    },
    {
      "id": "8",
      "title": "बेवफा लोग बढ़ रहे हैं धीरे धीरे, इक शहर अब इनका भी होना चाहिए"
    },
    {
      "id": "9",
      "title": "बेवफा लोग बढ़ रहे हैं धीरे धीरे, इक शहर अब इनका भी होना चाहिए"
    }
  ]
}

And this is my code, I want to know what should I do for share this particular data when user press on share button

Here I imported all library

import React, { Component, useState, useEffect } from "react";
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  ListView,
  TouchableOpacity,
  Share,
} from "react-native";
import Icon from "react-native-vector-icons";
import SadJson from "./sad.json";

var d = SadJson.sad;

const sad = ({ navigation }) => {
  const [data, setData] = useState([]);

  // This is share method code
  const onShare = async () => {
    try {
      const result = await Share.share({
        message: data.toString(d),
      });
    } catch (error) {
      alert(error.message);
    }
  };

  useEffect(() => {
    setData(d);
  });

  // This is return section where I use Flatlist for show Data
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        removeClippedSubviews={false}
        renderItem={({ item }) => (
          <View>
            <Text>
              {item.id}
              {item.title}
            </Text>

            <View style={{ flexDirection: "row" }}>
              <TouchableOpacity style={styles.sharebtn} onPress={onShare}>
                <Text>Share{item.id}</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.sharebtn}>
                <Text>Copy</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
      />
    </View>
  );
};

// This is Style section
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
  },

  sharebtn: {
    width: 60,
    height: 30,
    padding: 5,
    backgroundColor: "#2BDB25",
    borderRadius: 10,
  },
  btntext: {
    textAlign: "center",
  },
});

export default sad;

Please help me and Please let me know how to share this data on social media or any other App

Answer 1

If I understand your question correctly, you want to share a specific data element from data state. To pass a specific object from your data to Share.share then I suggest you pass the entire item object to your onShare handler from the map callback in the FlatList.

Update onShare to be consume the item object. Also, since you don't actually use the awaited on return value this function probably doesn't need to be async (You can add it back if you really do await values to use later).

const onShare = item => {
  try {
    const result = await Share.share({
      message: item,
    });
  } catch (error) {
    alert(error.message);
  }
};

And pass the item to the callback

<TouchableOpacity
  style={styles.sharebtn}
  onPress={() => onShare(item)} // <-- pass item to callback
>
  <Text>Share{item.id}</Text>
</TouchableOpacity>

Another suggestion - Since your data is static there isn't much need to populate your state from the useEffect hook, especially since that effect hasn't any dependencies and updates state, unless you've a copy/paste issue, as written this effect looks like it should trigger render looping. You can just populate your state with an initial value.

const d = SadJson.sad;
...
const [data, setData] = useState(d); // <-- initialize state with the imported JSON data