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

• 100 Days of Swift
• 30 Days of Swift
• 30 Days of React Native

---

How to use this Repo ⁉️

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

Simple StopWatch Timer

• 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

• 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

• 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

• 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

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

• Expo
• react-native-cli

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

Lottie Example

• 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

• 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

• 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

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

Code | Tutorial |Tools: react-native-cli

Camera Roll in React Native

• 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