react-native-jigsaw

Draftbit's component library used inside our Builder. It's based on React Native Paper but allows us to extend and empower our users with more features ⚡️

Differences between React Native Paper and Jigsaw

• Embedded themes. Jigsaw has a very robust theming system that is directly integrated into our builder. React Native Paper is based on Material Design where ours is more generalized for both iOS and Android. That doesn't make it any better or worse, it just means ours is directly integrated into our product and by controlling the library we can make changes as often as we need

• Different components & use cases. React Native Paper is really great for building Material-style apps where we use Jigsaw to build any type of app. You'll find a different series of components for different use cases

We love React Native Paper and even plan on supporting it one day as a different component library, Jigsaw just allows us to deeply embed components, props, themes directly into the Draftbit platform

Differences between @draftbit/ui and @draftbit/web

@draftbit/web is only used for our internal builder. Because we're using @expo/vector-icons and React Native's way of compiling files, this isn't compatible inside create-react-app. The fix is to publish a separate @draftbit/web file with Icon.web.tsx being the Icon.tsx file and Icon.native.tsx being the Icon.tsx file.

Both icon files live inside files/ top level, next to src.

Installation

npm install @draftbit/ui

Publishing

After your last commit, run npm version. Probably minor or patch. We only run major for major Expo releases.

Then run:

yarn publish:both

If that doesn't work, you can manually run the script that lives inside publish.sh. Either directly: ./publish.sh or by copying the steps within that file

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Adding components

Primitives (Text, View)

Most of the primitives should already be here. If a component with no actual logic needs to be added, you can add that into src/mappings (see that folder for an example)

Custom Components

All components live inside src/components/MyComponent.ts. Add your component, add the required SEED_DATA and you should be good to go!

Seed Data

Seed data is how we know what to render and support inside the product. It takes on this format. src/core/component-types.js will show you the different GROUPS, PROP_TYPES, FORM_TYPES, and other fields you might need.

group: GROUPS.advanced,
name: "textBreakStrategy",
label: "textBreakStrategy",
description:
"Set text break strategy on Android API Level 23+, possible values are simple, highQuality, balanced The default value is highQuality.",
options: ["simple", "highQuality", "balanced"],
editable: true,
required: false,
formType: FORM_TYPES.flatArray,
propType: PROP_TYPES.STRING,
defaultValue: "highQuality",

License

MIT