Hacktoberfest and galio

[palingheorghe]

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.

[nvh0412]

Hi guys,

Thanks for making this awesome project to open source, great work!. Would it be possible for you guys to allow me to contribute on Order Confirmed screen 😍

[palingheorghe]

Hi @nvh0412 ,

Yeah, man! Go for it! Don't hesitate to ask us any questions you have. 🤙🏽

[samcyn]

Awesome!. I got so much love for this so far...taking on profile screen!

[palingheorghe]

Hi @samcyn,

We've assigned you the 'Social Profile Screen' 😉. Have fun building with Galio! 🤙🏽

[nvh0412]

Let me help on Onboarding Screen

[palingheorghe]

That's great, @nvh0412 ! We've assigned you that screen. Have fun! 🤙🏽

[danibonilha]

Hi, I can help with the registration screen =)

[kostimarko]

I can set up the profile screen

[danibonilha]

Hey, in the showcase App there is already a Registration Screen, it's a bit different, so I'm not really sure of what needs to be done, should I override this screen to be like the screenshot or should I create a new register screen and keep the old one too?

[hetmann]

@danibonilha you can create a new register screen and keep the original one. We can have multiple registration/login/etc screens for reference and inspiration.

[palingheorghe]

Hi @nvh0412 @kostimarko @samcyn,
Thank you for your interest in Galio ❤️! Do you guys still want to have those screens assigned or should we let them open for other people to create and help with this issue?

Thanks! 🤙🏽

[samcyn]

@palingheorghe yes I want it assigned to me. I've started working on social profile screen already.

[kostimarko]

@palingheorghe Yes, I still want the one I've signed up for. I've created a pull request.

[AmeerHamzaRiaz]

Any tips/leads on how to build Menu Screen? I really love this design.

[palingheorghe]

Hi @AmeerHamzaRiaz ! That one is kind of complicated you'd have to use the Animated and PanResponder APIs. I'm not sure if you could just style the react-navigation drawer but I'm pretty sure it could be implemented in a module like that one. This was all for Hacktoberfest 2018 and Galio has matured. The focus has now shifted on fixing and creating more components. If you want to help out, check out our issues and maybe you'll find one that suits you.

Thanks!

[AmeerHamzaRiaz]

thanks @palingheorghe for your response. I found a component through which it can be implemented, I'll try to make it work with react-navigation (just for fun). Good luck with Galio.

[agungribowo]

Hacktoberfest 2019, not open again ?

[palingheorghe]

Not this year but next year we'll do it again! We've moved the galio app to galio-starter-kit repo. See you there with a new set of screens!