{"componentChunkName":"component---src-templates-blog-post-js","path":"/react-native/","result":{"data":{"site":{"siteMetadata":{"title":"Recipes Collection","author":"Internet Community"}},"markdownRemark":{"id":"863cbaae-ffea-50ac-b2a6-02f0f814b744","html":"

Basics

\n

Q - Explain some of the fundamental trade offs between building with React Native and building a “true” native app.

\n\n

Q - What is the relationship between React Native and React?

\n\n
\n

Getting Started

\n

Q - How to setup React Native for development?

\n

You will need Node, Watchman, the React Native command line interface, and Xcode (in order to set up the necessary tooling to build your React Native app for iOS).

\n
    \n
  1. \n

    Install Node, Watchman, JDK

    \n

    We recommend installing Node, Watchman, and JDK using Homebrew. Run the following commands in a Terminal after installing Homebrew:

    \n
    brew install node\nbrew install watchman\nbrew tap AdoptOpenJDK/openjdk\nbrew cask install adoptopenjdk8
    \n

    If you have already installed Node on your system, make sure it is Node 8.3 or newer.

    \n

    Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

    \n

    If you have already installed JDK on your system, make sure it is JDK 8 or newer.

    \n
    2. \n
  2. \n

    Install React Native CLI

    \n

    Node comes with npm, which lets you install the React Native command line interface.

    \n
    npm install -g react-native-cli
    \n
    3. \n
  3. \n

    Install XCode

    \n

    The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

    \n

    If you have already installed Xcode on your system, make sure it is version 9.4 or newer.

    \n
    4. \n
  4. \n

    Install XCode Command Line Tools

    \n

    You will also need to install the Xcode Command Line Tools. Open Xcode, then choose “Preferences…” from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

    \n

    \n
    5. \n
\n

Reference - https://facebook.github.io/react-native/docs/getting-started

\n

Q - How to create a new application?

\n

Use the React Native command line interface to generate a new React Native project called “AwesomeProject”

\n
react-native init AwesomeProject
\n

You can also use a third-party CLI to init your React Native app, such as Ignite CLI.

\n

If you want to start a new project with a specific React Native version, you can use the —version argument

\n
react-native init AwesomeProject --version X.XX.X
\n
react-native init AwesomeProject --version react-native@next
\n

Reference - https://facebook.github.io/react-native/docs/getting-started

\n

Q - How to run your React Native application?

\n

Run react-native run-ios inside your React Native project folder

\n
cd AwesomeProject\nreact-native run-ios
\n

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode.

\n

Reference - https://facebook.github.io/react-native/docs/getting-started

\n
\n

Style

\n
\n

Height and Width

\n
\n

Handling Text Input

\n

Q - How to avoid keyboard covering text inputs in React Native?

\n

https://codeburst.io/react-native-keyboard-covering-inputs-72a9d3072689

\n
\n

Handling Touches

\n
\n

Using a ScrollView

\n
\n

Using List Views

\n
\n

Networking

\n
\n

Animations

\n
\n

Accessibility

\n
\n

Timers

\n
\n

Upgrading

\n

Q - How to upgrade your project to new React Native version?

\n

Because typical React Native projects are essentially made up of an Android project, an iOS project, and a JavaScript project, upgrading can be rather tricky. Here’s what you need to do to upgrade from an older version of React Native.

\n

Option 1

\n

The React Native CLI comes with upgrade command that provides a one-step operation to upgrade the source files with a minimum of conflicts, thanks to the rn-diff-purge project.

\n
    \n
  1. \n

    Run the upgrade command

    \n

    Run the following command to start the process of upgrading to the latest version:

    \n
    react-native upgrade
    \n

    You may specify a React Native version by passing an argument, e.g. to upgrade to 0.59.0-rc.0 run

    \n
    react-native upgrade 0.59.0-rc.0
    \n

    The project is upgraded using git apply with 3-way merge. That’s why it may happen you’ll need to resolve some conflicts.

    \n
    2. \n
  2. \n

    Resolve the conflicts

    \n

    Conflicted files include delimiters which make very clear where the changes come from. For example

    \n
     13B07F951A680F5B00A75B9A /* Release */ = {\n   isa = XCBuildConfiguration;\n   buildSettings = {\n     ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;\n <<<<<<< ours\n     CODE_SIGN_IDENTITY = \"iPhone Developer\";\n     FRAMEWORK_SEARCH_PATHS = (\n       \"$(inherited)\",\n       \"$(PROJECT_DIR)/HockeySDK.embeddedframework\",\n       \"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework\",\n     );\n =======\n     CURRENT_PROJECT_VERSION = 1;\n >>>>>>> theirs\n     HEADER_SEARCH_PATHS = (\n       \"$(inherited)\",\n       /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,\n       \"$(SRCROOT)/../node_modules/react-native/React/**\",\n       \"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**\",\n     );
    \n

    You can think of “ours” as “your team” and “theirs” as “the React Native dev team”.

    \n
    3. \n
\n

Alternative

\n

Use this only in case the above didn’t work.

\n
    \n
  1. \n

    Upgrade the react-native dependency

    \n

    Note the latest version of the react-native npm package from here (or use npm info react-native to check).

    \n

    Now install that version of react-native in your project with npm install --save

    \n
    $ npm install --save react-native@X.Y\n// where X.Y is the semantic version you are upgrading to\nnpm WARN peerDependencies The peer dependency react@~R included from react-native...
    \n

    If you saw a warning about the peerDependency, also upgrade react by running:

    \n
    $ npm install --save react@R\n// where R is the new version of react from the peerDependency warning you saw
    \n
    2. \n
  2. \n

    Upgrade your project templates

    \n

    The new npm package may contain updates to the files that are normally generated when you run react-native init, like the iOS and the Android sub-projects.

    \n

    You may consult rn-diff-purge(https://github.com/pvinis/rn-diff-purge) to see if there were changes in the project template files. In case there weren’t any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.

    \n

    If there were major changes, run this in a terminal to get these

    \n
    $ react-native upgrade
    \n

    This will check your files against the latest template and perform the following:

    \n\n
    3. \n
\n

Manual upgrade

\n

If none of the above methods work, we could upgrade using manual steps.

\n

Refer React Native upgrade guide for manually upgrading.\nhttps://react-native-community.github.io/upgrade-helper/

\n

Reference - https://facebook.github.io/react-native/docs/upgrading

\n

Q - What web application can be used to find the diff when upgrading?

\n

React Native upgrade guide - https://react-native-community.github.io/upgrade-helper/

\n

Reference - https://github.com/react-native-community/rn-diff-purge

\n
\n

Simulator

\n

Q - How to fix the issue of iphone simulator animating very slowly?

\n\n
\n

Third Party Libraries/ Tools

\n

MobileIron

\n

Q - What is MobileIron?

\n\n

Reference - https://www.mobileiron.com/en/what-mobileiron

","timeToRead":8,"frontmatter":{"title":"React Native Notes","date":"September 02, 2019","spoiler":"Following are some notes collected through internet"},"fields":{"slug":"/react-native/","langKey":"en"}}},"pageContext":{"slug":"/react-native/","previous":{"fields":{"slug":"/security/","langKey":"en","directoryName":"security","maybeAbsoluteLinks":[]},"frontmatter":{"title":"Security Notes"}},"next":{"fields":{"slug":"/react/","langKey":"en","directoryName":"react","maybeAbsoluteLinks":[]},"frontmatter":{"title":"React Notes"}},"translations":[],"translatedLinks":[]}}}