galio-org/galio

Galio is a beautifully designed, Free and Open Source React Native Framework

galio's Issues

Components: Slider

Read this: Working on a PR | CONTRIBUTING | Galio's docs

As I've written in our wiki. We're working towards v0.5 and for this thing to happen we need the following component.

Do you want to help? Just comment if you wish to work on:

• Slider (TAKEN BY @palingheorghe)

Design files for: Slider

🤙🏽

Components: Deck Swiper

Read this: Working on a PR | CONTRIBUTING | Galio's docs

As I've written in our wiki. We're working towards v0.6 and for this thing to happen we need the following components.

Do you want to help? Just comment if you wish to work on:

• Deck Swiper

If anybody has questions please comment them below.

🤙🏽

Error with new expo sdk 33.0.0 to open web app

Describe the bug
I get this error to open my project in the browser but not on android with new expo version

To Reproduce
Steps to reproduce the behavior:

1. Run 'expo start --web'
2. See error:

node_modules/galio-framework/src/Button.js 11:16
Module parse failed: Unexpected token (11:16)
You may need an appropriate loader to handle this file type.
|
| class Button extends React.Component {

renderContent = () => {
| const {
| loading,

Expected behavior
Run project in the browser

Smartphone (please complete the following information):

• Device: Linux deepin, Firefox
• Type of device: Browser
• React-Native version: [e.g. 0.58]
• Expo version: [e.g. 33.0.0]

Additional context
I do not know what else may need, I hope to make myself understood

Convert all the class based components to functional components and respective state managements to react hooks

We all are aware of the benefits of functional components over class based components and I am planning to convert them

Constants not extended

Describe the bug
A clear and concise description of what the bug is.
I am not sure if this is a bug related to Expo 34/RN0.59. Probably some misconfiguration on my side.

I thought the problem was related to Material Kit which I was trying to use, but after some investigating, I closed this creativetimofficial/material-kit-react-native#5 because it is definitely a problem I'm having with Galio's theme system

My application is built starting from an expo start. So it has an index.js and an App.js. I'm not sure this is common or if there is a better way, however, here are my two files.

index.js

import React from "react";
import { registerRootComponent } from "expo";
import KeepAwake from "expo-keep-awake";
import App from "./App";

import { Provider } from "react-redux";
import store from "./redux/store";
import { GalioProvider, withGalio } from "galio-framework";

import authActions from "./redux/auth/actions";

store.dispatch(authActions.checkAuthorization());

let colors = {
  ACCENT: "#26A7F2", //2
  DARK: "#2486F9", //1
  TEXT: "#144A67",
  BACKGROUND: "#FDFFFC", //4
  BACKGROUND_ALT: "#E9F7FF", //5
  LESS_DARK: "#BFBFBF" //3
};
const customTheme = {
  COLORS: {
    DEFAULT: colors.LESS_DARK,
    PRIMARY: colors.ACCENT,
    SECONDARY: colors.DARK,
    LABEL: colors.LESS_DARK,
    INFO: colors.LESS_DARK,
    ERROR: colors.DARK,
    SUCCESS: colors.ACCENT,
    WARNING: colors.ACCENT,
    MUTED: colors.BACKGROUND,
    INPUT: colors.DARK,
    ACTIVE: colors.ACCENT,
    BUTTON_COLOR: colors.LESS_DARK,
    PLACEHOLDER: colors.LESS_DARK,
    SWITCH_ON: colors.ACCENT,
    SWITCH_OFF: colors.BACKGROUND,
    GRADIENT_START: colors.LESS_DARK,
    GRADIENT_END: colors.ACCENT,
    PRICE_COLOR: colors.ACCENT,
    BORDER_COLOR: colors.LESS_DARK,
    BLOCK: colors.ACCENT,
    ICON: colors.DARK,
    INPUT_COLOR: colors.DARK,
    INPUT_BACKGROUND_COLOR: colors.BACKGROUND,
    VIEW_BACKGROUND: colors.BACKGROUND_ALT,
    CARD_BACKGROUND: colors.BACKGROUND,
    BACKGROUND_COLOR: colors.BACKGROUND,
    BAR_BACKGROUND_COLOR: colors.BACKGROUND_ALT,
    TEXT: colors.TEXT,
    TEXT_REVERSE: colors.BACKGROUND
  },
  SIZES: {
    BASE: 16,
    FONT: 16,
    ICON: 16,
    OPACITY: 0.8,
    BORDER_RADIUS: 6,
    BORDER_WIDTH: 0.8

    
  }
};


class Main extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <GalioProvider theme={customTheme}>
          <App />
        </GalioProvider>
      </Provider>
    );
  }
}

registerRootComponent(withGalio(Main));

I'm not sure if using withGalio here makes sense, but customTheme here has only the properties I defined. I assume this is correct, because it seems logical that the GalioProvider components merges together GalioTheme with this custom properties object.

Now, the App.js part.

If I use withGalio in it, in order to be able to use whatever constants I defined in the custom theme, everything gets broken.

Meaning that my entire application is broken. I see that the components are cycling on the flat list but I see nothing on my app apart from a couple of mispositioned titles.

However, (theme) is populated with everything so I guess that the theming mechanism is working.

app.js

import React from "react";
import { Platform, StatusBar, StyleSheet, View, Text } from "react-native";
import { createStackNavigator } from "react-navigation";
import { AppLoading } from "expo";
import { Ionicons } from "@expo/vector-icons";
import { Asset } from "expo-asset";
import * as Font from "expo-font";
import AppNavigator from "./navigation/AppNavigator";
//import ProjectsScreen from "./screens/ProjectsScreen";
import LoginScreen from "./screens/LoginScreen";
import { withGalio } from "galio-framework";
import authAction from "./redux/auth/actions";

import { connect } from "react-redux";
import NavigationService from "./navigation/NavigationService";
const { logout } = authAction;

import { SignupScreen } from "./screens/SignupScreen";
import GalioConfig from "./assets/fonts/galioExtra";
import { YellowBox } from "react-native";
YellowBox.ignoreWarnings(["ReactNative.NativeModules.LottieAnimationView"]);

import RegistrationNavigator from "./navigation/RegistrationNavigator";
const GalioExtra = require("./assets/fonts/galioExtra.ttf");
const Galio = require("./assets/fonts/galio.ttf");
export class App extends React.Component {
  state = {
    isLoadingComplete: false,
    isLoggedIn: false
  };

  constructor(props) {
    super(props);
  }

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      //console.log("App Started");
      return (
        <View style={styles.container}>
          {Platform.OS === "ios" && <StatusBar barStyle="default" />}
          {this.props.isLoggedIn ? (
            <AppNavigator
              theme={this.props.theme}
              ref={navigatorRef => {
                NavigationService.setTopLevelNavigator(navigatorRef);
              }}
            />
          ) : (
            <RegistrationNavigator
              theme={this.props.theme}
              ref={navigatorRef => {
                NavigationService.setTopLevelNavigator(navigatorRef);
              }}
            />
          )}
        </View>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require("./assets/images/robot-dev.png"),
        require("./assets/images/robot-prod.png")
      ]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Ionicons.font,
        GalioExtra: GalioExtra,
        galio: Galio,
        "poppins-bold": require("./assets/fonts/Poppins-Bold.ttf"),
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
        "space-mono": require("./assets/fonts/SpaceMono-Regular.ttf")
        // "lato-hairline": require("./assets/fonts/Lato-Hairline.ttf"),
        // "lato-light": require("./assets/fonts/Lato-Light.ttf"),
        // "lato-regular": require("./assets/fonts/Lato-Regular.ttf"),
        // "montserrat-bold": require("./assets/fonts/Montserrat-Bold.ttf"),
        // "montserrat-light": require("./assets/fonts/Montserrat-Light.ttf"),
        // "montserrat-regular": require("./assets/fonts/Montserrat-Regular.ttf"),
        // "montserrat-thin": require("./assets/fonts/Montserrat-Thin.ttf"),
      })
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

const styles = theme =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: theme.COLORS.VIEW_BACKGROUND
    }
  });

export default connect(
  state => ({
    isLoggedIn: state.Auth.idToken !== null,
    auth: state.Auth
  }),
  { logout }
)(withGalio(App, styles));

Of course, the withGalio is inside the connect parameter, I am not sure if this does conflict in some way, even If I think it shouldn't.

Honestly, I understand that this sounds more like a help request than a bug report. However this behaviour started when, after upgrading to Expo v34/React Native 0.59. The application was broken because some properties from the custom theme I was using in the application broke. I realized that I was importing the theme from constants as material kit does, but the galio theme base property which I am pretty sure were there were not there anymore.

I read the documentation of galio theming to death but I can't figure out what am I doing wrong.

I can provide more code samples if useful.

Thanks to anyone that could provide a clear explanation on how to use the galio theming system and/or help me figure out the problem!

NavigationDrawerItems text cutting off

Describe the bug
The Navigation Drawer is chopping off Drawer label in example branch

To Reproduce
Steps to reproduce the behavior:

1. Install project as it is.
2. Open app on expo.
3. Open Navigation Drawer
   

Expected behavior
It should not chop off the drawer items.

Draggable FlatList

I was wondering if we could bring in some draggable list component, as this is the thing missing in most of the popular UI components library and devs have to use additional libraries!!

Icon detailed how to

Is your feature request related to a problem? Please describe.

I'm sure this is related to my deep ignorance on the subject, however, I think that some explanation on how to use icons could be of help to many who, like me, don't understand how to display an icon.

Describe the solution you'd like

I think that a link and an example of how to use an icon name to display an icon would be of great help.

Describe alternatives you've considered

On the documentation is reported that the expo vector icon list is supported. So I thought that by using the name of one of those icons would be allowed. I tried many, to no avail.

However, probably that's not the right solution. I found in the npm package that there is a galio.json which maps the icons with their names, so probably every available icon name is there, even if it seems a bit uncomfortable to dig.

Additional context

I would like to contribute to the documentation if instructions are provided to me so that I understand how to display an icon and which is the list to choose from.

Expo SDK 33.0.0 not working?

Have just freshed installed Galio with npm i --save galio-framework on expo SDK 33. Am getting error:
undefined is not an object (evaluating '_vectorIcons.default.Galio = (0, _vectorIcons.createIconSetFromIcoMoon)(_galio.default, 'Galio')')

I commented out this line in galio-framework/src/Icon.js:
// Icons.Galio = createIconSetFromIcoMoon(galioConfig, 'Galio');

There is now no error, however no elements are rendering correctly as expected. E.g from the docs.

Assume SDK 33 is just not supported yet?

Components: Custom from inputs (checkbox, radio)

Read this: Working on a PR | CONTRIBUTING | Galio's docs

As I've written in our wiki. We're working towards v0.5 and for this thing to happen we need the following components.

Do you want to help? Just comment which of the following components you wish to work on:

• Radio Button (TAKEN BY @samcyn)
• Checkbox (TAKEN BY @palingheorghe)

Design files for: Check box | Radio Button

🤙🏽

Using Galio with ejected app

Bug description
Hello, I'm would like to use Galio component on an react-native ejected app.
Actually I have the issue which is : "The Expo SDK requires expo to run"

To Reproduce
Only trying to use Galio component on and ejected app

Screenshots

Smartphone:

• Device: [iPhone X]
• Type of device: [simulator]
• OS: [ios 11.3]
• React-Native version: [e.g. 0.57.8]
• Expo version: ejected app (expoKit ?)

Thanks for your help !

github.com-galio-org-galio@examples

Describe the bug
Unable to resolve module ‘module://galio-framework.js’

To Reproduce
Steps to reproduce the behavior:

1. Go to https://snack.expo.io/@cooleyeglass/github.com-galio-org-galio@examples
2. Click on 'Tap to Play' of the PREVIEW Android
3. Scroll down to bottom of browser
4. See error
   Device: (78:20)
   Unable to resolve module ‘module://galio-framework.js’
   Evaluating module://galio-framework.js
   Evaluating module://src/screens/Article.js
   Evaluating module://routes.js
   Evaluating module://App.js
   Loading module://App.js

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: Android
• Type of device: Simulator
• OS: Android SDK built for x86
• React-Native version:
• Expo version: 29.0.0

Additional context
Add any other context about the problem here.

Switch trackColor not working

Switch trackColor true value and default string value not working changing color but false value working when changing to this:

 <Switch 
 initialValue={false}
 trackColor={{true: 'white', false: 'green'}}
 thumbColor={'black'}
 onChange={() => Alert.alert('switch')} />

Unable module expo on react native init

Bug
Error: Unable to resolve module expo from path/appname/node_modules/galio-framework/src/Icon.js: Module expo does not exist in the Haste module map.
im using react-native init instead of expo, any suggestion?

add hitSlop to navbar left icon

The left navbar button is not user-friendly.
Thank you for creating this awesome project. I want to add hitSlop to left navbar icon since without hitSlop it is really hard to use. I got too many feedbacks from test users about they are not able to click left button. I do not want to recreate a whole left component.
the button I am talking about: (the one next to dashboard)

Add leftHitSlop prop to Navbar.
I want to control the touchable area. We can accomplish this by a slight difference;

current navbar component:

renderLeft = () => {
    const { back, left, leftStyle, leftIconColor, onLeftPress, theme, styles } = this.props;

    if (left) {
      return <View style={[styles.left, leftStyle]}>{left}</View>;
    }

    return (
      <View style={[styles.left, leftStyle]}>
        <TouchableOpacity onPress={() => onLeftPress && onLeftPress()}>
          <Icon
            family="Galio"
            color={leftIconColor || theme.COLORS.ICON}
            size={theme.SIZES.BASE * 1.0625}
            name={back ? 'minimal-left' : 'segmentation'}
          />
        </TouchableOpacity>
      </View>
    );
  };

updated navbar component:

renderLeft = () => {
    const { back, left, leftStyle, leftIconColor, onLeftPress, theme, styles, leftHitSlop } = this.props;

    if (left) {
      return <View style={[styles.left, leftStyle]}>{left}</View>;
    }

    return (
      <View style={[styles.left, leftStyle]}>
        <TouchableOpacity
          onPress={() => onLeftPress && onLeftPress()}
          hitSlop={leftHitSlop}
        >
          <Icon
            family="Galio"
            color={leftIconColor || theme.COLORS.ICON}
            size={theme.SIZES.BASE * 1.0625}
            name={back ? "minimal-left" : "segmentation"}
          />
        </TouchableOpacity>
      </View>
    );
  };

please note the leftHitSlop prop.

how to call this updated navbar component:

<NavBar
    style={styles.navbar}
    right={this.renderRight()}
    leftHitSlop={{ top: 30, bottom: 30, left: 30, right: 30 }}
    leftStyle={{ paddingVertical: -12, flex: 0.3 }}
    leftIconColor={theme.COLORS.WHITE}
    titleStyle={styles.title}
    onLeftPress={this.handleLeftPress}
/>

this is my first time opening an issue, please be merciful :)

Great Library

just i want to know what platform u used to build your website https://galio.io/ i will be more than happy if you can let me know what u used.

thanks

remove left icon

Is your feature request related to a problem? Please describe.
I would like to remove the left icon from the navbar. It doesn't seems possible

Describe the solution you'd like
One possible solution would be to provide a leftIcon nullable property

Describe alternatives you've considered
To color the icon the same color of background 🙇‍♂️

Alternative for Typography "p" property

For easy understanding what p represent, we can name it paragraph

galio/src/Typography.js

Line 17 in ff9d472

p && { fontSize: normalize(12) },

Theme & Colors

galio/src/theme.js

Lines 1 to 22 in 0b9d858

	const COLORS = {
	WHITE: '#FFFFFF',
	BLACK: '#000000',
	GREY: '#898989',
	THEME: '#B23AFC',
	PRIMARY: '#B23AFC',
	INFO: '#1232FF',
	ERROR: '#FE2472',
	WARNING: '#FF9C09',
	SUCCESS: '#45DF31',
	TRANSPARENT: 'transparent',
	INPUT: '#808080',
	PLACEHOLDER: '#9FA5AA',
	NAVBAR: '#F9F9F9',
	BLOCK: '#808080',
	MUTED: '#9FA5AA',
	NEUTRAL: 'rgba(255,255,255, 0.65)',
	FACEBOOK: '#3B5998',
	TWITTER: '#5BC0DE',
	DRIBBBLE: '#EA4C89',
	ICON: '#000000',
	};

Separating theme from colors would be much cleaner. Or create multiple sections like:

Theme: primary, secondary, success, warning, danger
Colors: white, black, grey, blue, red, etc
Social: dribbble, github, etc

Components: Icon - update component

Read this: Working on a PR | CONTRIBUTING | Galio's docs

As I've written in our wiki. We're working towards v0.6 and for this thing to happen we need the following components.

We're looking into removing the Expo dependency we have via the Icon component. After removing Expo and transforming the Icon component into a working component we'll only have to get rid of any expo-related Icon dependency we find in other Galio components.

Do you want to help? Just comment if you wish to work on:

• Icon (TAKEN BY @palingheorghe)

If anybody has questions please comment them below.

🤙🏽

Article.js Screen of the application is not scrollable and hence some of the content is not displayed properly

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. git clone https://github.com/galio-org/galio.git
   cd galio
   git checkout examples
   npm install or yarn instal

2. open the code in code editor/IDE of your choice and navigate to routes.js file in the root of the directory

3. Scrolldown to commented code and uncomment the following code

Article: {
    screen: Article,
    navigationOptions: {
      drawerLabel: 'Article Screen',
      drawerIcon: props => (
        <MenuIcon name="flag" family="font-awesome" focused={props.focused} />
      ),
    },
  },

4. run command yarn start, open the app in expo and navigate to to the Article Screen by opening drawer
5. Compare the text displayed in the white box in the app with the code,

---

created by developers for developers.
"A lot of Bacon. I'd really like to eat like a LOT of Bacon :(."

this section is missing

Components: Accordion

Read this: Working on a PR | CONTRIBUTING | Galio's docs

As I've written in our wiki. We're working towards v0.6 and for this thing to happen we need the following components.

Do you want to help? Just comment if you wish to work on:

• Accordion (__TAKEN BY @palingheorghe __)

If anybody has questions please comment them below.

Design files: here

🤙🏽

Components: Toast notification

Read this: Working on a PR | CONTRIBUTING | Galio's docs

As I've written in our wiki. We're working towards v0.6 and for this thing to happen we need the following components.

Do you want to help? Just comment if you wish to work on:

• Toast Notification (TAKEN BY @extenss)

If anybody has questions please comment them below.

🤙🏽

Custom Component Names

Is your feature request related to a problem? Please describe.
When I have to use components from different libraries I have to handle the problem with common name between them.

Describe the solution you'd like
I think it would be great to have the components from Galio with an identifier that make them easily recognizable from the other. For example, to use the prefix "Ga":

import { Button, Text } from 'react' // Default components
import { GaButton, GaBlock, GaText } from 'galio-framework' // Awesome Galio Components

Describe alternatives you've considered
I didn't think about another aproach but I'd like to now your opinions and if you have already an alternative for this.

Additional context
I've seen this methodology in the "Kitten Component Kit". They do it this way:

import { Button, Text } from 'react' // Default components
import { RkButton } from 'react-native-ui-kitten' // Kitten Components

Theme variables instead of calculations in components

galio/src/Block.js

Lines 137 to 138 in 0b9d858

	borderRadius: theme.SIZES.BASE * 0.4,
	borderWidth: theme.SIZES.BASE * 0.05,

Creating a border radius variable would be much cleaner as you can re-use it in other components instead of doing the calculation inside the component.

not start project? npm run android / npm run ios not working!

Hi, sorry for the inconvenience and my English. My native language is not English, so maybe some things go wrong.

But I would like to report that I cloned the project, I installed it with npm install, but no command worked to run the project on my android emulator. I looked in the package and it does not seem to have any script to start the project. And even installing the expo, I also could not start it.

I wonder if it's really bugged, or if it's me that I'm doing wrong. Because I would like to test and who can help improve the library.

I thank you for your attention :)

The screen "Order Confirmed" don't show left panel.

Describe the bug
In the "Order Confirmed" screen there is a minor error when trying to open the left panel due to props handling, showing "variable props not found".

To Reproduce
Steps to reproduce the behavior:

1. Run the project in the examples branch
2. Open the screen "Order Confirmed"
3. Try to open the left panel.
4. See error

Screenshots

Expected behavior
The left panel should be opened as in the other screens.

Additional context
I already fixed the error and I'm going to make a pull request.

Execution failed for task :app:mergeReleaseResources for Android release

Describe the bug
Execution failed for task :app:mergeReleaseResources for Android release when running
react-native run-android --variant=release. The specific error is due to duplicate resources interpretation by Android for both the galio.json and galion.ttf under the fonts directory.

To Reproduce
Steps to reproduce the behavior:

1. Run react-native run-android --variant=release

Expected behavior
Build completes successfully without any duplicate resources error.

Screenshots

BUILD FAILED in 3m 25s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installRelease -PreactNativeDevServerPort=8081
warn The following packages use deprecated "rnpm" config that will stop working from next release:
  - react-native-maps: https://github.com/react-native-community/react-native-maps#readme
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.
warn The following packages use deprecated "rnpm" config that will stop working from next release:
  - react-native-maps: https://github.com/react-native-community/react-native-maps#readme
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeReleaseResources'.
> [raw/node_modules_galioframework_src_fonts_galio] /react_native/MyProject/android/app/build/generated/res/react/release/raw/node_modules_galioframework_src_fonts_galio.json	[raw/node_modules_galioframework_src_fonts_galio] /react_native/MyProject/android/app/build/generated/res/react/release/raw/node_modules_galioframework_src_fonts_galio.ttf: Error: Duplicate resources

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

Smartphone (please complete the following information):

• Device: Galaxy Note 9
• Type of device: Physical
• OS: Android 9 Pie
• React-Native version: 0.60.4
• Expo version: NA

Additional context
I have issued and verified the fix #109. Please review accordingly.

Add Segment example in Expo app

I am taking this issue

Working without Expo SDK

Ideally, I prefer to work without Expo SDK. I happen to like your components library and wanted to give them a shot, but found out Expo SDK is required to make this work, is that so or have I overlooked a step to use this library without Expo? It would be great to see this work as standalone if possible.

Spanish Translation

Hi! If you like I could do the Spanish translation of the Docs and the README. If you agree, tell me how would you like to make the pull request ✌️

Hacktoberfest and galio

Introduction

Hi everybody! Hacktoberfest is here and and we have an interesting issue which will help not only Galio, but also you to grow up or just practice your skills.

We think Galio will be the the next best thing for building UIs with React Native but we also need your help to reach our goal. We want this to be a community-driven library with the purpose of delivering clean and fast code, flexibility and choices, and what we think good design practices to the React Native community. ❤️

We've already built 7 components which you can use for the next step in Galio's future: screen examples. We need to show how Galio can be used by building different beautiful screens.

We think this issue should be a good practice exercise for beginners, as much as it is for more advanced React Native developers.

Task

We have 7 screens in all formats (Photoshop/Sketch/.png files) in Galio's design branch.

You can choose one of the next 7 screens and recreate it using Galio components and then submit a PR with your cool screen:

• Onboarding screen
• Profile screen ( TAKEN BY @kostimarko )
• Register screen ( TAKEN BY @danibonilha )
• Product screen
• Menu
• Social Profile Screen ( TAKEN BY @samcyn )
• Order Confirmed ( TAKEN BY @nvh0412 )

This whole process is going to happen using a clone of the example branch.

Detailed information

As you can see, some of these screens require a different level of skill. For example, doing the menu screen you would have to change the menu of the app using react-navigation library so that would require you to learn a bit more about some other libraries React Native developers are using. If you think that could be a bit hard for you to do right now, pick a screen which only requires you to use just the perfect amount of knowledge of the react-native environment.

How to pick a screen

After cloning the repository or checked out our app using Expo (click here 🤩) and you got familiar with our showcase app for Galio and our components just leave a comment here saying which of the screens from above you'd like to create in order to showcase it in our app.

How to get started

• Firstly you need to fork the project, so please calmly and with excitement press the "fork" button. This will create a copy of the repository in your GitHub account.
• Now you need a copy on your computer so by going in your local repository, look for the "SSH clone URL" button and copy your URL. Open up your terminal and write git clone then paste your URL. Now hit enter.
• Change into the new directory by typing: cd galio
• Now you need to set up a new remote that points to the original project so that you can grab any changes and bring them into your local copy. Basically your project needs to be in sync with ours so you can get all the cool stuff. You can do that by writing the following line in your terminal:
  git remote add upstream [email protected]:galio-org/galio.git
• Now you're ready to do some nice work!

After you moved to the examples branch, don't forget to write npm install or yarn install in order to install all the necessary packages.

We use the master branch for keeping our components and the examples branch for screens and app-related stuff in general so make sure to branch from examples.
In this example we're assuming I want to branch from examples by creating a branch with the name of the screen that I've chosen using the Terminal:

$ git checkout examples
$ git pull upstream examples && git push origin examples
$ git checkout -b screens/profile-screen

Thanks for helping!

We value your help and we're really glad you're helping us create this cool UI library. ❤️If you like this project, but don't want to get involved just yet, don't forget to click those cool Watch and Star buttons. For any issues please us the Issue tab.

How to change the value of checkbox dynamically in Galio-Framwork checkbox?

instructions don't work for expo client on ios

There is no such thing as "typing into the Expo Client". Please provide proper clickable link to allow your demo app to open in Expo Client for iOS.

Can't create project as in documentation

Describe the bug
When I try to install the project as in the documentation, with the steps provided. The main error that I get is "missing script: ios". I only tried with ios, but I would get the same error because there isn't android script neither.

To Reproduce
Steps to reproduce the behavior:

1. Clone the repository
2. Get into the project folder
3. run "npm install" or "yarn install". It doesn't matter which manager I use.
4. Run "npm run ios"

Steps to reproduce the behavior with Expo:

1. Clone the repository
2. Get into the project folder
3. run "npm install" or "yarn install". It doesn't matter which manager I use.
4. Run "expo start"

Expected behavior
The project should open as expected with Expo.

Screenshots

Computer (please complete the following information):

• Device: MacBook Pro 2016
• OS: macOS Mojave
• Node version: 10.13.0
• Expo version: 2.2.5

Additional context
I don't know why Im getting this problem now, because one week ago I could run the project as expected with Expo.

How to integrate as a UI component library

Hi! I'd like to know how can I import Galio as would do with other component libraries (NativeBase/ui-kitten), if it is possible.

Thank you! It looks amazing 🤩

Components: Switch

Read this: Working on a PR | CONTRIBUTING | Galio's docs

As I've written in our wiki. We're working towards v0.5 and for this thing to happen we need the following component.

Do you want to help? Just comment if you wish to work on:

• Switch (TAKEN BY @antelbra)

Design files for: Switch

🤙🏽

Improper Alignment of navbar buttons (right)

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Clone the repo and run ther examples expo app by using the command

git checkout examples
yarn
yarn start

Bug
The navigation bar component's right button are not in center (vertical center)

Expected behavior
The navigation bar component's right button should be in center (vertical center)
Screenshots

Slider ReferenceError: Can't find variable: style

I'm trying to use Slider:

import { Slider } from 'galio-framework'
import React, { Component } from 'react';
import { View } from 'react-native';
export default class GalioPresentation extends Component {
    render() {
        return (
            <View>
                <Slider />
            </View>
        );
    }
}

I get the error:

ReferenceError: ReferenceError: Can't find variable: style
This error is located at:
in Slider (at theme/index.js:33)
in _class (at GalioPresentation.js:8)
in RCTView (at View.js:44)
in GalioPresentation (at LightingPresentation.js:179)
in RCTView (at View.js:44)
in RCTView (at View.js:44)

Focus() in Input!

Is your feature request related to a problem? Please describe.
The inputs do not pass the functions of focus (), blur (), among others of the TextInput of React Native.

Describe the solution you'd like
I would like these functions to be passed so that I could control focus and transfer from one input to another after I finish entering the value.

Describe alternatives you've considered
When the line:
ref = {input => (this.input = input)}
is added to the TextInput automatically the Input class wins the properties.

When creating the function:
function focusOnTextInput () {
return this.input.focus ()
};
It automatically causes the input to be focused, if it were to pass that function forward when the Input was imported, it was just to use it and the input would be focused.

But I tried to do this and the input does not show this function in its this, I do not know if it is because of the "withGalio" that is doing something, but the function does not come when using the input.

Additional context
Here is an example I could do by creating a customizable TextInput of mine!

Docs. where are they?

title

Screens: Segment Screen/Settings Screen

Read this: Working on a PR | CONTRIBUTING | Galio's docs

As I've written in our wiki. We're working towards v0.5 and for this thing to happen we need the following screens.

Do you want to help? Just comment if you wish to work on:

• Segment Screen ( 01A/01B )
  This screen uses the Segment and Slider components (#58 && #59 )
• Settings Screen (02)
  This screen uses the Radio, Check Box and Switch components (#57 && #60)

Design files for Screens -- both of them are in the same file

🤙🏽

🎊Now Galio is on "Awesome React Native" 🎉

Hi! A few weeks ago, when Galio was launched, I've made a pull request to "Awesome React Native" (22000 stars and 2600 forks) to add Galio. I think is a good move to make Galio more visible and attract more passionate developers to improve Galio.

🎉I've checked the list and Galio is now on the list 🎊

Hope you like it ✌️

Components: Segment

Read this: Working on a PR | CONTRIBUTING | Galio's docs

As I've written in our wiki. We're working towards v0.5 and for this thing to happen we need the following components.

Do you want to help? Just comment if you wish to work on:

• Segment (TAKEN BY nobody right now)

Design files for: Segment
We have different folders inside our Segment's design folder, each folder has the purpose of showing the different states this component could have

🤙🏽

Spanish translation docs

Hi guys!

As you can see we've added the last 4 new components to our documentation. We need help translating the new pages into Spanish (because we already have the spanish translation which is now outdated with our new update).

Last time @antelbra did the translation. So if he is able to help us again that'd be great but if he's not available and someone wants this issue that'd be fine as well.

You can find our docs here.

Thanks,
Alin

Doesn't work on expo 32 with typescript

When trying to use a component says:

undefined is not an object (evaluating '_reactNativeVectorIcons.default.Galio = 0, _reactNativeVectorIcons.createIconSetFromIcoMoon)(_galio.default, 'Galio')')

Fatal errors while testing galio

Describe the bug
Hi. I'm having a problem while trying to use Galio. With a fresh expo app I get the following error: undefined is not an object (evaluating 'Constants.manifest') if I'm connected via tunnel or local.

If I'm connected via LAN i get the following error: Uncaught Error: 23.0.0 is not a valid SDK version.

To Reproduce
1- expo init
2- yarn add galio-framework
2-

// App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'galio-framework';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Button>Press here!</Button>
      </View>
    );
  }
}

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

Screenshots

Smartphone (please complete the following information):

• Device: TPLINK TP701A
• Type of device: physical
• OS: Android 5.1
• React-Native version: 32
• Expo version: 32

Computer (please complete the following information):

• OS: Ubuntu Linux 18.10
• Node version: 10.12.0
• Expo CLI version: 2.6.14

Custom Theme Constants

It would be nice to provide a way to overwrite/customize the theme constants from a project location like .galio/theme.js for example, and of course if not found, then load the default theme.js file that came with the release.

const COLORS = {
    WHITE: '#FFFFFF',
    BLACK: '#000000',
    GREY: 'custom',
    THEME: 'custom',
    PRIMARY: 'custom',
    INFO: 'custom',
    ERROR: 'custom',
    WARNING: 'custom',
    SUCCESS: 'custom',
    ...

The preview app doesn't run on new versions of expo client

The app at https://expo.io/@galio-framework/galio-native-kit uses expo SDK 29 which the latest clients don't support.
See https://blog.expo.io/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c#dab0

Change Syntax: Import and Export Components

Is your feature request related to a problem? Please describe.
Change the syntax to import and export Components.

Describe the solution you'd like

// Import and Export in the same line
export { Block } from './Block';
export { Button } from './Button';
export { Card } from './Card';
export { Icon } from './Icon';
export { Input } from './Input';
export { NavBar } from './NavBar';
export { Text } from './Text';
export { Switch } from './Switch';
export theme, { withGalio, GalioProvider } from './theme';

Instead of this:

import Block from './Block';
import Button from './Button';
import Card from './Card';
import Icon from './Icon';
import Input from './Input';
import NavBar from './NavBar';
import Text from './Text';
import theme from './theme';

export {
  Block,
  Button,
  Card,
  Icon,
  Input,
  NavBar,
  Text,
  theme,
};

Describe alternatives you've considered
Leave it as it's now