Skip to main content

Installation

Downloading & extracting the package#

  • After you complete the purchase, we will share the details over an email.
  • Open your email, download & extract the bundle to access the project directory. It contains 100+ screens represented by Storybook files stored in the categorically managed modules.
  • After extracting, you'll see these files and folders:
    • screens: This folder is a Storybook project containing categorically divided sets of screens, implemented in Storybook format for your quick browsing and usage as a base for implementing a similar screen in your app. With our years of experience of building apps, we have handpicked the most commonly used screens in apps and have provided those in this bundle. Happy Building ๐Ÿ› .
    • starter-kits: This folder contains pre-configured and bootstrapped starter kits built using all your favourite frameworks/libraries like expo, React, React Native and NextJS. Using one of these starter kits saves your a ton of time as these are already configured to use the bundle provided and you can simply yarn install and get going ๐Ÿš€.
    • figma: This is the original Figma design file containing the desktop and mobile designs for all the screens. The design team at NativeBase Startup+ has carefully crafted this with a lot of practical research and love โค๏ธ.
    • README.md: A small readme to guide you through the package.

Viewing Screens#

  1. Go to the storybook project

    cd screens
  2. Install all the dependencies

    yarn

    This will install install all the project dependencies from npm.

  3. Run the app

    yarn start

    This starts the Expo app and opens up Expo DevTools in the browser which also works as a a graphical interface for Expo CLI. You can see the buttons to open the app in web, iOS or Android on this page.

    After you open the app, you'll see a bottom bar which is part of the Storybook UI. You can click on NAVIGATOR button to browse all the screens. If you want to disable this UI, you can go to storybook/index.js and change onDeviceUI value to false.