A framework for building native apps with React.

Overview

React Native

Learn once, write anywhere:
Build mobile apps with React.

React Native is released under the MIT license. Current CircleCI build status. Current npm package version. PRs welcome! Follow @reactnative

Getting Started · Learn the Basics · Showcase · Contribute · Community · Support

React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.

  • Declarative. React makes it painless to create interactive UIs. Declarative views make your code more predictable and easier to debug.
  • Component-Based. Build encapsulated components that manage their state, then compose them to make complex UIs.
  • Developer Velocity. See local changes in seconds. Changes to JavaScript code can be live reloaded without rebuilding the native app.
  • Portability. Reuse code across iOS, Android, and other platforms.

React Native is developed and supported by many companies and individual core contributors. Find out more in our ecosystem overview.

Contents

📋 Requirements

React Native apps may target iOS 11.0 and Android 5.0 (API 21) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like Expo can be used to work around this.

🎉 Building your first React Native app

Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:

📖 Documentation

The full documentation for React Native can be found on our website.

The React Native documentation discusses components, APIs, and topics that are specific to React Native. For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.

The source for the React Native documentation and website is hosted on a separate repo, @facebook/react-native-website.

🚀 Upgrading

Upgrading to new versions of React Native may give you access to more APIs, views, developer tools, and other goodies. See the Upgrading Guide for instructions.

React Native releases are discussed in the React Native Community, @react-native-community/react-native-releases.

👏 How to Contribute

The main purpose of this repository is to continue evolving React Native core. We want to make contributing to this project as easy and transparent as possible, and we are grateful to the community for contributing bug fixes and improvements. Read below to learn how you can take part in improving React Native.

Code of Conduct

Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read our Contributing Guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native.

Open Source Roadmap

You can learn more about our vision for React Native in the Roadmap.

Good First Issues

We have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.

Discussions

Larger discussions and proposals are discussed in @react-native-community/discussions-and-proposals.

📄 License

React Native is MIT licensed, as found in the LICENSE file.

React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.

Comments
  • [Workarounds] Packager unable to resolve module from /Users/node_modules/

    [Workarounds] Packager unable to resolve module from /Users/node_modules/

    There are various issues scattered around the repo related to this issue. Basically what happens is, for some packages, when you try to require some-module in a file, for example,

    var someModule = require('some-module');
    

    It is unable to resolve the package and the following error appears,

    Unable to resolve module some-module from /Users/username/projectname/AwesomeProject/index.js: Invalid directory /Users/node_modules/some-module
    

    This error message is a symptom of the packager not being able to find some-module. It'll walk up the directory tree until it finds node_modules/some-module. It just so happens that /Users is the last directory to try, hence the weird /Users/node_modules directory in the error message (h/t @philikon).

    Workarounds

    Currently, the workarounds seem to be,

    • Delete the node_modules folder - rm -rf node_modules && npm install
    • Reset packager cache - rm -fr $TMPDIR/react-* or node_modules/react-native/packager/packager.sh --reset-cache
    • Clear watchman watches - watchman watch-del-all
    • Recreate the project from scratch
    JavaScript Help Wanted :octocat: Tech: Bundler 📦 Resolution: Locked 📮Known Issues Bug 
    opened by satya164 498
  • NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'

    NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'

    Is this a bug report?

    yes

    Have you read the Contributing Guidelines?

    yes, I am sorry that I cant offer more information about this exception except for this stack trace because the crash report was collected from google analytics, I have no idea to reappear this exception.

    Environment

    Environment: OS: macOS Sierra 10.12.6 Node: 8.4.0 Yarn: 0.27.5 npm: 5.4.0 Android Studio: 3.0

    Packages: (wanted => installed) react-native: 0.51.0 => 0.51.0 react: 16.0.0-alpha.12 => 16.0.0-alpha.12

    Target Platform: Android (7.1.1) mobile:MIX 2 android:7.1.1 java.lang.NullPointerException:
    tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference at android.graphics.drawable.DrawableContainer$DrawableContainerState.getChild(DrawableContainer.java:888) at android.graphics.drawable.DrawableContainer.selectDrawable(DrawableContainer.java:466) at android.graphics.drawable.StateListDrawable.onStateChange(StateListDrawable.java:104) at android.graphics.drawable.Drawable.setState(Drawable.java:735) at android.graphics.drawable.DrawableWrapper.onStateChange(DrawableWrapper.java:331) at android.graphics.drawable.Drawable.setState(Drawable.java:735) at android.graphics.drawable.LayerDrawable.onStateChange(LayerDrawable.java:1488) at android.graphics.drawable.Drawable.setState(Drawable.java:735) at android.view.View.drawableStateChanged(View.java:18002) at android.widget.TextView.drawableStateChanged(TextView.java:4097) at android.view.View.refreshDrawableState(View.java:18071) at android.view.View.setPressed(View.java:8543) at android.view.View.setPressed(View.java:8521) at android.view.View.onTouchEvent(View.java:11218) at android.widget.TextView.onTouchEvent(TextView.java:8467) at com.facebook.react.views.textinput.ReactEditText.onTouchEvent(ReactEditText.java:150)

    Ran Commands Platform: Android Bug 
    opened by wxjer 405
  • UnableToResolveError: Unable to resolve module `AccessibilityInfo`

    UnableToResolveError: Unable to resolve module `AccessibilityInfo`

    Description

    I basically just cloned an existing project with a minimal setup, did yarn install and node node_modules/react-native/local-cli/cli.js run-ios. It started but the packer failed with:

    error: bundling: UnableToResolveError: Unable to resolve module `AccessibilityInfo` from `/Users/phillipp/Work/***/***/node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module does not exist in the module map or in these directories:
      /Users/phillipp/Work/***/***/node_modules/react-native/node_modules
    ,   /Users/phillipp/Work/***/***/node_modules
    

    I found get AccessibilityInfo() { return require('AccessibilityInfo'); }, in the /Users/phillipp/Work/***/***/node_modules/react-native/Libraries/react-native/react-native-implementation.js file but I have no clue where it wants to require that from. It seems to be a RN core thing.

    Here is the package.json for those who are curious:

    
    {
      "name": "***",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
      },
      "dependencies": {
        "base64-js": "^1.2.0",
        "react": "^16.0.0-alpha.6",
        "react-native": "^0.44.0",
        "react-native-ble-manager": "^3.2.0",
        "react-native-checkbox": "^1.1.0",
        "react-native-color-picker": "^0.2.1",
        "react-native-drawer": "^2.3.0",
        "react-native-dropdown": "0.0.6",
        "react-native-image-picker": "^0.25.5",
        "react-native-list-popover": "^1.0.5",
        "react-native-modal-picker": "0.0.16",
        "react-native-orientation": "^1.17.0",
        "react-native-router-flux": "^3.37.0",
        "react-native-selectbox": "^0.1.0",
        "react-native-selection": "^1.3.5",
        "react-native-selectme": "^1.2.3",
        "react-native-sound": "^0.9.1",
        "react-native-vector-icons": "^4.0.1"
      },
      "devDependencies": {
        "babel-jest": "18.0.0",
        "babel-preset-react-native": "1.9.1",
        "jest": "18.1.0",
        "react-test-renderer": "~15.4.0"
      },
      "jest": {
        "preset": "react-native"
      }
    }
    
    

    I already tried everything I found on the internet (reinstalling node modules, cleaning npm, yarn and watchman caches, deleting react files from temp dir, etc.)

    Additional Information

    • React Native version: ^0.44.0
    • Platform: ios
    • Development Operating System: OSX
    • Dev tools: XCode Version 8.0 (8A218a)
    Ran Commands Resolution: Locked 
    opened by PhillippOhlandt 321
  • React Native 0.62.* [TypeError: Network request failed] on file upload

    React Native 0.62.* [TypeError: Network request failed] on file upload

    Please provide all the information requested. Issues that do not follow this format are likely to stall.

    Description

    After upgrading from 0.61.4 to 0.62.0 the app will not upload files anymore from Android (all other requests are working fine)

    React Native version:

    0.62.0

    Steps To Reproduce

    1. Install a fresh ReactNative app via CLI
    2. Upload a file to the emulator
    3. Try to upload a file using fetch
    
    import Picker from "react-native-image-picker"
    import {request, PERMISSIONS, RESULTS} from 'react-native-permissions';
    
    class App extends React.Component {
    
      async componentDidMount() {
    
        try {
          await request(PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE)
          await Picker.launchImageLibrary({noData: true}, async (file) => {
            try {
               const body = new FormData()
               body.append("file", { type: file.type, size: file.fileSize, uri: `file://${file.path}`, name: file.fileName })
               const headers = { "content-type": "multipart/form-data", "accept": "application/json" }
    
              const req = await fetch("ANY_SERVER/upload/image", {
                method: "POST",
                headers,
                body
              })
              console.log(req.status)
            }  catch (e) {
              console.log(e)
            }
          })
        } catch (e) {
          console.log(e)
        }
      }
    
      render(){
        return <View/>
      }
    }
    

    Expected Results

    The request should reach the server to upload the file

    Snack, code example, screenshot, or link to a repository:

    https://snack.expo.io/01W!bybf_ [Mon Apr 06 2020 21:29:18.704] LOG [TypeError: Network request failed]

    Platform: Android Resolution: Locked Tool: Flipper Needs: React Native Team Attention 
    opened by abumostafa 308
  • Latest react-native app doesn't work

    Latest react-native app doesn't work ":CFBundleIdentifier", Does Not Exist

    On OS X El Capitan v10.11.4

    node --version v6.0.0 npm --v 3.8.8 react-native-cli: 0.2.0 react-native: 0.24.1 watchman --v 4.4.0 xcode 7.3

    $ react-native init AwesomeProject $ cd AwesomeProject $ react-native run-ios

    ** BUILD FAILED **
    
    
    The following build commands failed:
        PhaseScriptExecution Run\ Script /development/misc/react/AwesomeProject/ios/build/Build/Intermediates/React.build/Debug-iphonesimulator/React.build/Script-006B79A01A781F38006873D1.sh
    (1 failure)
    Installing build/Build/Products/Debug-iphonesimulator/AwesomeProject.app
    An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
    Failed to install the requested application
    An application bundle was not found at the provided path.
    Provide a valid path to the desired application bundle.
    Print: Entry, ":CFBundleIdentifier", Does Not Exist
    /development/misc/react/AwesomeProject/node_modules/promise/lib/done.js:10
          throw err;
          ^
    
    Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/AwesomeProject.app/Info.plist
    Print: Entry, ":CFBundleIdentifier", Does Not Exist
    
        at checkExecSyncError (child_process.js:470:13)
        at Object.execFileSync (child_process.js:490:13)
        at _runIOS (runIOS.js:91:34)
        at runIOS.js:24:5
        at tryCallTwo (/development/misc/react/AwesomeProject/node_modules/promise/lib/core.js:45:5)
        at doResolve (/development/misc/react/AwesomeProject/node_modules/promise/lib/core.js:200:13)
        at new Promise (/development/misc/react/AwesomeProject/node_modules/promise/lib/core.js:66:3)
        at Array.runIOS (runIOS.js:23:10)
        at Object.run (/development/misc/react/AwesomeProject/node_modules/react-native/local-cli/cli.js:86:13)
        at Object.<anonymous> (/usr/local/lib/node_modules/react-native-cli/index.js:88:7)
    
    Resolution: Locked 
    opened by arun0009 294
  • Android build failed: 'Failed to list versions for com.facebook.react:react-native.'

    Android build failed: 'Failed to list versions for com.facebook.react:react-native.'

    Description

    • What went wrong: Could not determine the dependencies of task ':app:compileDebugKotlin'.

    Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not resolve com.facebook.react:react-native:+. Required by: project :app project :app > project :react-native-push-notification project :app > project :react-native-code-push project :app > project :react-native-async-storage_async-storage project :app > project :react-native-community_blur project :app > project :react-native-community_clipboard project :app > project :react-native-community_datetimepicker project :app > project :react-native-community_masked-view project :app > project :react-native-community_netinfo project :app > project :react-native-community_picker project :app > project :react-native-firebase_analytics project :app > project :react-native-firebase_app project :app > project :react-native-firebase_crashlytics project :app > project :sumsub_react-native-mobilesdk-module project :app > project :react-native-action-sheet project :app > project :react-native-appsflyer project :app > project :react-native-camera project :app > project :react-native-config project :app > project :react-native-device-info project :app > project :react-native-fbsdk-next project :app > project :react-native-file-viewer project :app > project :react-native-fs project :app > project :react-native-geolocation-service project :app > project :react-native-gesture-handler project :app > project :react-native-get-random-values project :app > project :react-native-haptic-feedback project :app > project :react-native-idfa project :app > project :react-native-image-crop-picker project :app > project :react-native-image-picker project :app > project :react-native-maps project :app > project :react-native-permissions project :app > project :react-native-safe-area-context project :app > project :react-native-screens project :app > project :react-native-set-soft-input-mode project :app > project :react-native-share project :app > project :react-native-shared-element project :app > project :react-native-sms-retriever project :app > project :react-native-splash-screen project :app > project :react-native-svg project :app > project :react-native-text-input-mask project :app > project :react-native-vector-icons project :app > project :react-native-version-number project :app > project :react-native-webview project :app > project :react-native-yamap > Failed to list versions for com.facebook.react:react-native. > Unable to load Maven meta-data from https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml. > Could not HEAD 'https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml'. > Read timed out

    Version

    0.65.1

    Output of npx react-native info

    System: OS: macOS 13.0 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 55.72 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node Yarn: 3.1.1 - /usr/local/bin/yarn npm: 8.16.0 - ~/WebstormProjects/mono-front/node_modules/.bin/npm Watchman: 2022.08.15.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /Users/magdaaa/.rvm/gems/ruby-2.7.4/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: 11.0.16 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.65.1 => 0.65.1 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

    Steps to reproduce

    start to build android app

    • react-native run-android

    Snack, code example, screenshot, or link to a repository

    build.gradle

    dependencies { ... implementation "com.facebook.react:react-native:+" ... }

    Platform: Android Resolution: Duplicate 
    opened by aamagda 272
  • Geolocation 'enableHighAccuracy' on Android always times out

    Geolocation 'enableHighAccuracy' on Android always times out

    Developing an Android app, whilst debugging on my Android Device running on 6.1, the geolocation api always returns an error callback with the message Location request timed out.

    navigator.geolocation.getCurrentPosition(
          (position) => {
            console.log(position);
           },
           (error) => {
            console.log(error)
          },
          {enableHighAccuracy: true, timeout: 20000, maximumAge: 10000}
    );
    

    If I toggle enableHighAccuracy option to false, the api works fine. In high accuracy mode, the timeout always takes as long as I specify in the timeout option i.e. 20 seconds.

    I've tried running with dev mode turned off.

    Should high accuracy mode work in Android?

    Help Wanted :octocat: Ran Commands Platform: Android Resolution: Locked API: Geolocation Bug 
    opened by Findiglay 239
  • [FlatList] Rows aren't rendered until scroll

    [FlatList] Rows aren't rendered until scroll

    Hi, I have list view which displays partially local and partially remote data. Local data are initial for ListView.DataSource. This datasource is set in state of my custom component which wraps ListView and passed in render method to ListView. When are remote data received, new datasource is cloned by cloneWithRowsAndSections method and set to state of custom component. Problem is that are re-rendered only already displayed rows and new rows are rendered after scroll.

    renderbug

    Is it bug or how I should to force rendering of ListView? With react-native 0.5 it worked but after upgrade to 0.6 it behaves as described above.

    Resolution: Locked 
    opened by michalraska 223
  • [FIXED] Android build failures `No matching variant of com.facebook.react:react-native:0.71.0-rc.0 was found.`

    [FIXED] Android build failures `No matching variant of com.facebook.react:react-native:0.71.0-rc.0 was found.`

    Description

    Hey all, I'd like to share an update on a series of build failures React Native & Expo users have been experiencing when building Android apps starting from November 4th 2022.

    We'd like to apologize for the disruption this caused to your developer workflows. The React team is fully committed to delivering a smooth developer experience, and we take this type of issues extremely seriously.

    📢 Patches for >= 0.63

    We have prepared releases for all the main versions of react-native with an hotfix:

    🛳 0.70.5: https://github.com/facebook/react-native/releases/tag/v0.70.5 🛳️ 0.69.7: https://github.com/facebook/react-native/releases/tag/v0.69.7 🛳 0.68.5: https://github.com/facebook/react-native/releases/tag/v0.68.5 🛳️ 0.67.5: https://github.com/facebook/react-native/releases/tag/v0.67.5 🛳️ 0.66.5: https://github.com/facebook/react-native/releases/tag/v0.66.5 🛳️ 0.65.3: https://github.com/facebook/react-native/releases/tag/v0.65.3 🛳️ 0.64.4: https://github.com/facebook/react-native/releases/tag/v0.64.4 🛳️ 0.63.5: https://github.com/facebook/react-native/releases/tag/v0.63.5

    By updating to these patch versions, your Android build should start working again.

    To do so, in your package.json change react-native's version to the relevant new patch (ex. if you are on 0.64.3, change to 0.64.4) and run yarn install. No other changes should be necessary, but you might want to clean your android artifacts with a cd android && ./gradlew clean before trying to re-run your Android app.

    Fix for older react-native (< 0.63)

    The fix above only works on gradle 6.2 and higher. Older react-native used older gradle.

    You may determine your gradle version by looking in your /android/gradle/wrapper/gradle-wrapper.properties file.

    If you are on an older version of react-native (for example 0.63 or earlier) that uses gradle version 6.1 or below, you must use a different workaround as gradle 6.1 does not support exclusiveContent.

    Add this in the allprojects area of your android/buld.gradle file.

    def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())
    
    allprojects {
        configurations.all {
            resolutionStrategy {
                // Remove this override in 0.65+, as a proper fix is included in react-native itself.
                force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
            }
        }
    

    Instead of using exclusiveContent, the hotfix must force the version of React Native. The recommended hotfix shells out to node to read your current version of react-native. If you hard code the version of react-native, when you upgrade your project in the future, your build will fail if you forget to remove this hotfix.

    Note that this fix is fragile as the location of your package.json could be different if you are in a monorepo, and node might not be available if you use a node package manager like nvm.

    Thank you @mikehardy for finding and providing this fix in your comment.

    Technical Details

    The issue

    On November 4th 2022 we published the React Native version 0.71.0-rc0, the first release candidate for the 71 release series, on several public repositories. Specifically, this version was also published on Maven Central as we're updating our artifacts distribution strategy (technical details are explained below).

    This event resulted in build failures for Android on several users as they ended up downloading the wrong React Native version (0.71.0-rc0 instead of the version they were using in their project, say 0.68.0).

    The build error looks something like this:

    Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    A problem occurred configuring root project 'My Project'.
    Could not determine the dependencies of null.
    Could not resolve all task dependencies for configuration ':classpath'.
        > Could not resolve com.facebook.react:react-native:+.
          Required by:
              project :
        > No matching variant of com.facebook.react:react-native:0.71.0-rc.0 was found. 
          The consumer was configured to find a runtime of a library compatible with Java 11, 
          packaged as a jar, and its dependencies declared externally, as well 
          as attribute 'org.gradle.plugin.api-version' with value '7.3.3' but:
    

    Sadly, due to how older projects of React Native were created in the past, we couldn't simply re-publish older versions, and we're asking users to update their template using the fix suggested below.

    Why this happened

    Historically, the React Native template provided build.gradle files that contain a dependency on the React Native Android library as follows: implementation("com.facebook.react:react-native:+").

    Specifically, the + part of this dependency declaration is causing Gradle to pick the highest version among all the declared repositories (often referred as Gradle Dynamic versions). Till React Native version 0.70, we were shipping a Maven Repository inside the NPM package (inside the ./android folder). Starting from 0.71, we moved such folder and uploaded it to Maven Central.

    Using Gradle Dynamic versions (i.e. a + dependency) is considered an antipattern (see the various warnings and notes on this page), specifically as it can lead to scenarios like this one and generally exposes users to less-reproducible builds. This is exactly what happened in this scenario, as builds started failing without any changes to user projects.

    In 0.71 we cleaned up the new app template and removed all the + dependencies (see here) and we moved the template to use the React Native Gradle Plugin, which will allow us to prevent scenarios like this from happening in the future.

    Sadly, users on older versions, say 0.66.0, were still using a + version. This caused their build to query all the repositories for the highest available versions of the React Native. While the node_modules/react-native/android folder contained a valid 0.66.0 version, Gradle honoured the + version and fetched version 0.71.0-rc0 from Maven Central as it's higher from the semantic versioning ordering.

    The resolutionStrategy block in the fix is forcing the version of com.facebook.react:react-native to all the projects to the one provided by the version of React Native you're effectively using.

    Who is affected?

    All the React Native users on versions till 0.66.x are affected.

    React Native users on versions from 0.67 till 0.70 could be affected, based on which third-party library they're using.

    We verified that empty projects created on versions from 0.67 till 0.70 are not affected.

    However, some of your dependencies might end up causing a wrong resolution of the React Native Android library, resulting in build failures. For instance, we verified that a project on React Native 0.68.4 works well with Reanimated 2.12.0 but fails with Reanimated 2.10.0.

    We also worked with Expo to make sure that users on eas build received the aforementioned fix, so those users should not be affected.

    Why React Native Android was published on Maven Central?

    As mentioned, this was done as part of the implementation of the RFC #580.

    The summary of that RFC is to allow us to overcome the limitation of NPM in terms of package size. Moving to Maven Central will allow us to reduce the build time for our users and distribute more granular artifacts which will end up benefitting the overall developer experience. We'll be able to share information on this in the near future.

    In the initial Github Issue, several users suggest to remove the publishing from Maven Central or re-publish older artifacts to overcome the build failure without requesting a fix.

    This is sadly not an option as:

    1. Maven Central is an immutable artifacts storage and doesn't allow deletion.
    2. The publishing on 0.71.0-rc0 was effectively correct. We believe this episode is essentially a "mis-configuration" in user projects, and we believe the better solution is to distribute this fix to our users.

    How could this have been prevented

    We were already aware of the risk of having Gradle dynamic dependencies, so since React Native 0.67 we introduced an exclude rule on the Maven Central dependency inside the default template (see here for more context):

            mavenCentral {
                content {
                    excludeGroup("com.facebook.react")
                }
            }
    

    React Native used to be published on Maven Central till version 0.20.1 (published in 2016). We had users in the past accidentally fetching older versions of React from Maven Central, causing their build to fail.

    This exclude directive assured that you won't ever download React Native from Maven Central. However, third party libraries could declare repositories inside their repositories{} block which might not contain the exclude directive, resulting in potentially broken dependency resolution.

    React Native version 0.71.0 will ship with an updated template that relies on React Native Gradle Plugin. This new integration will allow us to protect us against future distributed build failures like this one, by allowing to re-distribute updated build logic across the whole ecosystem if needed (this should protect us also against similar outages like the JCenter outage happened last year).


    I'd like to thank everyone for your patience and understanding and I'd like to call out some members our our community, specifically @mikehardy, @Titozzz, @brentvatne, @inckie and all the other folks involved in the initial investigation and fix for this issue.

    We'll follow up with more updates in the future if needed.

    Nicola On behalf of the React team

    Platform: Android Resolution: Fixed RN Team 
    opened by cortinico 220
  • [e2e-testing][Appium] Adding support for android:id

    [e2e-testing][Appium] Adding support for android:id

    • Calling view.setId() with the matching resource-id of an id found in R.class when BaseViewManager.setTestId is called.
    • Adding TestIdUtil in common to store mappings for testID with attributed views and their original react tag value.
    • Changing the signature for Event Classes to require the View instead of the viewTag. This reduces the number of locations where TestIdUtil.getOriginalReactTag is called.
    • Overriding BaseViewManager.onDropViewInstance to perform TestIdUtil mapping cleanup.
    • This closes #9777.
    • In order for this to work properly, an id resource needs to be manually added to android/app/src/main/res/values/ids.xml. Here's the contents of that file:
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    <item name="something" type="id"/>
    </resources>
    
    CLA Signed 
    opened by jsdevel 209
  • Image cannot show image in iOS 14

    Image cannot show image in iOS 14

    Image cannot show image in iOS 14, but can show location, like: <Image source={ require('./images/add_scan_images.png') } />

    Environment: Xcode Version 12.0 beta (12A6159) Simulator: IPhone SE - 2nd generation - 14.0 "react": "16.11.0", "react-native": "0.62.2"

    Platform: iOS Resolution: Locked Component: Image Needs: Author Feedback Needs: Issue Template iOS 14 
    opened by caofeng 205
  • Android Keyboard height is wrong after playing video

    Android Keyboard height is wrong after playing video

    Description

    I add a listener for watching keyboard size:

    Keyboard.addListener('keyboardDidShow', e => {
          // ...
      });
    

    getDisplayCutout in ReactRootView returns as follows:

    image

    But when I play the video, the result of the call is as follows:

    image

    And causing the final keyboard height to be incorrect.

    Version

    0.70.6

    Output of npx react-native info

    System: OS: macOS 12.6 CPU: (8) arm64 Apple M1 Memory: 108.80 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.18.1 - ~/Development/skylark/node_modules/.bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.19.2 - ~/Development/skylark/node_modules/.bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: API Levels: 23, 24, 26, 28, 29, 30, 31, 32, 33 Build Tools: 26.0.2, 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.0 System Images: android-19 | Google APIs ARM EABI v7a, android-22 | ARM EABI v7a, android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom, android-24 | ARM 64 v8a, android-24 | Google APIs ARM 64 v8a, android-25 | Google APIs ARM 64 v8a, android-25 | Google APIs ARM EABI v7a, android-31 | Google APIs ARM 64 v8a, android-33 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 18.0.2 - /Users/arnozhang/.jenv/shims/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.6 => 0.70.6 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

    Steps to reproduce

    No

    Snack, code example, screenshot, or link to a repository

    No

    Needs: Triage :mag: 
    opened by arnozhang 0
  • KeyboardAvoidingView (behaviour = height) - wrong size when switching keyboards

    KeyboardAvoidingView (behaviour = height) - wrong size when switching keyboards

    Description

    Demonstration: 191499509-b41280a0-2969-4fe6-8796-c5695b999f27

    Problem: When switching keyboards (ABC, emoji, gif, etc) on IOS and Android in behaviour: height mode the size of component is incorrect.

    Version

    0.70.5

    Output of npx react-native info

    info Fetching system and libraries information...
    System:
        OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
        CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
        Memory: 18.64 GB / 31.20 GB
        Shell: 5.1.16 - /bin/bash
      Binaries:
        Node: 18.12.1 - /usr/bin/node
        Yarn: 1.22.19 - /usr/local/bin/yarn
        npm: 9.2.0 - /usr/bin/npm
        Watchman: Not Found
      SDKs:
        Android SDK: Not Found
      IDEs:
        Android Studio: Not Found
      Languages:
        Java: 11.0.17 - /usr/bin/javac
      npmPackages:
        @react-native-community/cli: Not Found
        react: 18.1.0 => 18.1.0 
        react-native: 0.70.5 => 0.70.5 
      npmGlobalPackages:
        *react-native*: Not Found
    

    Steps to reproduce

    please look at code provided. Focus on TextInput and then switch keyboards (ABC, emoji, gif, etc)

    Snack, code example, screenshot, or link to a repository

    Repro:

    import { StatusBar } from "expo-status-bar";
    import React from "react";
    import {
      KeyboardAvoidingView,
      StyleSheet,
      Text,
      TextInput,
      View,
    } from "react-native";
    
    export default function App() {
      return (
        <KeyboardAvoidingView style={styles.container} behavior="height">
          <Text>Open up App.js to start working on your app!</Text>
          <StatusBar style="auto" />
          <TextInput style={{ backgroundColor: "red", width: "100%" }} />
        </KeyboardAvoidingView>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        padding: 32,
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "space-between",
      },
    });
    
    Platform: Linux Component: KeyboardAvoidingView Component: Switch API: Keyboard Needs: Triage :mag: 
    opened by dranitski 1
  • Fresh React Native 0.70.6 IOS export xcode IPA failed with compileBitcode true

    Fresh React Native 0.70.6 IOS export xcode IPA failed with compileBitcode true

    Description

    React-Native's primary init project is failing on MacOS and xcode to be exported as IPA for development method with xcode or xcodebuild when compileBitcode is true.

    If I set compileBitcode to false, the export is working well and I am getting an IPA.

    Version

    0.70.6

    Output of npx react-native info

    System: OS: macOS 11.7.2 CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz Memory: 3.44 GB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 14.21.2 - /usr/local/opt/node@14/bin/node Yarn: Not Found npm: 6.14.17 - /usr/local/opt/node@14/bin/npm Watchman: 2022.12.26.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /Users/e2time.com/.rvm/gems/ruby-2.7.5/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0 Android SDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7784292 Xcode: 13.1/13A1030d - /usr/bin/xcodebuild Languages: Java: 13.0.2 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0  react-native: 0.70.6 => 0.70.6  react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

    Steps to reproduce

    1. Init a new react-native project:

      $ npx react-native init labapp

    2. Create a file exportOption.plist in labapp/ios/ directory with the following content:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
        <key>compileBitcode</key>
        <true />
        <key>method</key>
        <string>development</string>
        <key>destination</key>
        <string>export</string>
    </dict>
    </plist>
    
    1. Archive and export IPA with xcodebuild

    cd labapp
    
    npm ci 
    
    cd ios 
    
    pod install
    
    xcodebuild -workspace labapp.xcworkspace -scheme labapp -sdk iphoneos -configuration Release clean 
    
    xcodebuild -workspace labapp.xcworkspace -scheme labapp -sdk iphoneos -configuration Release archive -archivePath $PWD/build/labapp.xcarchive 
    
    xcodebuild -exportArchive -archivePath $PWD/build/labapp.xcarchive -exportOptionsPlist exportOption.plist -exportPath $PWD/build/
    

    Then I get the error output.

    Snack, code example, screenshot, or link to a repository

    Here the error output found at the end of the archive export:

    ** ARCHIVE SUCCEEDED **
    
    2023-01-02 17:00:13.479 xcodebuild[31738:136390] [MT] IDEDistribution: -[IDEDistributionLogging _createLoggingBundleAtPath:]: Created bundle at path "/var/folders/tg/r0d49l7x7pdcbtd0xx21r3w80000gn/T/labapp_2023-01-02_17-00-13.478.xcdistributionlogs".
    2023-01-02 17:00:17.536 xcodebuild[31738:136461] CFURLRequestSetHTTPCookieStorageAcceptPolicy_block_invoke: no longer implemented and should not be called
    2023-01-02 17:00:20.569 xcodebuild[31738:136390] -[NSNull path]: unrecognized selector sent to instance 0x7fff8083cea0
    ** INTERNAL ERROR: Uncaught exception **
    Uncaught Exception: -[NSNull path]: unrecognized selector sent to instance 0x7fff8083cea0
    Stack:
      0   __exceptionPreprocess (in CoreFoundation)
      1   objc_exception_throw (in libobjc.A.dylib)
      2   -[NSObject(NSObject) __retain_OA] (in CoreFoundation)
      3   ___forwarding___ (in CoreFoundation)
      4   _CF_forwarding_prep_0 (in CoreFoundation)
      5   -[IDEDistributionProcessingPipeline process:] (in IDEFoundation)
      6   -[IDEDistributionPackagingStep loadFromExportOptions:error:] (in IDEFoundation)
      7   -[IDEDistributionDriver runWithDestinationPath:error:] (in IDEFoundation)
      8   -[Xcode3CommandLineBuildTool _distributeArchiveAndExit] (in Xcode3Core)
      9   -[Xcode3CommandLineBuildTool run] (in Xcode3Core)
     10   main (in xcodebuild)
     11   start (in libdyld.dylib)
    
    Platform: iOS Needs: Triage :mag: 
    opened by Merlier 0
  • apk size

    apk size

    Description

    My app build apk size suddenly increase 46 MB to 126 MB please help to reduce size

    Version

    0.65.1

    Output of npx react-native info

    sdsds

    Steps to reproduce

    sdsd

    Snack, code example, screenshot, or link to a repository

    sdsds

    Needs: Triage :mag: 
    opened by Nasaruddin12 0
  • After upgraded to version 0.70.6 from 0.60.4. did the manual patching in react-native folder inside node-modules. The build is successful in ios but getting this error

    After upgraded to version 0.70.6 from 0.60.4. did the manual patching in react-native folder inside node-modules. The build is successful in ios but getting this error "TypeError: Cannot read property 'SHORT' of null, js engine: hermes"

    New Version

    0.66.4

    Old Version

    0.70.6

    Build Target(s)

    IOS

    Output of react-native info

    System: OS: macOS 12.6.1 CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz Memory: 123.99 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.4.2 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 7.18.1 - /usr/local/bin/npm Watchman: 2022.12.26.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: API Levels: 31, 33 Build Tools: 30.0.2, 30.0.3, 32.1.0, 33.0.1 System Images: android-31 | Android TV ARM 64 v8a, android-31 | Android TV Intel x86 Atom, android-31 | ARM 64 v8a, android-31 | Intel x86 Atom_64, android-31 | Google TV ARM 64 v8a, android-31 | Google TV Intel x86 Atom, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play ARM 64 v8a, android-31 | Google Play Intel x86 Atom_64, android-33 | Google APIs Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: 13.4/13F17a - /usr/bin/xcodebuild Languages: Java: 11.0.16.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.0.2 => 18.3.0-next-fecc288b7-20221025 react-native: 0.70.6 => 0.70.6 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

    Issue and Reproduction Steps

    just run npx react-native init testproject then cd testproject && npx react-native run-ios

    image Platform: iOS Needs: Triage :mag: Type: Upgrade Issue 
    opened by Vishnu-Nalagatla 0
Releases(v0.71.0-rc.5)
Owner
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Facebook
NativeScript empowers you to access native api's from JavaScript directly. Angular, Vue, Svelte, React and you name it compatible.

NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile de

NativeScript 22k Jan 4, 2023
Functional, simple and customizable UI buttons for react native. Also contains loading functionality and automatically changes color for dual tone buttons. TypeScript support.

React Native UI Buttons ✨ Installation If you want to use icons make sure you have react-native-vector-icons installed in your project. npm install --

Hussain Pettiwala 6 Dec 5, 2022
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Supporting Vue.js Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome ba

vuejs 201.7k Jan 8, 2023
The tiny framework for building hypertext applications.

Hyperapp The tiny framework for building hypertext applications. Do more with less—We have minimized the concepts you need to learn to get stuff done.

Jorge Bucaran 18.9k Jan 4, 2023
A JavaScript Framework for Building Brilliant Applications

mithril.js What is Mithril? Installation Documentation Getting Help Contributing What is Mithril? A modern client-side JavaScript framework for buildi

null 13.5k Dec 26, 2022
:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

Inferno 15.6k Jan 3, 2023
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

?? Welcome to DataFormsJS! Thanks for visiting! ?? ?? ?? ?? ?? ?? 中文 (简体) 欢迎来到 DataFormsJS Español Bienvenido a DataFormsJS Português (do Brasil) Bem

DataFormsJS 156 Dec 8, 2022
Brail is a framework built on NextJS for developing email templates in React, and returning HTML that is compatible with major email clients.

Brail is a framework built on NextJS for developing email templates in React, and returning HTML that is compatible with major email clients. It aims to seperate the concerns of generating the emails and delivering them.

null 121 Jan 2, 2023
Lightweight MVC library for building JavaScript applications

Spine Spine is a lightweight MVC library for building JavaScript web applications. Spine gives you structure and then gets out of your way, allowing y

Spine JS Project 3.6k Jan 4, 2023
A tiny foundation for building reactive views

ripple.js A tiny foundation for building reactive views with plugins. It aims to have a similar API to Reactive, but allow composition of views, like

ripple.js 1.3k Dec 9, 2022
AngularJS - HTML enhanced for web apps!

AngularJS AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade/Pug and

Angular 59.3k Jan 4, 2023
Cybernetically enhanced web apps

What is Svelte? Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient

Svelte 64.3k Dec 28, 2022
Build CRUD apps in fewer lines of code.

CanJS CanJS is a collection of client-side JavaScript architectural libraries. Web Components CanJS’s StacheElement allows you to create Web Component

CanJS 1.9k Jan 5, 2023
🙋‍♀️ 3kb library for tiny web apps

3kb library for tiny web apps. Sometimes, all you want to do is to try and do something—No boilerplate, bundlers, or complex build processes. Lucia ai

Aiden Bai 699 Dec 27, 2022
The worlds smallest fully-responsive css framework

FLUIDITY A fully responsive css framework that is impossibly small HTML is almost 100% responsive out of the box. This stylesheet patches the remainin

murmurs 1.1k Sep 24, 2022
An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping

Welcome to Ink Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and Ja

SAPO 1.9k Dec 15, 2022
HTML Framework that allows you not to write JavaScript code.

EHTML (or Extended HTML) can be described as a set of custom elements that you can put on HTML page for different purposes and use cases. The main ide

Guseyn Ismayylov 171 Dec 29, 2022
One framework. Mobile & desktop.

Angular - One framework. Mobile & desktop. Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScr

Angular 85.7k Jan 4, 2023