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
npm install @draftbit/ui
See the contributing guide to learn how to contribute to the repository and the development workflow.
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)
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 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: GROUPSadvancedname: "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: truerequired: falseformType: FORM_TYPESflatArraypropType: PROP_TYPESSTRINGdefaultValue: "highQuality"