Inbox for Trello. A super simple React Native app: https://sourdough.dev/crafting-your-own-tools

App.tsx

import axios from 'axios'; // yarn add axios
import React, { useState } from 'react';
import {
  View,
  StatusBar,
  TextInput,
  ToastAndroid,
  Text,
  TouchableHighlight,
  TouchableOpacity
} from 'react-native';

// Config Settings
const TRELLO_API_URL = 'https://api.trello.com/1';
const TRELLO_BOARD_ID = ''; // Grab the ID from your board, just add .json to the end of the URL
const TRELLO_API_KEY = '';
const TRELLO_API_TOKEN = '';

// Support LISTS
const LIST_NAME_INBOX = 'Inbox';
const LIST_NAME_THIS_WEEK = 'This Week';
const LIST_NAME_TODAY = 'Today';

const DEFAULT_LIST_NAME = LIST_NAME_INBOX;

const App = () => {
  const [cardText, setCardText] = useState<string|undefined>(undefined);
  const [selectedListName, setSelectedListName] = useState<string>(DEFAULT_LIST_NAME);

  return (
    <View style={{ backgroundColor: "black", flex: 1, flexDirection: "column" }}>
      <StatusBar backgroundColor="black" barStyle="light-content" />
      <View style={{ flex: 1, flexDirection: "column", paddingTop: 20, justifyContent: "space-between" }}>
        <View style={{ flex: 3, flexDirection: "row" }}/>
        <View style={{ flex: 1, flexDirection: "row", paddingLeft: 12, paddingTop: 10 }}>
          <View style={{paddingHorizontal: 8, paddingLeft: 5}}>
            <TouchableOpacity
              style={{alignItems: "center"}}
              onPress={() => { setSelectedListName(LIST_NAME_INBOX) }}
              >
              <Text style={{color: (selectedListName == LIST_NAME_INBOX ? "white" : "#717171"), fontSize: 20}}>{LIST_NAME_INBOX}</Text>
            </TouchableOpacity>
          </View>
          <View style={{paddingHorizontal: 8}}>
            <TouchableOpacity
              style={{alignItems: "center"}}
              onPress={() => { setSelectedListName(LIST_NAME_THIS_WEEK) }}
              >
              <Text style={{color: (selectedListName == LIST_NAME_THIS_WEEK ? "white" : "#717171"), fontSize: 20}}>{LIST_NAME_THIS_WEEK}</Text>
            </TouchableOpacity>
          </View>
          <View style={{paddingHorizontal: 8}}>
            <TouchableOpacity
              style={{alignItems: "center"}}
              onPress={() => { setSelectedListName(LIST_NAME_TODAY) }}
              >
              <Text style={{color: (selectedListName == LIST_NAME_TODAY ? "white" : "#717171"), fontSize: 20}}>{LIST_NAME_TODAY}</Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={{ flex: 10, flexDirection: "row", marginTop: 2 }}>
          <TextInput
            style={{height: 50, fontSize: 24, color: "white", paddingLeft: 18, marginTop: 10}}
            placeholder="Add a new card"
            placeholderTextColor={"#717171"}
            value={cardText}
            onChangeText={(cardText: string) => (setCardText(cardText))}
            onSubmitEditing={() => (createCard(cardText, selectedListName), setCardText(undefined), setSelectedListName(DEFAULT_LIST_NAME))}
          />
        </View>
      </View>
    </View>
  );
};

function createCard(card: string|undefined, listName: string): void {
  axios.get(
    `${TRELLO_API_URL}/boards/${TRELLO_BOARD_ID}?lists=open&list_fields=name&fields=name,desc&key=${TRELLO_API_KEY}&token=${TRELLO_API_TOKEN}`,
  ).then((response: any) => {
    response.data["lists"].forEach((list: any) => {
      if (list["name"] == listName) {
        axios.post(`${TRELLO_API_URL}/cards`, {
          "key": TRELLO_API_KEY,
          "token": TRELLO_API_TOKEN,
          "name": card,
          "idList": list["id"]
        }).then((): any => {
          ToastAndroid.show(`Card added to ${listName}`, ToastAndroid.SHORT);
        }).catch((): any => {
          ToastAndroid.show('Unable to add card', ToastAndroid.SHORT);
        })
      }
    });
  }).catch(() => {
    ToastAndroid.show('Unable to fetch Trello lists', ToastAndroid.SHORT);
  })
}

export default App;