50-days-of-react-native

Author's note (of some sort)

While I think this somewhat undersells what I can do when motivated, it sort of fills in for some of them. They are a sort of challenge because they are built mostly for this demonstration, and very few (if at all) have been used for my professional work.

It is still a work in progress (until I reach 50 seperate pared down applications, so. this might take a while), so I am open to suggestions on new things to add.

This is a personal demonstration so while issues are very much encouraged, PRs are unfortunately not. I'm very sorry about this.

Installation:

Please note that the setup instruction assumes that you have setup your development environment to run react native apps. If you haven't, see instructions here

• download the repository as a zip file or clone it via git clone https://github.com/Nnanyielugo/50-days-of-react-native.git. If you use ssh, replace the url with [email protected]:Nnanyielugo/50-days-of-react-native.git
• navigate to the root folder of the project.
• create a .env file in the root folder and add OPEN_WEATHER_API_KEY and GOOGLE_MAPS_API_KEY from open weather and google cloud console.
• make sure you enable Geocoding API, Maps SDK, and Places API on google maps API.
• run npm install
• run npm run set-env && npm run android to run the app. Please note that ios support is in progress.

Demos

Menu

Music Player

StopWatch

Weather

Tinder Swipe

Video

TicTacToe

Image Carousel

Reels

Calculator

Nearby Places

Woodoku

TODO

• Upgrade to RN 0.64
• Upgrade to RN 0.69
• integrate TS
• refactor stopwatch
• add basic navigation
• welcome pages
• tinder swipe cards
• add ios support
• notes (Samsung notes implementation)
• weather app
• music player
• video player
• reels
• pdf reader
• core animation and masks (twitter entrance animation)
• tic-tac-toe
• app menu
• custom swipe transitions
• segmented control views
• mapview and find geolocation
• pan gesture (move objects around, specify background, specify object, and toggle spring back (with animation))
• pattern unlock (with gesture)
• fuzzy search
• sortable blocks
• multi page reminder
• D3.js samples (Webview)
• scrollable tab (old youtube example?)
• imessage gradient
• push notification
• drag and drop
• image carousel
• action sheet
• jumpbar
• pull to refresh
• calculator
• woodoku
• basic charts
• dynamic charts (with chart information)
• basic run tracker (hint: geolocation.watchPosition)
• mapview with directions
• animated chat heads
• google calendar
• run tracker
• currency converter