CODEWITHSUNDEEP
javascriptreact-native
eliasismyalias
eliasismyalias

Reputation: 23

How to copy FlatList text item to Clipboard onPress

Gonna try to make this as detailed as I can since I'm new to React Native and maybe this'll help someone else as well ✨.

I'm using the React Native Super Grid library, which internally uses FlatList and SectionList, to render a grid layout. The grid is populated with text via props from a separate const

What I'm trying to do is: When a user taps any item in the FlatList, the item that was tapped is copied to the clipboard and an alert is shown confirming it was copied.

What's happening right now: Each item is tappable & the correct alert is showing onPress confirming that you've copied to your clipboard, BUT nothing is actually being written to the clipboard. Just to make sure that writeToClipboard is working I have a static message in there that just says "WELL AT LEAST THE CLIPBOARD WORKS," so if you tap any item, that static message is successfully copied to the clipboard. I'm just not sure of how to copy the specific item that was tapped to the clipboard.

Here's the code for the grid component: 

import React, { Component } from "react";
import {
  StyleSheet,
  Alert,
  View,
  Text,
  TouchableOpacity,
  Clipboard,
  Button,
  onPress
} from "react-native";
import { FlatGrid } from "react-native-super-grid";

class Emojigrid extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "WELL AT LEAST THE CLIPBOARD WORKS",
      clipboardContent: null
    };
  }

  writeToClipboard = async () => {
    await Clipboard.setString(this.state.text);
    alert("Boom, Copied");
  };

  render() {
    return (
      <FlatGrid
        itemDimension={130}
        items={items}
        style={styles.gridView}
        // staticDimension={300}
        // fixed
        spacing={2}
        renderItem={({ item, index }) => (
          <View style={[styles.itemContainer, { backgroundColor: "#F7F7F7" }]}>
            <TouchableOpacity onPress={this.writeToClipboard}>
              <Text style={styles.itemName}>{item.name}</Text>
            </TouchableOpacity>
          </View>
        )}
      />
    );
  }
}

export default Emojigrid;

const items = [
  { name: "¯_(ツ)_/¯" },
  { name: "ʕ·͡ᴥ·ʔ" },
  { name: "•`_´•" },
];

const styles = StyleSheet.create({
  gridView: {
    marginTop: 0,
    marginBottom: 400,
    flex: 1
  },
  itemContainer: {
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 0,
    height: 125
  },
  itemName: {
    fontSize: 18,
    color: "black",
    fontWeight: "400"
  }
});

Thinking the answer is probably quite obvious, but any help is much appreciated!

Upvotes: 2

Views: 948

Answers (1)

johnborges
johnborges

Reputation: 2533

Your writeToClipboard function needs to accept an argument.

writeToClipboard = async (text) => {
  await Clipboard.setString(text);
  alert("Boom, Copied");
};

And pass that argument where you call it.

<TouchableOpacity onPress={() => this.writeToClipboard(item.name)}>

Upvotes: 2

Related Questions