React Native Snapshot for Trello

What Is Snapshot for Trello?

Snapshot for Trello is a library for React Native that allows you to quickly add user driven bug reporting to your app that integrates with an existing Trello board. A submitted bug report is published as a new card in an existing Trello board with a screenshot, device information, and the app state at the time of capture.

Snapshot for Trello Features

Uses a device shake event to trigger the Snapshot UI Plug and play - no need to encapsulate your views in HOCs Conditional triggers (e.g. can be disabled on specific screens) Does not require any restricted permissions to function Allows the user to add a card name and description before upload Allows for a custom `state` payload - you pick what data you want to see uploaded

Future

There are a lot of nice to have features that will be added in the near future: Tests Support for uploading async data (e.g. device location) Screenshot manipulation (e.g. annotation) Support for specifying a list where to upload cards to Removal of libraries that require linking Ability to see programatically bug reports submitted by specific device id

---

1. Install via yarn:

yarn add react-native-snapshot-for-trello

2. Link the dependency libraries:

Snapshot for Trello depends on a few libraries that use native code. Link:

react-native link react-native-device-info
react-native link react-native-shake
react-native link react-native-view-shot

If for some reason linking fails, please look at manual linking instructions in each dependency library's repositories.

3. Add the Snapshot for Trello UI.

Go to the root component (e.g. App.js), import the UI and add it to the root View.

import { SnapshotForTrelloUI } from "react-native-snapshot-for-trello" // import it at the top
 
export default class App extends Component<Props> {
  render() {
    return (
      <View>
        ...
        <SnapshotForTrelloUI /> // add
      </View>
    )
  }
}

The UI by itself won't do anything. So let's configure and start Snapshot for Trello.

4. Configure and start:

You can put the configuration in the same root component or anywhere else in the app.

import { SnapshotForTrello } from "react-native-snapshot-for-trello" // import it at the top
 
SnapshotForTrello.configure({
  trelloKey: "TRELLO_API_KEY",
  trelloToken: "TRELLO_TOKEN",
  trelloBoardId: "TRELLO_BOARD_ID",
}).start()

---

Parameter	Type	Default Value	Description
trelloKey	string	""	Required. This is required for Snapshot for Trello to upload cards to Trello. You can get the key from here.
trelloToken	string	""	Required. This is also required for Snapshot for Trello to upload cards to Trello. You can get the token from here.
trelloBoardId	string	""	Required. This is the board identifier to which Snapshot for Trello will post cards. You can get the ID by going to your Trello board and looking at the url (e.g. https://trello.com/b/GLtBbPIz/my-project).
shouldIncludeDeviceInfo	boolean	true	This uses react-native-device-info library to return device information. You can choose to disable it.
getState	function	() => {}	You can provide a function for Snapshot to Trello to use to retrive any data you want uploaded along with the screenshot.
logger	function	(l) => {}	If you want to debug Snapshot for Trello, provide us with a logger. This can be (l) => console.log(l), or any other tool you use for debugging.

Example of all config parameters used (using [Reactotron]() for debugging and local state for our data store):

SnapshotForTrello.configure({
  logger: l => console.tron.log(l),
  trelloKey: "111122223333",
  trelloToken: "44445555666677778888",
  trelloBoardId: "999000",
  getState: () => this.state,
  shouldIncludeDeviceInfo: true,
}).start()

---

Snapshot for Trello is not affiliated, associated, authorized, endorsed by or in any way officially connected to Trello, Inc. (www.trello.com).