⚛️ + 📱 A self taught way of learning React Native.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
DaysofReactNative carousel effect Aug 13, 2018
rn-themes-app add rn-themes-app Aug 21, 2018
rncameraRoll add RN Camera Roll example Aug 21, 2018
.gitignore update Aug 8, 2018
README.md update tutorials Sep 30, 2018

README.md

30 Days of React Native ⚛️ + 📱

A self taught way of learning React Native.

Philosophy 🤔

It’s a project in which you create at least 30 working modules/apps using React Native.

The target it to get hands on experience with React Native ASAP.

Motivation/Inspiration 🤯 👏

The idea for this repo is inspired by awesome developers out there who took initiative of doing something similar


How to use this Repo ⁉️

This file is a listing to other Standalone apps that have been published as separate repositories.

Simple StopWatch Timer

Demo

  • build a Stop Watch Timer interface
  • use play, pause and reset buttons
  • use react-native-vector-icons/MaterialIcons for display icons for buttons
  • use react-native link

Code | Tools: react-native-cli

Custom Font

Demo

  • use two text fields two
  • use two custom fonts for separate text fields
  • use assets/fonts dir to store fonts in app
  • use package.json/rnpm to define custom font for linking
  • use react-native link to link font files for iOS

Code | Tutorial by Dave Hudson | Tools: react-native-cli

Carousel Effect

Demo

  • use ImageBackground
  • use react-native-blur for background image blur view
  • use ListView to render images from an array and display them horizontally
  • use showsVerticalScrollIndicator to display a scroll indicator

Code | Tools: react-native-cli

Weather Cards

Demo

  • linting with ESlint, used custom eslint config
  • build an interface with Card View and Input
  • use Activity Indicator to indicate loading
  • use StatusBar
  • Fetching Data from an API
  • use KeyboardAvoidingView to add padding to view on keyboard toggle
  • build custom Card View
  • use ImageBackground to display background image
  • use TextInput for user input and local state management to fetch data based on search

Code | Article | Tools: CRNA

Geolocation and Permissions API

Demo Demo

This is divided in two parts:

  • using Expo
  • using react-native-cli
  • use navigator available in JS natively
  • use getCurrentPosition to fetch the current coordinates
  • use Permissions API from Expo
  • Request permission to use Location Services in Android when using react-native-cli

Code

Tutorial | Tools: Expo-cli & react-native-cli

Lottie Example

Demo

  • use Lottie- an animataion lib that renders Adobe Effect files as static images
  • fetch animation as a json file
  • create functions for loading animation file and playing it

Code | Tutorial | Tools: Expo

Change Themes in an RN App

Demo

  • use redux to manage state
  • Demonstrate changing themes
  • change background color of the app on select
  • use react-navigation to navigate to different screens

Code | Tools: Expo

Pomodoro Timer

Demo

  • build a timer interface with play and pause button that displays time in seconds and minutes
  • use Redux to manage state and create store
  • use re-ducks philosophy to manage Redux files (see /Timer)
  • build resuable stateless Button component
  • use PropTypes
  • use Vector icons from FontAwesome

Code | Tutorial | Tools: Expo-CLI

React Navigation Example

Demo Demo

  • use react-navigation v2.0+
  • use StackNavigator
  • use TabNavigator

Code | Tutorial |Tools: react-native-cli

Camera Roll in React Native

Demo

  • use react-navigation to navigate between different screens
  • use CameraRoll from React-Native API to access iOS device images
  • use react-native-fetch-blob for file access, transfer image from unsplash-api to iOS device
  • use react-native-share to share the image
  • use Modal to toggle a Modal Screen

Code | Tutorial by Nader Dabit | Tools: react-native-cli