Software Engineering :: Programming :: Languages :: JavaScript :: ReactJS :: Native :: React Native Tutorial

readme.md

Software Engineering :: Programming :: Languages :: JavaScript :: ReactJS :: Native :: React Native Tutorial

⪼ Made with 💜 by Polyglot.

• ..

References

• React Native Easy Splash Screen

Course

When you’re ready, go here to sign back into your Thinkific account: https://www.thinkific.com/signin/

Outline

System Requirements

• CocoaPods: brew install cocoapods
• Yarn: brew install yarn
• Imagemagick: brew install imagemagick

install the Xcode Command Line Tools

xcode-select --install
sudo xcodebuild -license accept
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
xcode-select -p

Application Init

npx react-native@latest init GoAskYourAiParents

Application Bootstrap

> npm i -g react-native-cli expo-cli --force
> brew install cocoapods
> expo init --template bare-minimum audioshrine
> cd audioshrine

NOTE: if there are cocoapod errors with init, use the following command within the project directory: pod install --project-directory=./ios/ --repo-update

Listing Available Simulators

iOS

> xcrun simctl list devices

Android

> ...

Running React Native App on Simulator

iOS

> npx react-native run-ios --simulator="iPhone Xs Max"

Android

> ...

Running React Native App on Device

Splash Screen

• React Native Easy Splash Screen

Navigation

> yarn add \
  @react-navigation/native \
  @react-navigation/stack \
  react-native-reanimated \
  react-native-gesture-handler \
  react-native-screens \
  react-native-safe-area-context \
  @react-native-community/masked-view
  
> pod install --project-directory=./ios/

Responsive Font Sizes

> yarn add react-native-responsive-dimensions

Background Gradients

> yarn add react-native-svg
> pod install --project-directory=./ios/

Home Screen

> yarn add react-native-svg
> pod install --project-directory=./ios/

Category Choice Screen

> yarn add react-native-square-grid

Game Play Screen

> yarn add react-native-elements
> yarn add react-native-vector-icons
> pod install --project-directory=./ios/

edit ios/tipoff/Info.plist

  <key>UIAppFonts</key>
  <array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>Zocial.ttf</string>
  </array>
</dict>
</plist>

App Icons

• bamlab/react-native-make
• generator to automatically generate icons for your react native app from a single icon file
• How to add icons to React Native app (manually)

> yarn add -D @bam.tech/react-native-make
> npx react-native set-icon --path assets/icons/appicon.png --platform all

Install Ruby Bundler Gem to get bundle binary

❯ cd ios
~
ios❯ sudo gem install bundler
Password:
Fetching bundler-2.1.4.gem
Successfully installed bundler-2.1.4
Parsing documentation for bundler-2.1.4
Installing ri documentation for bundler-2.1.4
Done installing documentation for bundler after 3 seconds
1 gem installed
~
ios❯ which bundle
/usr/local/bin/bundle
~
ios❯ bundle init
Writing new Gemfile to /Users/wilmoore/Documents/projects/@realpolyglot/tipoff/android/Gemfile
~
ios❯ $EDITOR Gemfile # gem "fastlane"
~
ios❯ cat Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "cocoapods"
gem "fastlane"
~
ios❯ bundle config set path 'vendor/bundle'
ios❯ bundle update
...
Installing fastlane 2.154.0
Bundle updated!
~
ios❯ cd ../android/
android❯ cp ../ios/Gemfile .
android❯ bundle update
...
Installing fastlane 2.154.0
Bundle updated!
~

Setup Fastlane

lanes

upload_to_app_store
sync_code_signing
upload_to_play_store
upload_to_testflight
build_ios_app
create_app_online

App Store Connect

https://developer.apple.com (account)

Fastlane Setup (ios)

❯ cd ios
ios❯ open tipoff.xcworkspace
# Display Name, Bundle Identifier, Version, Build
~
ios❯ bundle exec fastlane produce
~
ios❯ bundle exec fastlane init
~
ios❯ bundle exec fastlane match init
~
ios❯ bundle exec fastlane match development
~
ios❯ bundle exec fastlane match appstore
~
ios❯ open tipoff.xcworkspace
~
ios❯ bundle exec fastlane beta
ios❯ bundle exec fastlane release

References

pre-ship checklists

• React Native Final Steps

deployment

• bitrise
• build environments
• fastlane
• React Native Continuous Deployment
• Build the React Native Deployment Pipeline of Your Dreams in 1 Hour with Fastlane, Circleci, Codepush and Appcenter.
• How to Deploy a React Native App for iOS and Android
• React Native Cheat Sheet

Books

• FullStack React Native

Tutorials

• An efficient way to structure React Native projects
• Tutorial: How to Build a Slack Clone with React Native — Part 1

Courses

• Frontend Masters: React Native, v2
• React Native by Example

---