Customizable set of components for React Native applications

Overview

Shoutem UI

Shoutem UI is a set of styleable components that enables you to build beautiful React Native applications for iOS and Android. All of our components are built to be both composable and customizable. Each component has a predefined style that is compatible with the rest of the Shoutem UI, which makes it possible to build complex components that look great without the need to manually define complex styles.

Install

These instructions are valid for React Native 0.60.0 and higher. If you're running a lower version, please use v1.X.X.

$ npm install --save @shoutem/ui

We have a postinstall script which will add @shoutem/ui's native dependencies to your root package.json in order to support autolinking and pod installation.

Docs

All the documentation is available on the Developer portal.

Community

Join our community on Facebook. Also, feel free to ask a question on Stack Overflow using "shoutem" tag.

Examples

To see how Shoutem UI works, you can:

  • include the Examples component into your React Native app or
  • run Restaurants app in examples folder.

Examples component

If you are using Expo, see this project for example usage. Otherwise, follow the steps below.

Create new React Native project and locate to it:

$ react-native init HelloWorld && cd HelloWorld

Install @shoutem/ui in your project:

$ npm install --save @shoutem/ui

Now, simply copy the following to your App.js files of the React Native project:

import React, { PureComponent } from 'react';
import { Examples } from '@shoutem/ui';

export default class App extends PureComponent {
  render() {
    return (
      <Examples />
    );
  }
}

Finally, run the app!

$ react-native run-ios

To see other components, just import them from @shoutem/ui and render them.

You can also use standard React Native components in your layouts anywhere you want, but they will not inherit either the theme or the parent styles, so you will need to style them manually.

Restaurants app

Clone the Shoutem UI repository:

git clone https://github.com/shoutem/ui.git

Locate to RestaurantsApp folder:

cd ui/examples/RestaurantsApp

Install and link dependencies:

npm install
react-native link

Finally, run the app!

react-native run-ios
react-native run-android

UI Toolkit

Shoutem UI is a part of the Shoutem UI Toolkit that enables you to build professional looking React Native apps with ease.

It consists of three libraries:

License

The BSD License Copyright (c) 2016-present, Shoutem

Comments
  • undefined is not an object (evaluating '_reactNative.NavigationExperimental.Header')

    undefined is not an object (evaluating '_reactNative.NavigationExperimental.Header')

    Error: undefined is not an object (evaluating '_reactNative.NavigationExperimental.Header') gets thrown when the app is built and run.

    Steps I Took: Initialize an empty react native project Add yarn add @shoutem/ui'react-native linkUse the '<Examples /> Component react-native run-android

    My System Configuration

    react-native --version                                                                                                                      22:10:05
        react-native-cli: 2.0.1
        react-native: 0.44.0
    

    Package.json

    {
    	"name": "testShoutem",
    	"version": "0.0.1",
    	"private": true,
    	"scripts": {
    		"start": "node node_modules/react-native/local-cli/cli.js start",
    		"test": "jest"
    	},
    	"dependencies": {
    		"@shoutem/ui": "^0.13.0",
    		"react": "16.0.0-alpha.6",
    		"react-native": "0.44.0"
    	},
    	"devDependencies": {
    		"babel-jest": "19.0.0",
    		"babel-preset-react-native": "1.9.1",
    		"jest": "19.0.2",
    		"react-test-renderer": "16.0.0-alpha.6"
    	},
    	"jest": {
    		"preset": "react-native"
    	}
    }
    
    
    bug feature request 
    opened by aswinmohanme 42
  • Unrecognized font family 'Rubik-Regular'

    Unrecognized font family 'Rubik-Regular'

    Error using app Unrecognized font family 'Rubik-Regular'. App works fine after dismissing. Just posting this since I could not resolve it through other issues I found online.

    Also, unable to load RestaurantsApp until I upgraded RN 0.38.

    Will post a PR if I am able to resolve.

    opened by relaxedtomato 39
  • Removed NavigationExperimental dependency

    Removed NavigationExperimental dependency

    Fixes this issue: https://github.com/shoutem/ui/issues/241

    RN 0.44.0 eliminated NavigationExperimental, so I copied their style for navigation bar height and put it into the default variables to make it overwritable.

    opened by JulianKingman 36
  • Error when running the application on ios simolator

    Error when running the application on ios simolator

    An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2): Failed to install the requested application An application bundle was not found at the provided path. Provide a valid path to the desired application bundle. Print: Entry, ":CFBundleIdentifier", Does Not Exist

    Error in config:

    [Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier #/Users/***/Desktop/ui/examples/RestaurantsApp/ios/build/Build/Products/Debug-iphonesimulator/ShoutemRestaurants.app/Info.plist Print: Entry, ":CFBundleIdentifier", Does Not Exist

    opened by rachip 17
  • Error saving ui-module

    Error saving ui-module

    Hi, with the /cli module failing I was trying to accomplish some testing with the UI-module atleast, I've setup all the dependencies and when I'm running npm i -S @shoutem/ui I get this error....

    npm WARN deprecated [email protected]: This package is deprecated. Use Object.assign.
    
    > @shoutem/[email protected] postinstall C:\Users\jb\Documents\Appar\Bira\node_modules\@shoutem\ui
    > react-native link
    
    Looks like you installed react-native globally, maybe you meant react-native-cli?
    To fix the issue, run:
    npm uninstall -g react-native
    npm install -g react-native-cli
    npm ERR! Windows_NT 10.0.10586
    npm ERR! argv "C:\\nodejs\\node.exe" "C:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "i" "-S" "@shoutem/ui"
    npm ERR! node v6.7.0
    npm ERR! npm  v3.10.3
    npm ERR! code ELIFECYCLE
    
    npm ERR! @shoutem/[email protected] postinstall: `react-native link`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the @shoutem/[email protected] postinstall script 'react-native link'.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the @shoutem/ui package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR!     react-native link
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR!     npm bugs @shoutem/ui
    npm ERR! Or if that isn't available, you can get their info via:
    npm ERR!     npm owner ls @shoutem/ui
    npm ERR! There is likely additional logging output above.
    
    npm ERR! Please include the following file with any support request:
    npm ERR!     C:\Users\jb\Documents\Appar\Bira\npm-debug.log
    

    Npm version: 3.10.3 Node version: v6.7.0 OS: Windows

    opened by jackbillstrom 16
  • dependency error: react-native-linear-gradient

    dependency error: react-native-linear-gradient

    "react": "16.0.0-alpha.12", "react-native": "0.47.2",

    Fix: https://github.com/react-native-community/react-native-linear-gradient/issues/202

    info missing 
    opened by dviluk 15
  • Enhance HorizontalPager with a TabBar

    Enhance HorizontalPager with a TabBar

    ref: https://github.com/shoutem/ui/issues/165

    This pr has to purpose to give access to you to had Tab bar with your Horizontal Pager like that: demo-fb

    For that, the prop renderOverlay provide more informations about the ScrollView:

    • scrollToPage: A function to scroll to a given index scrollToPage(index)
    • scrollValue: An Animated.Value (from 'react-native) that has the scroll offset
    • selectedIndex: A number that is the index where you are right now

    The thing is that you have to listen to the ScrollValue to update your render depending of the offset.

    To listen to the scrollValue: (I'm using recompose)

      withState('scroll', 'setScroll', 0),
      lifecycle({
        componentDidMount() {
          this.props.scrollValue.addListener(scrollValue =>
            this.props.setScroll(scrollValue),
          );
        },
      }),
    

    Now, you have the offset of the scrollView inside the state scroll.value and it'll update your render each time that scrollValue change !

    Now, use this value to display correctly your component of the tabbar, maybe you need to calculate some more stuff if you want to modify the color, or the opacity, or the position of the tabs.

    For example, I'll give you an example if you want to change the opacity. The selected tab will have an opacity of 1, the others of 0.30. Here is my function:

    function tabOpacity(scroll, activeTab, currentTab) {
      const disabledOpacity = 0.30;
    
      const page = floor(scroll);
      const offset = ((scroll - page) * (1 - disabledOpacity)) + disabledOpacity;
    
      if (currentTab === activeTab) {
        if (currentTab === page) {
          return (1 + disabledOpacity) - offset;
        }
        return offset;
      }
    
      if (currentTab === activeTab - 1) {
        if (currentTab === page) {
          return (1 + disabledOpacity) - offset;
        }
        return disabledOpacity;
      }
    
      if (currentTab === activeTab + 1) {
        if (currentTab === page + 1) {
          return offset;
        }
        return disabledOpacity;
      }
    
      return disabledOpacity;
    }
    

    Then for each tab, I'll use this function to display the correct opacity and I'll assign an onPress function that redirect you in the correct index

          map(TAB_HOME_MENU, (name, i) =>
            $(View, {
              styleName: 'flexible',
              style: {
                opacity: tabOpacity(scroll.value, selectedIndex, i),
              },
            },
              $(Button, { onPress: () => scrollToPage(i) },
                $(Icon, { name }),
              ),
            ),
          ),
    

    And here we go 🎉 (it's a little laggy because I'm in developement mode) fevr -17-2017 20-30-46

    You can disable or not the animation during the scrollToPage with the animated prop of HorizontalPager. If it's false, i'll just redirect without animation to the specified index, if it's true, it'll make the scrolling animation !

    I know that we can enhance it more ! But it's just to start on something 😊 (I've made a little fix in ListView)

    The library https://github.com/skv-headless/react-native-scrollable-tab-view was a very good help !

    opened by martinezguillaume 15
  • Prop-types + dependency updates

    Prop-types + dependency updates

    I created this PR to switch from React.PropTypes to the prop-types library for proptype validation (needed in RN 0.44+). One package I couldn't update is the shoutem fork of lightbox (https://github.com/shoutem/react-native-lightbox), which still uses proptypes (I think the original package has been updated to remove proptypes, and there's an outstanding PR on react-native-view-transformer to switch it over https://github.com/ldn0x7dc/react-native-view-transformer/issues/13).

    opened by JulianKingman 14
  • create-react-native-app not working with shoutem-ui

    create-react-native-app not working with shoutem-ui

    Steps to reproduce:

    $ npm install -g create-react-native-app
    $ create-react-native-app my-app
    $ cd my-app
    $ yarn add @shoutem-ui
    

    Introduce the fix to eliminate ExperimentalNavigation

    Replace App.js with

    import React from 'react';
    import { StyleSheet, Text, View, Button } from 'react-native';
    import { Font, AppLoading} from 'expo';
    import { Title,Caption } from '@shoutem/ui';
    
    export default class App extends React.Component {
      state = {
          fontsLoaded: false,
        };
    
      async componentWillMount() {
        await Font.loadAsync({
          'Rubik-Black': require('./node_modules/@shoutem/ui/fonts/Rubik-Black.ttf'),
          'Rubik-BlackItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf'),
          'Rubik-Bold': require('./node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf'),
          'Rubik-BoldItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf'),
          'Rubik-Italic': require('./node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf'),
          'Rubik-Light': require('./node_modules/@shoutem/ui/fonts/Rubik-Light.ttf'),
          'Rubik-LightItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf'),
          'Rubik-Medium': require('./node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf'),
          'Rubik-MediumItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf'),
          'Rubik-Regular': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf'),
          'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf'),
        });
    
        this.setState({fontsLoaded: true});
      }
    
      render() {
        if (!this.state.fontsLoaded) {
          return <View><Text>Loading</Text></View>;
        }
        return (
          <View style={styles.container}>
            <Title>CRNA</Title>
            <Caption>with shoutem-ui</Caption>
            <Text style={{ fontFamily: 'Rubik-Light', fontSize: 14 }}>Open up App.js to start working on your app!</Text>
            <Text>Changes you make will automatically reload.</Text>
            <Text>Shake your phone to open the developer menu.</Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });
    

    Start with

    yarn start
    

    Error Message

    this.updater.enqueueCallBack is not a function. (In 'this.updater.enqueueCallback(this,callback,'setState')','this.update.enqueueCallback' is undefined)
    
    question info missing 
    opened by jackverstappen 12
  • Invalid props.style key 'heroAnimation' supplied to AnimatedComponent

    Invalid props.style key 'heroAnimation' supplied to AnimatedComponent

    Hi, I get this warning using a Tile component within a GridRow.

    I know its just a warning but is there anything to be done to get rid of it?

    I'm using the commit which removes the use of NavigationExperimental

    Thanks

    question 
    opened by tafelito 11
  • UNMET PEER DEPENDENCY when npm install

    UNMET PEER DEPENDENCY when npm install

    I'm trying to install shoutem ui but I get some errors.

    npm install --save @shoutem/ui

    Then I receive this error in the console:

    +-- @shoutem/[email protected]
    | +-- UNMET PEER DEPENDENCY [email protected]^15.0.0
    | +-- [email protected]  (git://github.com/shoutem/react-native-lightbox.git#4e58b9b1aca166142d69b161ff511efc3358ff9f)
    | | `-- [email protected]  (git://github.com/ldn0x7dc/react-native-view-transformer.git#f7e028b6566022deac4e523052e74c2c63a4af7e)
    | `-- [email protected]  (git://github.com/shoutem/react-native-transformable-image.git#7d15395ec3857571711a12bc08f24f3a96ff1cde)
    `-- UNMET PEER DEPENDENCY [email protected]
    
    npm WARN @shoutem/[email protected] requires a peer of [email protected]^15.0.0 but none was installed.
    npm WARN @shoutem/[email protected] requires a peer of [email protected]^15.1.0 but none was installed.
    npm WARN @shoutem/[email protected] requires a peer of [email protected]^15.0.0 but none was installed.
    
    

    The result is that I have "@shoutem" folder under node_modules with:

    - "@shoutem"
      - animation
      - theme
      - ui
    

    But the error is telling something wasn't installed.

    Then I link and the response is: [@shoutem/ui] - linking native dependencies When I'm using "<TextInput/>" component there are no error but there is no style as well. Print screen is attached: https://nimbus.everhelper.me/client/notes/share/861785/e7b1kwhopz9x4mivu3g0

    My package.json file look like this:

    ...
    "dependencies": {
        "@shoutem/ui": "^0.13.0",
        "firebase": "^3.7.5",
        "moment": "^2.18.1",
        "react": "16.0.0-alpha.6",
        "react-native": "0.43.1",
        "react-native-device-info": "^0.10.2",
        "react-native-fcm": "^6.2.0",
        "react-native-keyboard-aware-scroll-view": "^0.2.8",
        "react-redux": "^5.0.4",
        "redux": "^3.6.0",
        "redux-logger": "^3.0.1",
        "redux-thunk": "^2.2.0"
      },
      "devDependencies": {
        "babel-jest": "19.0.0",
        "babel-preset-react-native": "1.9.1",
        "jest": "19.0.2",
        "react-test-renderer": "16.0.0-alpha.6"
      },
      "jest": {
        "preset": "react-native"
      }
    

    I'm using windows with android studio + avd as you can see in the print screen. I tried with "@shoutem/ui": "^0.12.0" and I have the same error. Any idea? Thanks, Leo.

    opened by llioor 11
  • Bump qs from 6.9.3 to 6.9.7

    Bump qs from 6.9.3 to 6.9.7

    Bumps qs from 6.9.3 to 6.9.7.

    Changelog

    Sourced from qs's changelog.

    6.9.7

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] stringify: avoid encoding arrayformat comma when encodeValuesOnly = true (#424)
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] add note and links for coercing primitive values (#408)
    • [Tests] clean up stringify tests slightly
    • [meta] fix README.md (#399)
    • Revert "[meta] ignore eclint transitive audit warning"
    • [actions] backport actions from main
    • [Dev Deps] backport updates from main

    6.9.6

    • [Fix] restore dist dir; mistakenly removed in d4f6c32

    6.9.5

    • [Fix] stringify: do not encode parens for RFC1738
    • [Fix] stringify: fix arrayFormat comma with empty array/objects (#350)
    • [Refactor] format: remove util.assign call
    • [meta] add "Allow Edits" workflow; update rebase workflow
    • [actions] switch Automatic Rebase workflow to pull_request_target event
    • [Tests] stringify: add tests for #378
    • [Tests] migrate tests to Github Actions
    • [Tests] run nyc on all tests; use tape runner
    • [Dev Deps] update eslint, @ljharb/eslint-config, browserify, mkdirp, object-inspect, tape; add aud

    6.9.4

    • [Fix] stringify: when arrayFormat is comma, respect serializeDate (#364)
    • [Refactor] stringify: reduce branching (part of #350)
    • [Refactor] move maybeMap to utils
    • [Dev Deps] update browserify, tape
    Commits
    • 4cd0032 v6.9.7
    • e799ba5 [Fix] parse: ignore __proto__ keys (#428)
    • 02ca358 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 4a17709 [Fix] stringify: avoid encoding arrayformat comma when `encodeValuesOnly = ...
    • c0e13e9 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 4113a5f [Tests] clean up stringify tests slightly
    • 749a584 [Docs] add note and links for coercing primitive values (#408)
    • cce2082 [meta] fix README.md (#399)
    • c44f0c5 Revert "[meta] ignore eclint transitive audit warning"
    • e6cfd8b [actions] backport actions from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Not support latest version of React

    Not support latest version of React

    **npm install --save @shoutem/ui npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! [email protected]"17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^16.9.0" from @shoutem/[email protected] npm ERR! node_modules/@shoutem/ui npm ERR! @shoutem/[email protected]"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\Harpreet\AppData\Local\npm-cache\eresolve-report.txt for a full report.

    npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Harpreet\AppData\Local\npm-cache_logs\2021-08-09T05_59_35_994Z-debug.log**

    opened by jsonpreet 0
  • All icons throw `Icon with name

    All icons throw `Icon with name "____" not found within the provided set.`

    Issue with using the Icon component. No icons seem to exist by name, but the SVGs are provided in the assets directory.

    I have tried using a react-native link multiple times to no avail.

    Here is the usage:

    import React, { Component } from "react";
    
    import { NavigationBar, Icon, Title, Text } from "@shoutem/ui";
    import * as Font from "expo-font";
    export default class App extends Component {
      state = {
        fontsAreLoaded: false,
      };
    
      async _loadFonts() {
        await Font.loadAsync({
          Rubik: require("./assets/fonts/Rubik-Regular.ttf"),
          "Rubik-Black": require("./assets/fonts/Rubik-Black.ttf"),
          "Rubik-BlackItalic": require("./assets/fonts/Rubik-BlackItalic.ttf"),
          "Rubik-Bold": require("./assets/fonts/Rubik-Bold.ttf"),
          "Rubik-BoldItalic": require("./assets/fonts/Rubik-BoldItalic.ttf"),
          "Rubik-Italic": require("./assets/fonts/Rubik-Italic.ttf"),
          "Rubik-Light": require("./assets/fonts/Rubik-Light.ttf"),
          "Rubik-LightItalic": require("./assets/fonts/Rubik-LightItalic.ttf"),
          "Rubik-Medium": require("./assets/fonts/Rubik-Medium.ttf"),
          "Rubik-MediumItalic": require("./assets/fonts/Rubik-MediumItalic.ttf"),
          "Rubik-Regular": require("./assets/fonts/Rubik-Regular.ttf"),
          "rubicon-icon-font": require("./assets/fonts/rubicon-icon-font.ttf"),
        });
    
        this.setState({ fontsAreLoaded: true });
      }
    
      async componentDidMount() {
        this._loadFonts();
      }
      render() {
        if (this.state.fontsAreLoaded) {
          return (
            <NavigationBar
              centerComponent={<Title>RoomEase</Title>}
              rightComponent={<Icon name="left-arrow" />}
            ></NavigationBar>
          );
        } else {
          return null;
        }
      }
    }
    

    I assumed it may have something to do with fonts, but then realized the Icon component is just loading those SVGs, but somehow not able to find any?

    opened by CodeSpent 3
  • Icon must be an SVG file imported as a React component.

    Icon must be an SVG file imported as a React component.

    Hi, I installed shoutem ui version 4.1.0 but get this message when using Icon component: 'Icon must be an SVG file imported as a React component.'

    Icons are in node modules, but it seems like the component Icon doesn't see them. I already reseted caches ...

    opened by Jakuubzmeko 1
Releases(v6.1.0)
Owner
Shoutem
Supercharging React Native development!
Shoutem
Highly customizable and theming components for React Native

@blankapp/ui English | 简体中文 Table of Contents Introduction Features Quick Start Prerequisites Installation Run the new app Discussion License Created

Blankapp 106 Nov 10, 2022
A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.

Teaset ???? 中文完整文档版 A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control. Installation

null 2.9k Jan 9, 2023
react-native stateless functional UI components to get you up and running quickly

panza Panza is a collection of ui-components for react-native modelled after iOS. This library is currently undergoing a rewrite and will be updated s

null 258 Dec 16, 2022
UI & API Components Library for React Native

React Native Common Cross Platform React Native UI Toolkit & API Get Started Installation $ yarn add react-native-common or $ npm install react-native

Reza Ghorbani 63 Feb 14, 2022
React Native Components and APIs for the Web

React Native for Web "React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM. Documentation The do

Nicolas Gallagher 20.4k Jan 3, 2023
An "awesome" type curated list of how to use React Native and Meteor together

Awesome React Native Meteor An "awesome" type curated list of how to use React Native and Meteor together. Based on Awesome React Native which was bas

Meteor Factory 153 Oct 23, 2022
Component library for React Native

first-born Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purp

99x 272 Dec 9, 2022
An utility style framework for React Native

An utility React Native style framework for rapidly building custom user interfaces. Documentation For full documentation, please check https://osmics

OsmiCSX 222 Dec 26, 2022
A framework to test a React Native app during runtime

react-native-diagnose A react runtime diagnose component Rationale Testing native applications is complicated There are features that can only be test

Netbeast 24 Feb 14, 2022
Cross-Platform React Native UI Toolkit

Cross Platform React Native UI Toolkit Get Started Installation Follow these instructions to install React Native Elements! Usage Start using the comp

React Native Elements 23.1k Dec 31, 2022
A framework for building native Windows apps with React.

React Native for Windows Build native Windows apps with React. See the official React Native website for an introduction to React Native. React Native

Microsoft 15.2k Jan 5, 2023
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Matěj Kříž 374 Dec 30, 2022
🤖 React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Netbeast 203 Dec 1, 2022
A simple Facebook Chat Head like bubble for react native

react-native-floating-bubble A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react

null 158 Dec 16, 2022
React-Native library for the WidgetKit framework. Integrate a Widget into your App 🍏📱

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ??‍?? Installation ??‍ Usage ????‍??

Fasky 120 Dec 21, 2022
🗺 Mandelbrot set and Julia set explorer made with React and WebGL

Mandelbrot Maps Mandelbrot Maps is an interactive fractal explorer built using React and WebGL.

Joao Maio 10 Nov 18, 2022
React Native Defi Decentralized Applications(dApps)React Native Defi Decentralized Applications(dApps)

React Native Defi Decentralized Applications(dApps) Uygulaması Bu proje, Ethereum network üzerinde DeFI(Decentralized Finance) dApps P2P (Peer-to-Peer

Furkan Türkyılmaz 31 Nov 23, 2022
🍃react-leaf-polls is a set of multiple reusable and customizable poll types.

react-leaf-polls is a set of multiple reusable and customizable poll types. Install NPM npm i --save react-leaf-polls Yarn yarn add react-leaf-polls U

Wojciech Sala 20 Oct 8, 2022
🥯Papanasi is the Frontend UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components

?? Papanasi is a UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components. Is based on the Mitosis library and documented using Storybook.

Quique Fdez Guerra 387 Jan 4, 2023
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.7k Jan 5, 2023