Cubes
Delightfully simple building blocks for quick prototyping
👨🔬 Experiment Now!
Start swiftly
🏃 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 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:
👏 Contributing
If you like Cubes but think it could benefit from some improvements, feel free to consult our contributing guide or open an issue.