Notorious Penguin Magicians

    @stryberventures/stryber-react-native-ui-components
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Stryber React Native UI Components (Matterhorn)

    Docs

    Go to the Docs

    In the docs you can find all components preview and usage

    Getting started

    Installation

    1. Install package to RN project by typing the following command in the terminal:
    npm install @stryberventures/stryber-react-native-ui-components
    1. Then you need to create react-native.config.js in project root dir with code:
    module.exports = {
      assets: [
        './node_modules/@stryberventures/stryber-react-native-ui-components/src/static/fonts',
      ],
    };

    And run react-native link to link fonts that we use in package.

    1. Add following packages to your project package.json file(if project hasn't them already):
        "react-native-date-picker": "3.0.0",
        "react-native-linear-gradient": "2.5.6",
        "react-native-reanimated": "1.3.0",
        "react-native-svg": "9.13.2",
        "react-native-gesture-handler": "^1.5.2",

    Then run in terminal:

    rm -rf node_modules && npm i

    and

    cd ios && pod install

    Integration(optional)

    Check our docs for the best integration process: Integration Docs

    Bit: use each component as separate library

    Setup Bit in your project

    To use components from our Bit.dev/Stryber/Matterhorn-Native repo you have to create .npmrc file in your project's root directory, and place the following code inside:

    @bit:registry=https://node.bit.dev
    always-auth=true

    Add following packages to your project package.json file(if project hasn't them already):

        "@react-native-community/async-storage": "1.6.3",
        "react-native-date-picker": "3.0.0",
        "react-native-linear-gradient": "2.5.6",
        "react-native-reanimated": "1.3.0",
        "react-native-svg": "9.13.2",
        "rn-fetch-blob": "0.11.2",
        "react-native-gesture-handler": "^1.5.2",

    Bit CLI setup

    To install Bit CLI use:

    npm install bit-bin -g

    (if you got error on Mac try: sudo npm install bit-bin -g)

    Add new component to Bit repo

    To add new component to our bit repo run in terminal(after you've created it):

    bit add src/components/CompoentFolderName

    Where:

    • src/components/CompoentFolderName – path to your component.

      Here CompoentFolderName is the name of the folder where you store your component

    Update existing component

    To update existing component workflow stays the same as it was. All changes will be automatically applied to component in bit repo after your changes will be merged to dev branch(you can check whole process in github action bit-export.yml).

    Build Bit component(optional)

    You can build Bit component locally by running:

    bit build

    You will find your component in /dist folder

    How to Run in Storybook Server mode (for demo and development purposes)

    Run following commands in the terminal:

    yarn install
    yarn storybook

    To run on iOS simulator:

    • you must have xCode
    • you must have Cocoapods

    Run following command in the terminal:

    cd ios
    pod install
    cd ..
    react-native run-ios

    To run iPhone simulator use:

    react-native run-ios
    

    or (to specify simulator)

    react-native run-ios --simulator=“iPhone 11”
    

    To run on Android:

    • open Android simulator

    Run following command in the terminal:

    react-native run-android

    How to test library locally before publish

    We will test package in /examples folder that will be in package root dir:

    1. Run in terminal:
    react-native init examples
    1. After that is finished, run the npm pack command to generate a file that will have a naming convention similar to stryberventures-stryber-react-native-ui-components-0.0.3.tgz

    2. Then, go into the /examples folder and install your component by running

    npm i ../stryberventures-stryber-react-native-ui-components-0.0.3.tgz

    or

    yarn add ../stryberventures-stryber-react-native-ui-components-0.0.3.tgz
    

    in the terminal. Remember to replace 0.0.3 respectively.

    Install

    npm i @stryberventures/stryber-react-native-ui-components

    DownloadsWeekly Downloads

    133

    Version

    1.0.0

    License

    none

    Unpacked Size

    5.81 MB

    Total Files

    1151

    Last publish

    Collaborators

    • davidlahoz
    • davidpaez
    • jhuebner
    • vladstryber
    • sychevskiy
    • so1ua
    • pavel.stryber
    • aliku