React Native Snapshot for Trello

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. |

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).