Adding Packages with AI Chat

When you build an app with Draftbit, you’re really building an Expo React Native app under the hood. That means you can use thousands of open‑source packages (pre‑built pieces of code) to add features like icons, maps, analytics, payments, and more—without starting from scratch.

You don’t have to install packages manually. Instead, you can ask the AI in AI Chat to add and configure packages for you.

What is a package?

A package is a reusable bundle of code that someone else has written and shared. You install it once and then use it across your app—similar to adding a plugin or extension in other tools.

Some common types of packages:

• UI & components: Buttons, icons, date pickers, carousels, maps.
• Data & APIs: Tools for calling APIs, managing data, caching, or real‑time updates.
• Auth & security: Login flows, OAuth, and other authentication helpers.
• Expo & device features: Camera, location, push notifications, file system, etc.
• Utilities: Helpers for dates, formatting, validation, and more.

Under the hood, Draftbit uses NPM packages (from the Node.js ecosystem) and, because apps are built on Expo, many of the best options are Expo packages maintained by the Expo team.

Expo packages vs. other packages

Because Draftbit apps run on Expo React Native, it’s usually safest to prefer:

• Expo‑maintained packages (they often start with expo-, like expo-camera).
• React Native packages that are known to work well with Expo.

These packages:

• Are more likely to “just work” with minimal configuration.
• Are kept up‑to‑date with the latest Expo SDKs.
• Often have simpler installation and setup steps.

Packages that require heavy custom native code or complex build steps may not be a good fit. If you’re unsure, you can ask the AI to check compatibility with Expo before installing.

Auto‑linking or Expo plugins required

Most modern React Native/Expo packages support auto‑linking (they register themselves automatically) or provide an Expo config plugin that Expo uses to configure the native project for you.

When you’re considering a package, ask the AI to help you check:

• Does it support auto‑linking?
• Does it have an Expo config plugin?

If the answer to both is “no”, it’s usually not a good fit for a Draftbit/Expo app and you should look for an alternative that does.

Asking AI to add a specific package

You can tell the AI exactly which package to install. In the AI Chat, try prompts like:

“Install the @react-navigation/native package and set it up for an Expo React Native app.”

“Add the expo-camera package so I can take photos in my app.”

“Install @tanstack/react-query and set it up for managing API data in my app.”

The AI will:

1. Add the package to your project

   It updates your app’s dependencies so the package is installed.

2. Set up basic configuration

   For many packages, the AI can add setup code, providers, or configuration files so it’s ready to use.

3. Show you how to use it

   You can then ask the AI for examples of how to use the new package on a screen or inside the Code Editor.

If you don’t know the exact package name, that’s okay—just describe what you want to do.

Getting advice on packages to use

You can also ask the AI to research and recommend a package for what you’re trying to build. For example:

“I want to add a calendar picker to my app. Please suggest a good Expo‑compatible package, explain the tradeoffs, and then install the one you recommend.”

“I need charts for analytics. Find a React Native or Expo‑compatible charting package and set it up for me.”

“Help me choose a package for handling dates and time zones in an Expo app. Compare at least two options.”

Behind the scenes, the AI can look at:

• reactnative.directory – a curated directory of React Native libraries.
• npmjs.com – the main registry where packages are published.
• GitHub – where many packages are hosted and documented.

You don’t need to browse these sites yourself, but it can be helpful if you want to see screenshots, issues, or release history. You can always ask:

“Can you share the GitHub link and main documentation page for the package you just installed?”

Different package types

If a package feels confusing or “too developer‑y”, ask the AI to explain it like a feature:

“Explain what the expo-secure-store package does in simple terms and how it might help my app.”

“What does @react-native-async-storage/async-storage do, and when should I use it?”

Useful ways to ask:

• “What problem does this package solve?”
• “Is this the right package for Expo?”
• “What are the pros and cons compared to another option?”

The AI can also point out when a package:

• Is old or unmaintained.
• Doesn’t work well with the latest Expo SDK.
• Requires extra native configuration that might not be ideal in Draftbit.

Using an installed package

Once the AI has installed and set up a package, you can ask it to wire it into your app. Examples:

• “Use the expo-camera package to add a Take Photo button on my Profile screen.”
• “Use the charting package you installed to show a simple line chart on the Analytics screen.”
• “Use the date library you added to format dates in my Orders list.”

You can also ask the AI to:

• Add example code to the Code Editor.
• Create new screens that use the package.
• Refactor existing screens to use the package instead of hard‑coded logic.

Native vs web behavior

Some packages are designed primarily for native mobile and may behave differently (or not work at all) on the web. For example, audio or media packages like React Native Track Player can work great in native previews but require platform‑specific handling on web (such as falling back to a web audio or video solution).

If you’re targeting web as well as iOS/Android, ask the AI:

• “Does this package support web?”
• “If not, can you add a web‑specific fallback that uses a web‑friendly library or browser API instead?”

Good prompts for managing packages

Here are some ready‑to‑use prompts you can copy into AI Chat:

• “Install a popular, well‑maintained Expo‑compatible package for showing icons and set it up. Then update my app to use it on the Home screen.”
• “Find a React Native package for displaying maps that works with Expo, explain your choice, then install and set it up.”
• “List the main packages you’ve installed in my project so far and briefly describe what each one does.”
• “I want to add analytics. Recommend an Expo‑friendly analytics provider, explain the tradeoffs (pricing, features, complexity), and install the package you think is best.”
• “Check whether the react-native-xyz package is compatible with Expo and, if not, suggest an alternative that is.”

Best practices

• Prefer Expo‑compatible packages: Ask the AI directly: “Is this package recommended for Expo?”.
• Install one thing at a time: It’s easier to test changes and undo them if needed.
• Ask for a summary: After working with packages for a while, ask: “Summarize all the main packages we’ve added and what they’re used for.”
• Keep an eye on docs: When in doubt, ask the AI to show you the official docs or GitHub page.
• Use AI for cleanup: If something feels messy or unused, ask: “Are there any packages or imports we can remove safely?”

With AI Chat, you can treat packages like building blocks you ask for by name or by need—the AI helps you choose, install, and use them so you can stay focused on your app’s experience.