Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save cipolleschi/82b7a9561b8861330efabbd3eb08c6f5 to your computer and use it in GitHub Desktop.

Select an option

Save cipolleschi/82b7a9561b8861330efabbd3eb08c6f5 to your computer and use it in GitHub Desktop.

Revisions

  1. cipolleschi revised this gist Feb 28, 2024. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Test Your Library against React Native 0.74.0-RCs.md
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    # Test Your Library against React Native `0.74.0-rc`s.

    We cut the branch for 0.74 and we released `0.74.0-rc.0`. We would like to check that the libraries in the ecosystem are working well, especially with the New Architecture.
    We cut the branch for 0.74 and we released the first RCs. We would like to check that the libraries in the ecosystem are working well, especially with the New Architecture.

    To simplify the work, we prepared a sort of template you can use to test your library against the most recent version of React Native, which is `0.74.0-rc.0`.
    To simplify the work, we prepared a sort of template you can use to test your library against the most recent version of React Native.
    There are two ways to test this:
    1. Using a newly created app;
    2. Using the example app that might live in your library repo.
  2. cipolleschi renamed this gist Feb 22, 2024. 1 changed file with 9 additions and 9 deletions.
    Original file line number Diff line number Diff line change
    @@ -1,21 +1,21 @@
    # Test Your Library against React Native Nightlies
    # Test Your Library against React Native `0.74.0-rc`s.

    We are about to cut the branch for 0.74 and we would like to check that the libraries in the ecosystem are working well, especially with the New Architecture.
    We cut the branch for 0.74 and we released `0.74.0-rc.0`. We would like to check that the libraries in the ecosystem are working well, especially with the New Architecture.

    To simplify the work, we prepared a sort of template you can use to test your library against the most recent version of React Native, which is a nightly.
    To simplify the work, we prepared a sort of template you can use to test your library against the most recent version of React Native, which is `0.74.0-rc.0`.
    There are two ways to test this:
    1. Using a newly created app
    2. Using the example app that might live in your library repo
    1. Using a newly created app;
    2. Using the example app that might live in your library repo.

    The first approach can be used to check whether the latest version you already released is compatible with the New Architecture.

    The second approach is helpful to check whether the version of the library you have on main is compatible with the nightly version of React Native.
    The second approach is helpful to check whether the version of the library you have on main is compatible with the latest RC version of React Native.

    ## 1. Using a newly created app
    To use a newly created app with a Nightly, follow these steps:
    To use a newly created app with the RC, follow these steps:

    ```bash
    npx react-native@nightly init AppLibTest --skip-install --version nightly
    npx react-native@next init AppLibTest --skip-install --version next
    cd AppLibTest
    yarn add <your-library>
    cd ios
    @@ -61,7 +61,7 @@ To use the example app in your repo:

    1. Clone your repository
    2. Navigate to the `Example`folder, where the app's `package.json` lives
    3. run `yarn add react-native@nightly`
    3. run `yarn add react-native@next`
    4. `cd ios`
    5. `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`

  3. cipolleschi revised this gist Feb 21, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Test Your Library against React Native Nightlies.md
    Original file line number Diff line number Diff line change
    @@ -83,7 +83,7 @@ Open the `MainApplication.kt` file and update the following lines:
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
    // If you opted-in for the New Architecture, we load the native entry point for this app.
    - load()
    + load(bridgelessEnabled: false)
    + load(bridgelessEnabled = false)
    }
    ```

  4. cipolleschi revised this gist Feb 15, 2024. 1 changed file with 9 additions and 8 deletions.
    17 changes: 9 additions & 8 deletions Test Your Library against React Native Nightlies.md
    Original file line number Diff line number Diff line change
    @@ -7,8 +7,9 @@ There are two ways to test this:
    1. Using a newly created app
    2. Using the example app that might live in your library repo

    The first approach can be used to check whether your the latest version you already released is compatibl with the New Architecture.
    The second approach is helpful to check whether the version of the library you have on main is compatible with the nightly of React Native.
    The first approach can be used to check whether the latest version you already released is compatible with the New Architecture.

    The second approach is helpful to check whether the version of the library you have on main is compatible with the nightly version of React Native.

    ## 1. Using a newly created app
    To use a newly created app with a Nightly, follow these steps:
    @@ -45,26 +46,26 @@ To build and run Android, you need to:
    - newArchEnabled=false
    + newArchEnabled=true
    ```
    2. open a new Terminal window, navigate to AppLibTest and run
    2. Open a new Terminal window, navigate to AppLibTest and run:
    ```
    yarn android
    ```

    Finally, modify the App.tsx to load the component or module exposed by your library and exercise some of their features to make sure they work properly.
    Finally, modify the `App.tsx` to load the component or module exposed by your library and exercise some of their features to make sure they work properly.

    This setup will test a New App running with the New Architecture and Bridgeless turned on.
    This setup will test a New App running **with the New Architecture and Bridgeless turned on.**

    ## 2. Using the example app that might live in your library repo

    To use the example app in your repo:

    1. Clone your repository
    2. Navigate to the `Example`folder, where the app's `package.json` lives
    3. run `yarn add react-native@nightlies`
    3. run `yarn add react-native@nightly`
    4. `cd ios`
    5. `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`

    and then follow the same steps highlighted in the previous section.
    And then follow the same steps highlighted in the previous section.

    ## Turn off the New Architecture

    @@ -116,7 +117,7 @@ Open the `gradle.properties` file and updates these lines as it follows:
    + newArchEnabled=false
    ```

    You can now rerun the app with the Old Architecture
    You can now rerun the app with the Old Architecture.

    #### iOS
    Reinstall your dependencies with:
  5. cipolleschi renamed this gist Feb 15, 2024. 1 changed file with 15 additions and 1 deletion.
    Original file line number Diff line number Diff line change
    @@ -125,4 +125,18 @@ bundle exec pod install
    ```
    Notice that the `RCT_NEW_ARCH_ENABLED` flag has gone.

    You can now rerun the app with the Old Architecture
    You can now rerun the app with the Old Architecture

    ## How to Report Issues
    In case your library encounters some issue, please report that in the React Native repository using the [New Architecture Template](https://github.com/facebook/react-native/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2CType%3A+New+Architecture&projects=&template=new_architecture_bug_report.yml) for new issues.

    When filling the issue form, please make sure to include:
    1. The library that you are testing
    2. A minimal reproducer that we can use to debug the issue. You can use [this repo](https://github.com/react-native-community/reproducer-react-native) to start your reproducer.

    We are actively looking into those kinds of bugs.
    The resolution could be:
    * A fix in React Native Core
    * The React Native team coming back to you, suggesting how to fix the issue. In some cases we might also open a PR against the repo directly, depending how big the issue is.

    Thank you so much for your help and collaboration! :pray: 🙇
  6. cipolleschi created this gist Feb 15, 2024.
    128 changes: 128 additions & 0 deletions Test Your Library against React Native Nightlies
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,128 @@
    # Test Your Library against React Native Nightlies

    We are about to cut the branch for 0.74 and we would like to check that the libraries in the ecosystem are working well, especially with the New Architecture.

    To simplify the work, we prepared a sort of template you can use to test your library against the most recent version of React Native, which is a nightly.
    There are two ways to test this:
    1. Using a newly created app
    2. Using the example app that might live in your library repo

    The first approach can be used to check whether your the latest version you already released is compatibl with the New Architecture.
    The second approach is helpful to check whether the version of the library you have on main is compatible with the nightly of React Native.

    ## 1. Using a newly created app
    To use a newly created app with a Nightly, follow these steps:

    ```bash
    npx react-native@nightly init AppLibTest --skip-install --version nightly
    cd AppLibTest
    yarn add <your-library>
    cd ios
    bundle install
    RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
    open AppLibTest.xcworkspace
    cd ../..
    yarn start
    ```

    This script does the following:
    1. Creates a new app called AppLibTests
    2. Installs your library in the app
    3. Installs the iOS dependencies
    4. Opens Xcode
    5. Start Metro

    Now, you can build and run the app from Xcode.

    To build and run Android, you need to:
    1. Update the `gradle.properties` file to turn on the New Architecture
    ```diff
    # Use this property to enable support to the new architecture.
    # This will allow you to use TurboModules and the Fabric render in
    # your application. You should enable this flag either if you want
    # to write custom TurboModules/Fabric components OR use libraries that
    # are providing them.
    - newArchEnabled=false
    + newArchEnabled=true
    ```
    2. open a new Terminal window, navigate to AppLibTest and run
    ```
    yarn android
    ```

    Finally, modify the App.tsx to load the component or module exposed by your library and exercise some of their features to make sure they work properly.

    This setup will test a New App running with the New Architecture and Bridgeless turned on.

    ## 2. Using the example app that might live in your library repo

    To use the example app in your repo:

    1. Clone your repository
    2. Navigate to the `Example`folder, where the app's `package.json` lives
    3. run `yarn add react-native@nightlies`
    4. `cd ios`
    5. `RCT_NEW_ARCH_ENABLED=1 bundle exec pod install`

    and then follow the same steps highlighted in the previous section.

    ## Turn off the New Architecture

    On top of ensuring that your library works with the New Architecture (either you migrated it or it is going through the interop layers we are providing), it is important to check that the library works in other two scenarios:
    - New Architecture, in Bridge mode
    - Old Architecture.

    ### Disable Bridgeless in the New Architecture

    #### Android

    Open the `MainApplication.kt` file and update the following lines:

    ```diff
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
    // If you opted-in for the New Architecture, we load the native entry point for this app.
    - load()
    + load(bridgelessEnabled: false)
    }
    ```

    You can now rerun the app in Bridge mode.

    #### iOS

    Open the `AppDelegate.mm` file and add the following function:

    ```objc
    -(BOOL)bridgelessEnabled
    {
    return NO;
    }
    ```

    You can now rerun the app in Bridge mode.

    ### Disable the New Architecture

    #### Android

    Open the `gradle.properties` file and updates these lines as it follows:
    ```diff
    # Use this property to enable support to the new architecture.
    # This will allow you to use TurboModules and the Fabric render in
    # your application. You should enable this flag either if you want
    # to write custom TurboModules/Fabric components OR use libraries that
    # are providing them.
    - newArchEnabled=true
    + newArchEnabled=false
    ```

    You can now rerun the app with the Old Architecture

    #### iOS
    Reinstall your dependencies with:
    ```
    bundle exec pod install
    ```
    Notice that the `RCT_NEW_ARCH_ENABLED` flag has gone.

    You can now rerun the app with the Old Architecture