Cubes

Delightfully simple building blocks for quick prototyping ⚡

• 👨‍🔬 Experiment Now!
• 🏃 Getting Started
  • Usage
    • Expo
    • Start Project
    • AppProvider
• 📚 Documentation (Storybook)
• 👨‍🎓 Examples
• 👏 Contributing

👨‍🔬 Experiment Now!

Start swiftly ⚡ using Playroom, where you can build prototypes easily and share them with the URL, without hassle or account creation.

🏃 Getting Started

Using expo-cli and npx, use create-cubes starter template:

npx expo init --template https://github.com/Trampoline-CX/create-cubes.git

Usage

After your project creation, there are some things worth mentioning to help you get started.

Expo

A Cubes project uses Expo (React Native), to prototype Apps on Web, Android and iOS with a unique code base. For Android and iOS, you can install the Expo App on the Play Store or App Store and then scan the barcode when starting the project with a Phone.

Start Project

Start the project using yarn start. You can also use yarn web, yarn android or yarn ios to directly start the project on the platform of your choice (make sure to connect a device first 😉).

After being started, saving changes in your code base will update the experience directly ⚡

AppProvider

This must be the Root component (or Cube 😉) of your App (see it in App file). By default, when creating a project, your AppProvider provides a very basic Navigation Schema (read more about Navigation here).

However, you can prototype a single screen if you want by not providing a Navigation Schema and embedding your Screen content directly in AppProvider.

const MyScreen = () => (
  <AppProvider>
    <Screen>
      <TopBar />
      <Screen.Content>
        <DisplayText>See, No Navigation!</DisplayText>
      </Screen.Content>
    </Screen>
  </AppProvider>
)

📚 Documentation (Storybook)

All Cubes (components), along with their properties and usage, are documented in our Storybook. There is also extra documentation there 🤫

If you don't know Storybook, it's a cool place where you can document your components and design guidelines. Learn more on their website!

👨‍🎓 Examples

Here is a basic Example of an App Prototype using Cubes:

• Basic Sandbox

👏 Contributing

If you like Cubes but think it could benefit from some improvements, feel free to consult our contributing guide or open an issue.