nachos-ui / nachos-ui

Nachos UI is a React Native component library.

Intro

Nachos UI is a React Native component library. Read more about how we built it on Medium.

Features:

• Over 30 UI components
• Customizable UI components
• Works on Web thanks to React Native for Web
• Jest Snapshot Testing
• Uses Prettier an opinionated JavaScript formatter.
• Uses Yarn

Getting started

Requires React Native 0.40 and higher.

$ npm install --save nachos-ui  

OR

$ yarn add nachos-ui

The ThemeProvider component should be set at the highest level of your app. If it is not, Nachos UI components will NOT render.

import { ThemeProvider } from "nachos-ui";

export default (App = () => (
  <ThemeProvider>
    <RestOfYourApp />
  </ThemeProvider>
));

import React from 'react'
import { View } from 'react-native'
import { Button } from 'nachos-ui'

const App = () => {
  return (
    <View>
    	<Button>Button</Button>
    </View>
  )
}

Documentation

Visit the documentation at https://avocode.com/nachos-ui/docs/ with technical information about each component.

Contributing

Contributions are always welcome! Before contributing, please read our Code Of Conduct.

Read Contributing.

Developers

To play with Nachos UI locally first clone the repository:

$ git clone [email protected]:avocode/nachos-ui.git

Ideally use Yarn to install your dependencies. It's fast and consistent:

$ yarn install

To run the iOS simulator run:

$ yarn run start

To run the Web version:

$ yarn run start:web

License

Nachos UI is open source and released under the MIT License.

Thanks!

• Vacuumlabs
• Polgár András
• Oliver Drahota

nachos-ui's Issues

Styling Radio button

Is there any way to style Radio button other than using Checkbox's Theme?
In particular, I want to change height and width of the filler circle in Radio button.

Button uppercase default not strictly checked

Config:

• RN 0.52.0
• Nachos 0.1.2

Problem:
When not explicitly setting uppercase=false on some buttons, it throws an error (here)

Some basic example code:

import React, { Component } from 'react';
import { View } from 'react-native';
import { Button } from 'nachos-ui';
import Config from 'react-native-config';
import { inject, observer } from 'mobx-react';


@inject('UserStore')
@observer
export default class LoginContainer extends Component {

  _renderButton() {
    const { UserStore } = this.props;
    if (UserStore.isLoggedIn === true) {
      // Adding uppercase={ false } here fixes the error
      return (
        <Button onPress={ UserStore.login } >
          Continue As { UserStore.user.displayName }
        </Button>
      );
    }

    return (
      <Button onPress={ UserStore.login }>
        Login With Facebook
      </Button>
    );
  }

  render() {
    return (
      <View>
        { this._renderButton() }
      </View>
    );
  }
}

Proposed solution:

• Use explicit checking (uppercase === true) on the line linked above

Cannot change Input text color

I would expect to be able to set an input's text color via inputStyle={{color:'red'} however this seems to be overridden by the theme.

I can set the color in the theme, however that sets an internal border color as well.

Question: How to mock nachos-ui (snapshot testing)

How do you mock nachos-ui?

I have Jest set up and I have tried

// setupTests.js
jest.mock('nachos-ui', () => 'NachosUIMock')

but I get

    Invariant Violation: Native module cannot be null.
      
      at invariant (node_modules/fbjs/lib/invariant.js:42:15)
      at Linking.NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:32:1)
      at new Linking (node_modules/react-native/Libraries/Linking/Linking.js:119:141)
      at Object.<anonymous> (node_modules/react-native/Libraries/Linking/Linking.js:192:16)
      at Object.get Linking [as Linking] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:96:22)
      at Object.<anonymous> (node_modules/react-native-experimental-navigation/NavigationRootContainer.js:15:36)

On another project I used to have the same error related to react-datetime and mocking it solved the issue.

How do you recommend mocking nachos-ui so I can easily use snapshot testing for my own components?

Help much appreciated

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Feature enhancement request: animation on progress bar

It would nice to have some animation on the progress component, like below:

flex:1 on Button

In the button component, .container {flex:1} is not friendly to existing components and causes serious layout issues. I believe it should be changed and should not take as much space by default.

Current behavior

Code:

<View styleName="container">
        <FontAwesomeIcon icon={faCoffee}/>
        <Text>Welcome</Text>
        <Button>Proceed</Button>
        <Input placeholder='[email protected]'/>
</View>

.container {
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #EEE;
}

Expected: Button in the middle of the screen

Linked: #11.

Nachos UI Kit Release?

Will be a UI Kit release for Photoshop, Adobe Xd or Sketch like "GUACAMOLE
3-IN-1 UI KIT" ?

Thanks!

Specify own icon component

Great UI kit, thanks for making it!

Got a small feature request though.

In, for example, the Input component, the Icon component is used. It's pre-set to work with a specific icon font.

Aside from providing the name of the icon (which would then trigger the use of this component) it would also be great to be able to provider our own. Perhaps if the value of the icon prop is a string then the built-in component is used, and if its a function this function can be run to render the icon?

Or alternatively there's a renderIcon prop instead that gets used.

I could make a PR for this if needed – this fork is a quick and dirty attempt to do this:
pinmarkio@1633b8f

Linking react-navie-vector-icons

If I add nachos-ui to my project by:

yarn add nachos-ui
and try to use some icons (ex.: setting state of Input to 'error') I got an error: Unrecognized font family 'Ionicons'. The obvious solution is to link react-native-vector-icons like this:

react-native link react-native-vector-icons

Can you, please, mention it in documentation or force it somehow automatically?

Error "Cannot read property 'color' of undefined"

Hello,

I tried nachos-ui in the first time with Button and Input however same error occurs

TypeError "Cannot read property 'color' of undefined" 

Some thing wrong with me?

react-native-cli: 2.0.1
react-native: 0.55.4

"nachos-ui": "^0.2.0-beta.1"

node version

v10.9.0

Docs broken

The links in the docs are broken, they all bring me to a 404 page.

https://avocode.com/nachos-ui/docs#!.

example: https://avocode.com/nachos-ui/Showcase/Input

Carousel auto slide.

Hi, How to make Carousel auto slide the picture?

<ThemeProvider /> branding changes does not dynamically update nested themed components.

Hey, thanks for this great component library!

I've come across a use case where we're required to dynamically update the <ThemeProvider />'s branding at runtime, if the user selects a particular style. However, changing the branding does not appear to drive any graphical updates on any of the nested withTheme components.

Here's the replication example for react-native-web, however the issue persists on native applications too:

import React from 'react';
import { Platform } from 'react-native';
import { ThemeProvider, Button } from 'nachos-ui';

const defaultBranding = {
  textColor: "#000",
  accentColor: "red",
  alternateTextColor: "#fff",
  linkColor: "#7945ef",
  disabledColor: "#f9f9fa",
  disabledDarkColor: "#b1b2c1",
  successLightColor: "#e9f9f0",
  successColor: "#20cd68",
  passiveSuccessLightColor: "#d5dff7",
  passiveSuccessColor: "#2f61d5",
  dangerLightColor: "#ffe2dc",
  dangerColor: "#ff7052",
  primaryLightColor: "#e3d9fc",
  primaryColor: "#7540ee"
};

const overridedBranding = {
  ...defaultBranding,
  primaryColor: 'red',
};

class App extends React.Component {
  state = {
    shouldOverrideTheme: false,
  }
  render() {
    const { shouldOverrideTheme } = this.state;
    const branding = shouldOverrideTheme ? overridedBranding: defaultBranding;
    console.log(branding.primaryColor);
    return (
      <ThemeProvider
        branding={branding}
      >
        <Button
          onPress={() => this.setState({
            shouldOverrideTheme: !this.state.shouldOverrideTheme,
          })}
        >
          {'Some example'}
        </Button>
      </ThemeProvider>
    );
  }
}

let hotWrapper = () => () => App;
if (Platform.OS === 'web') {
  const { hot } = require('react-hot-loader');
  hotWrapper = hot;
}
export default hotWrapper(module)(App);

I'm going to start working on a fix today, just creating this issue for reference. Thanks again!

'react-native' dependency is not installed.

I'm having this issue when i try to use nachos with the tab-navigation template generated by expo: "'react-native' dependency is not installed."

I used npm install --save nachos-ui cause i noticed that i can't use yarn to install nachos-ui (at least when i'm useing expo)

Warning when passing styles created with StyleSheet

So, the issue is a warning each time when I'm passing styles created with StyleSheet.create({})

<H1 style={courseCardStyles.text}>

const courseCardStyles = StyleSheet.create({
  container: {
    alignSelf: 'stretch',
    height: 175,
    paddingLeft: 15,
  },
  text: {
    color: '#000000'
  }
});

Checkbox icon in the wrong position

I don't know if this is only on my browser but the icon seems to be in the wrong position.
https://avocode.com/nachos-ui/docs/#!/Showcase/Checkbox

edit: the same to the radio button

TabButton inside Switcher error

Hello, I'm using expo with this simple snippet:

<Switcher onChange={(value: string) => setTabvalue(value)}> <TabButton value="foo" text="Foo" /> <TabButton value="bar" text="Bar" /> <TabButton value="baaz" text="Baaz" /> </Switcher>

which generates the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

npm start crashes after install of nachos-ui

hi, firstly thanks for providing some very cool and handy components!

i installed today to an in-dev project running on RN 0.41.1

npm start crashed with the following error:

Failed to build DependencyGraph: @providesModule naming collision:
Duplicate module name: ResponderEventPlugin

Here are the clashing paths in the console error message:

~/node_modules/nachos-ui/node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/event/eventPlugins/ResponderEventPlugin.js

~/node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/event/eventPlugins/ResponderEventPlugin.js

Any tips on how to resolve would be great.

Duplicate module name: react-native-vector-icons

Hi,
I already installed nachos-ui and when I am trying to start application I get this error:

This error is caused by a @providesModule declaration with the same name across two different files.
Error: @providesModule naming collision:
  Duplicate module name: react-native-vector-icons
  Paths: [...]/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with [...]/node_modules/nachos-ui/node_modules/react-native/local-cli/core/__fixtures__/files/package.json

Any ideas?

Arrows in Bubble not showing on Android

Description
If I add Bubble with arrowPosition and color, it displays correctly on iOS, but not Android.
Steps to Reproduce
<Bubble arrowPosition='bottom' style={{opacity: 0.5}} color={'green'}> <Text style={styles.text}> {'text'} </Text> </Bubble>
Expected Results
Arrows show on Android, just as shown on iOS

Radio button less or more distance when button is clicked

Hello,

I am currently working with Radio Button and I have probably a silly question but I would like to ask can I modified the distance when the button is clicked.
This an example of the Library:

And this is how is I display iy:

The code is this:

radioStyle: { margin: format_number(5, 'px'), height: format_number(14, 'px'), width: format_number(14, 'px') },

Best Augusto.

update all dependencies

Is there any specific reason that the dependencies are not yet updated,
As i can see by the command npx npm-check-updates

 is-obj                             ^1.0.1  →    ^2.0.0 
 prop-types                        ^15.6.1  →   ^15.7.2 
 query-string                       ^4.3.1  →    ^6.8.1 
 react-art                         ^16.3.2  →   ^16.8.6 
 react-helmet                       ^5.2.0  →    ^5.2.1 
 react-native-vector-icons          ^4.6.0  →    ^6.6.0 
 @expo/vector-icons                 ^6.3.1  →   ^10.0.3 
 @storybook/addon-actions           ^3.4.6  →    ^5.1.9 
 @storybook/addon-info              ^3.4.6  →    ^5.1.9 
 @storybook/addon-links             ^3.4.6  →    ^5.1.9 
 @storybook/addon-options           ^3.4.6  →    ^5.1.9 
 @storybook/addon-viewport          ^3.4.6  →    ^5.1.9 
 @storybook/addons                  ^3.4.6  →    ^5.1.9 
 @storybook/react                   ^3.4.6  →    ^5.1.9 
 babel-cli                         ^6.18.0  →   ^6.26.0 
 babel-core                        ^6.21.0  →   ^6.26.3 
 babel-eslint                       ^7.2.3  →   ^10.0.2 
 babel-jest                        ^22.4.3  →   ^24.8.0 
 babel-loader                      ^6.2.10  →    ^8.0.6 
 babel-plugin-add-module-exports    ^0.2.1  →    ^1.0.2 
 babel-polyfill                    ^6.20.0  →   ^6.26.0 
 babel-preset-es2015               ^6.18.0  →   ^6.24.1 
 babel-preset-react-native          ^4.0.0  →    ^4.0.1 
 babel-preset-stage-0              ^6.16.0  →   ^6.24.1 
 babel-register                    ^6.18.0  →   ^6.26.0 
 enzyme                             ^3.3.0  →   ^3.10.0 
 enzyme-adapter-react-16            ^1.1.1  →   ^1.14.0 
 eslint                             ^4.1.1  →    ^6.0.1 
 eslint-config-react-app            ^2.1.0  →    ^4.0.1 
 eslint-plugin-flowtype            ^2.34.1  →   ^3.11.1 
 eslint-plugin-import               ^2.6.0  →   ^2.18.0 
 eslint-plugin-jsx-a11y             ^6.0.3  →    ^6.2.3 
 eslint-plugin-react                ^7.1.0  →   ^7.14.2 
 estraverse-fb                      ^1.3.1  →    ^1.3.2 
 exp                                53.1.0  →    57.2.1 
 file-loader                        ^0.9.0  →    ^4.0.0 
 gulp                               ^3.9.1  →    ^4.0.2 
 gulp-replace                       ^0.5.4  →    ^1.0.0 
 http-server                        ^0.9.0  →   ^0.11.1 
 jest                              ^22.4.0  →   ^24.8.0 
 jest-canvas-mock                   ^1.0.2  →    ^2.1.0 
 json-loader                        ^0.5.4  →    ^0.5.7 
 prettier                          ^1.12.1  →   ^1.18.2 
 raw-loader                         ^0.5.1  →    ^3.0.0 
 react                            >=16.3.0  →  >=16.8.6 
 react-dom                          16.3.2  →    16.8.6 
 react-native-web                   ^0.6.1  →   ^0.11.5 
 react-test-renderer               ^16.3.1  →   ^16.8.6 
 string-replace-webpack-plugin      ^0.0.5  →    ^0.1.3 
 url-loader                         ^0.5.7  →    ^2.0.1 
 webpack                           ^1.13.2  →   ^4.35.3 
 webpack-dev-server                ^1.16.2  →    ^3.7.2 
 react-native                     >=0.52.0  →  >=0.60.3 

A lot of dependencies as old, I would like to volunteer for this isssue

Use refs on Input so that we can focus the next text input

Hi, I tried your components today and I saw that we couldn't pass refs to the Input, so that we could focus the next element when clicking on the 'Enter'/'Next' button on the keyboard which is pretty much annoying. In fact, when we pass a ref to an Input, we get this error message:

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Here is the code:

<Input onSubmitEditing={ (event) => {
    this.refs.PassInput.focus();
  }
}>
<Input ref='PassInput'>

And when we press enter, we get:

Cannot read property 'focus' of null

Can this library works with refs ? Or have you any idea on how could I focus the next input when clicking on 'Next' on my keyboard ?

Thanks for this wonderful library by the way !

CI server failing due to issues with old NPM

We should probably just solve #36 and move CI to yarn and a newer node version given that node 4 is deprecated

Not working with Redux

Hi , None of the components of this ui are working when they are used in connect function of react-redux library.

Please see the image above.

Issues revolving around the duplication of RN or React deps

Saw a lot of comments about this and just wanted to post what worked for me. My team is using yarn:

cd node_modules
cd nachos-ui
cd node_modules
rm -rf react-native

Then from project folder:

yarn start --reset-cache

Still have a lot of yellow in the console, but it works. I'm sure there's a better fix out there, but I thought this could help some blocked folks out there.

Style the footer text of Nachos ui card

I would like to style the text as it appears in the following screenshot attached, I am using Nachos UI card. I am able to style other elements of the Nachos UI card as such but unable to do so for the text in the footer section, thank you for your help.

Can you use Nachos-ui with Redux-Forms

Great UI Kit.

My one question is do you know if the components developed here are compatible with Redux-Form? (http://redux-form.com/)

Thanks,
Niels

Color won't update on Bubble

The following code does not update the color of the Bubble. (#f0f0f0 should be grey) Screenshot attached.

<Bubble ref = "animatedText"
          style = {{marginBottom:14}}
          arrowPosition='left'
          color='#f0f0f0'>
          { this.state.words }
</Bubble> 

Nachos does not works with EXPO

I'm getting some errors (warnings) after I try to add nachos-ui to an EXPO project.

17:41:53: jest-haste-map: @providesModule naming collision:
17:41:53: Duplicate module name: DocumentSelectionState
17:41:53: Paths: /home/josenaves/Projects/nachos-expo/node_modules/react-native/Libraries/vendor/document/selection/DocumentSelectionState.js collides with /home/josenaves/Projects/nachos-expo/node_modules/nachos-ui/node_modules/react-native/Libraries/vendor/document/selection/DocumentSelectionState.js
17:41:53:
17:41:53: This warning is caused by a @providesModule declaration with the same name across two different files.
17:41:53: jest-haste-map: @providesModule naming collision:
17:41:53: Duplicate module name: Animation
17:41:53: Paths: /home/josenaves/Projects/nachos-expo/node_modules/react-native/Libraries/Animated/src/animations/Animation.js collides with /home/josenaves/Projects/nachos-expo/node_modules/nachos-ui/node_modules/react-native/Libraries/Animated/src/animations/Animation.js

My package.json:
{
"name": "nachos-expo",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "^22.0.0",
"react-native-scripts": "1.7.0",
"react-test-renderer": "16.0.0-beta.5"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^22.0.2",
"nachos-ui": "^0.1.2",
"react": "16.0.0-beta.5",
"react-native": "^0.49.5"
}
}

Generate Sketch files using default or extended theme

Website has broken doc links

Hay guys, was trying to use your landing site to go to your docs but as the title says all your links are broken. The only one that works is the contributing link and the medium link (about scratching your itch). The docs links are either http://nachosui.com/nachos-ui/docs/ or https://docs.nachosui.com/ and both have lead to :

or

So for those of you have made it this far, documentation worked fine for me.

Add off-canvas menu component

Inspiration: https://github.com/react-native-community/react-native-side-menu

Unable to resolve module `AccessibilityInfo`

Installing this package breaks react-native@^47:
This is the error that pops up:

error: bundling failed: "Unable to resolve module `AccessibilityInfo` from `$ROOT/node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module does not exist in the module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`."

Uninstalling nachos-ui DOES NOT fix this error.

Invariant Vioation after importing Switcher

I installed nachos-ui and trying to use Switcher and TabButton from UI kit

import { Switcher, TabButton } from 'nachos-ui'

<Switcher defaultSelected={this.state.weight} >
<TabButton value='male' text='male' />
<TabButton value='female' text='female' />
</Switcher>

After I wrote the code I receive this error

[17:32:24] Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Ambiguous module resolution

Ambiguous module resolution from ../index.js: The name react-native was looked up in the Haste module map. It cannot be resolved, because there exists several different files, or packages, that provide a module for that particular name and platform. The platform is generic (no extension). You must delete or blacklist files until there remains only one of these:
warning: the transform cache was reset.

• ../node_modules/nachos-ui/node_modules/react-native/package.json (package)
• ../node_modules/react-native/package.json (package)

Not working

Is this working? I installed it on an expo project, and just tried to use a button. I injected the theme provider, but the button renders so badly. The font color is not white, also the background is not solid. Also I can't put icons. Also I tried to use themeManager to customize but themeManager can't be imported because it doesn't exist.

how do i integrate nachos-ui with react-native-web

Can you provide an example of how nachos-ui can be used in a RNW project?

Move `Switcher` to use context

This will remove the need to clone components thus improving perf. It will also allow for more complex component composition

Use StyleSheet API

It's important to use StyleSheet for performance reasons on web and native. You can use it to define all static styles

typescript support will be essential?

<Button> layout behaviour

Hey guys!

I'm writing a test app to get familiar with Nachos-UI (great work, btw!) and I'm facing some issues when I try to position a <Button> in a <View> container.

Here's my App.js code:

import React from 'react'
import { StyleSheet, View, Alert } from 'react-native'
import { Button } from 'nachos-ui'

export default class App extends React.Component {
  render () {
    return (
      <View style={styles.container}>
          <Button onPress={() => Alert.alert('Hello World')}>
            Click Me
          </Button>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

It should position the component in the middle of the screen, however, it stays on top-center.

Any thoughts?

Buttons broken

I just copied example, but it's broken.

import React from 'react';
import { View } from 'react-native';
import { Button, H4 } from 'nachos-ui';


const btnStyle = { margin: 15 }

export default () => (
  <View>
    <H4>Example:</H4>
    <Button type='success' style={btnStyle}>Success</Button>
    <Button type='danger' style={btnStyle}>Danger</Button>
    <Button style={btnStyle}>Primary</Button>
    <Button kind='squared' type='success' style={btnStyle}>
      Success
    </Button>
    <Button kind='squared' type='danger' style={btnStyle}>
      Danger
    </Button>
    <Button
      kind='squared'
      style={btnStyle}
    >
      Primary
    </Button>
    <H4 align='center'>Disabled style</H4>
    <Button type='success' disabled style={btnStyle}>
      Success
    </Button>
    <Button kind='squared' type='danger' disabled style={btnStyle}>
      Danger
    </Button>
  </View>
);

Use ReactXP to be multiplatform UI Kit

https://github.com/Microsoft/reactxp

Cards do not accept local image

The following example is not supported:

      <Card
        footerContent='The avocado is a tree that is native to Mexico'
        image={require('../../../assets/images/insurance.jpg')}
        style={cardStyle}
      />

Warining when set Input/Button style using StyleSheet object

Get following waring message when try to set stlye of Input/Button componet using react native StyleSheet component

Warning: Failed prop type: Invalid prop`style` supplied to `Input`

I only tried on Input & Button components