text:
Geoscribble

There are a number of things in play here! Built this after conferring with @bhousel and @tannerwuster on strategy. I copied some of the code from the existing custom data layer and trimmed out all the extras (file loading, mouse event handling, etc) and created a new endpoint to obtain the geojson for the scribbles.

A new Pixi layer to render the GeoScribbles.
A new service to obtain the geoscribbles.
Quick-and-dirty properties inspection in the sidebar.

Area shown at lng/lat 59.32609/24.78173:
https://github.com/facebook/Rapid/assets/1887955/5eaf632a-d544-4240-b4c4-e8b94dcece9d

Wow thank you Ben for taking this on! I have a few suggestions:

Color is important for scribbles, because it shows the line type. Helps tell roads from barriers. Like, on the screenshot you provided, I only know what those lines mean because I drew them myself. With the given UI, one would need to hover over every single line to see what this means.
Hence I would keep the color, but remove the hover info panel for scribbles. Because besides style (and maybe username and age in days), there is nothing useful there to mappers.
I don't see how labels are rendered, and those would need such a panel to render the message.
Ideally it would benefit from a "max age in days" slider, or a checkbox for "just the last month". But fine as it is.
Looking at the code, maybe it would make sense to use the raw data endpoint /scribbles to query features? Granted, it's not geojson, but you don't need all properties to store.
Also, there are no polygons in the data, guaranteed. Each feature has an identifier, and they cannot be updated, just created and deleted.

Thanks for the great suggestions @Zverik - I've translated them into a series of to-dos in a comment on #1372.
I have a couple of questions to ask if you have the time:

I don't see how labels are rendered, and those would need such a panel to render the message.

I'm not sure what you mean- can you explain more fully?
Also, I noticed there is a style member in the return. I presume that is from the draw_style code in EveryDoor. Should this further inform the styling somehow? It seems like it might be good information to impart to the user.

Whoa cool - an editor property!   I guess eventually Rapid users could also create scribbles and send them to the GeoScribble service?

Okay I've updated to include many of the suggestions. New video:
https://github.com/facebook/Rapid/assets/1887955/2e95583e-a57e-4e1c-8bee-b96f27c380fe

Wow, thanks for iterating so quickly, I did not expect that!

Currently I don't know whether the style attribute should be exposed to users. It may be useful, since we don't have a legend for the layer. But also I wouldn't want people to study each line individually. So that's up to you :)
Labels are a separate data type: those are points with attached messages. On the WMS layer (and in the app) I render them on the map, but in iD, it might make more sense to treat those as OSM notes: display an icon on top of the map (not under the data layer), and show the text on the sidebar. Again, up to you, but the main point is, those should be visible and the message should be readable. In the video, the "chain" note is hidden under a road.
Bryan, creating scribbles in Rapid is certainly possible :) But given this is an intermediate layer for passing surveyed data into editors, I think mapping the data directly is better than leaving scribbles, since we're already have the full-fledged editor open.

New video:

Looking at the video I wonder, that it will be very important to quickly toggle the layers via shortcuts. This will be important to better focus/see the scribble and then draw something in the editor. Do all those layers/actions already have shortcuts?

And speaking of those toggle-shortcuts, it might be a good idea to have a feature to show them (subtly) right in the UI (maybe flex+justify between on the right side of the box). I always struggle to remember the shortcuts and looking them up in the help menu is a big break in my mapping flow.

There are branch previews now in rapid, right? Maybe only fro non-draft PRs? I could not find the preview link…

Looking at the video I wonder, that it will be very important to quickly toggle the layers via shortcuts.

Completely agree- imagery switching, enabling/disabling different layers/modes etc. will be made much better with more shortcuts. Yet, there are only so many keys on the keyboard, so I think that to enable something like this, a dynamic keyboard rebinding system might be the way to go.

There are branch previews now in rapid, right? Maybe only fro non-draft PRs? I could not find the preview link…

There are, but because this branch has conflicts, the PR build-and-deploy doesn't fire. This is by design on github's part. I need to reconcile this branch with the massive changes that got landed yesterday, then the branch should deploy again.

But I could not find how to read labels for point notes. Hovering over or clicking did not work, even with the OSM data layer turned off. Am I missing something?

ah yeah I'm seeing this too - I'll figure out what's going on

But I could not find how to read labels for point notes. Hovering over or clicking did not work, even with the OSM data layer turned off. Am I missing something?

For now , in 0c32a1792 I restored the interactivity so that users can see the data associated with the scribbles, and we can render any text through the existing labeling code.   We can improve it more later, but this seems ok for today..  It will be interesting to see how users use this!

Thank you Bryan! Good enough! Added the editor to the wiki list :)

authors: Bonkles Zverik bhousel tordans

repo: facebook/Rapid

license: ISC


text:
Fix dependencies in cra typescript template

Hi there,
under packages > cra-template-typescript > template.json, I moved some packages from production to devDependencies, since they are only needed for local development and testing environment.
From:

To:

Thanks

Thanks for the PR but this is done intentionally. We install everything as regular dependencies. See #6180 (comment) for more information.

@ianschmitz understood. Thanks the information.

source: gharchive/pull-request

authors: ianschmitz johnfreitasau

repo: facebook/create-react-app

license: MIT

license_type: permissive

license_source: github-api


text:
Add Node 10 to Travis config and remove Node 6

Update Travis config to add support for Node 10 and remove Node 6.

Appveyor config also needs to be updated but I'm not sure if they support Node 10 yet. Actually I'm not sure if Travis does either so let's see what happens. 😀🍿

Both support it.
Can you update the PR or trigger a new build?

Do we plan to remove support for Node 6?

@gaearon @Timer and I discussed dropping support for Node 6. It's in maintenance now. EOL is April 2019.

I will merge some of our recent test improvements into this branch which will re-trigger the tests.

Cool. I'm cool with dropping it

Ugh. Tests passed on Node 10 for simple and monorepo but failed for install and kitchensink. They just timed out. For the simple test suite it took twice as long to run on Node 10 as it did on Node 8. Still want me to merge this?

I want to get a PR passing before we merge ... what in the world is going on. 😅

I don't know but it's a real mess. Sometimes Travis fails, sometimes Appveyor fails, sometimes they both fail and every once in a while they both miraculously pass. Often they will go from passing to failing and the only difference is a change in the README. 🤷♂

Sounds like some race conditions.

Can you add --timeout 30000 to the mocha calls?

This seems like a bit of an improvement. Kitchensink is very flaky on both Node 8 and 10. It passed on Travis but only because I re-ran it 4 times. It seems to fail in different places with different errors.
Installs is consistently failing on Node 10 at the same place on Travis and Appveyor, although it fails in different ways on both. This could be due to the different version of yarn.
This is what the logs look like on Travis and it just hangs here for 30+ minutes until the test times out:
+npx create-react-app --scripts-version=/tmp/tmp.hATqpWFGgY/enoah-scripts-0.9.0.tgz test-app-scoped-fork-tgz
npx: installed 289 in 14.817s
Creating a new React app in /tmp/tmp.hATqpWFGgY/test-app-scoped-fork-tgz.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and @enoah_netzach/react-scripts...
yarn add v1.3.2
(node:4567) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info No lockfile found.
[1/4] Resolving packages...

On Appveyor it actually fails on the same part and this is what the logs look like there:
+ npx create-react-app --scripts-version=/tmp/tmp.MzXAX6CkKW/enoah-scripts-0.9.0.tgz test-app-scoped-fork-tgz
npx: installed 289 in 8.779s
Creating a new React app in C:\Users\appveyor\AppData\Local\Temp\1\tmp.MzXAX6CkKW\test-app-scoped-fork-tgz.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and @enoah_netzach/react-scripts...
yarn add v1.5.1
(node:504) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info No lockfile found.
[1/4] Resolving packages...
Aborting installation.
Unexpected error. Please report it as a bug:
{ Error: Cannot find module 'C:\Users\appveyor\AppData\Local\Temp\1\tmp.MzXAX6CkKW\test-app-scoped-fork-tgz\node_modules\@enoah_netzach\react-scripts\package.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at checkNodeVersion (C:\Users\appveyor\AppData\Roaming\npm-cache\_npx\2372\node_modules\create-react-app\createReactApp.js:544:23)
    at getPackageName.then.then.then.packageName (C:\Users\appveyor\AppData\Roaming\npm-cache\_npx\2372\node_modules\create-react-app\createReactApp.js:345:7)
    at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' }
Deleting generated file... package.json
Deleting test-app-scoped-fork-tgz/ from C:\Users\appveyor\AppData\Local\Temp\1\tmp.MzXAX6CkKW
Done.
++ set +x
e2e-installs.sh: ERROR! An error was encountered executing line 200.
Cleaning up.
yarn config v1.5.1
(node:444) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
success Set "registry" to "https://registry.yarnpkg.com".
Done in 0.05s.
Exiting with error.
Command exited with code 1

Can we install the latest Yarn?

I added a before_install script to install the latest version of Yarn on Travis. I'm not sure if it made a difference though. The tests did pass but I had to rerun a couple of them. The old-node test failed because it tried to install Yarn with Node 0.10 which doesn't work.
I'm trying to figure out if I can skip installing Yarn with Node 0.10. Alternatively we could update our old-node test to use Node 4 or 6.

Looks like all the tests are now passing on Travis. I had to restart two of them because they failed to install the latest version of Yarn. It looked like a temporary issue with the Yarn site unrelated to our tests.
Appveyor tests are queued...
🍿

Appveyor!!

It works! 🎉
Updating Yarn seems to make a difference with Appveyor. On Travis the process of updating Yarn itself seems to be a bit flaky. The download failed a couple of times and there was a checksum error another couple of times. I'm not sure if this is an issue with the Yarn download site or with Travis. Either way, this seems like a big improvement.

The README is based on CRA 1.0. We will be updating all the documentation before 2.0 is released.

authors: DanielRuf Timer gaearon iansu


text:
Ideal image flashing when navigating back and forward

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] I have tried the npm run clear or yarn clear command.
[X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[X] I have tried creating a repro with https://new.docusaurus.io.
[X] I have read the console error message carefully (if applicable).

Description
Image flashing when navigating back and forward using Ideal Image
A possible fix would be to use browser native image lazy loading  instead of react-ideal-image (also posted in https://docusaurus.io/feature-requests/p/use-browser-lazy-loading-in-plugin-ideal-image)

Swizzling code I'm currently using to avoid this problem
export default function IdealImage(props: Props): JSX.Element {
    const { img, ...propsRest } = props

    // In dev env just use regular img with original file
    if (typeof img === 'string' || 'default' in img) {
  	  return (
  		  // eslint-disable-next-line jsx-a11y/alt-text

  	  )
    }

    return (
  	  <img
  		  height={img.src.height ?? 100}
  		  width={img.src.width ?? 100}
  		  src={img.src.src}
  		  style={{
  			  backgroundImage: `url(${img.preSrc})`,
  			  backgroundRepeat: 'no-repeat',
  			  backgroundSize: 'cover',
  			  width: '100%',
  			  height: 'auto',
  		  }}
  		  loading="lazy"
  		  {...propsRest}
  	  />
    )
}

Reproducible demo
No response
Steps to reproduce

Go to https://docusaurus.io/docs/playground
Navigate to another page
Navigate back

Expected behavior
No flashing
Actual behavior
Flashing
https://github.com/facebook/docusaurus/assets/68118705/8285459b-0711-4a6b-ba89-d24d64eccf04

Your environment

Public source code:
Public site URL: https://docusaurus.io/docs/playground
Docusaurus version used:
Environment name and version (e.g. Chrome 89, Node.js 16.4):
Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

[X] I'd be willing to fix this bug myself.

I'm not sure we want to do anything by default. You should probably not optimize images that are in the initial viewport—these kinds of optimizations are for images that are not initially visible. Ideal image also does much more than lazy loading—there's low-quality placeholder, etc.

I'm not sure we want to do anything by default. You should probably not optimize images that are in the initial viewport

This is not necessarily about images inside the initial viewport, you can scroll down and see a image and navigate to another page and then go back, and the images flashes

Ideal image also does much more than lazy loading—there's low-quality placeholder, etc.

Low quality placeholder can be done with just a background image and other things like refuse to load the already compressed image (normally < 100KB) on low bandwidth (which often fails to detect) is to be honest not appreciated

I'm with you there. I would personally suggest not using ideal image, but not sure if we would go as far as deprecating the plugin.

This plugin is quite old and difficult to maintain and reason about, with external dependencies being unmaintained forks.
You can still use it in its current state, but we'll probably have to create a new image plugin from scratch sooner or later.

Thanks, I'm thinking about if we can give it an option to use the browser native lazy load and srcset, we still want the plugin to do the image generation for multiple sizes though, this way we don't rely on that unmaintained library and the upgrade shouldn't be too hard?

If you want to submit a PR you can. I'm not sure to understand what you have in mind and don't really plan to work on this in the immediate future.

I mean we keep the other parts, just add an option to replace https://github.com/facebook/docusaurus/blob/868d72fe4f855f847cc258760a9b25b629492284/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx#L94-L107 to something like
<img
  height={img.src.height ?? 100}
  width={img.src.width ?? 100}
  src={img.src.src}
  srcSet={...}
  style={{
    backgroundImage: `url(${img.preSrc})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    width: '100%',
    height: 'auto',
  }}
  loading="lazy"
  {...propsRest}
/>

If you're open to the idea I can take a look and try to make a PR

source: gharchive/issue

authors: Josh-Cena Legend-Master slorber

repo: facebook/docusaurus


text:
Typo in markdownPageExample.md

📚 Documentation
Markdown import example in website/src/pages/examples/markdownPageExample.md imports the wrong chapter, see this comment:
https://github.com/facebook/docusaurus/commit/f234c407f1f279a76ab388df2bab4f33e8eadf85#r42067403

thanks @jaguarondi . Why not submitting a PR directly? you can just press the "edit" button on the source file :)

authors: jaguarondi slorber


text:
A migration guide from Blogger to Docusaurus

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Description
There isn't a guide for migrating from Blogger to Docusaurus in the docs. I've written one, based upon my own experiences of migrating:
https://blog.johnnyreilly.com/definitive-guide-to-migrating-from-blogger-to-docusaurus
It involves some automation, and I'm planning to maintain it on an ongoing basis. Would it be helpful to have a link to this in the Docusaurus docs?
Self-service

[X] I'd be willing to address this documentation request myself.

Great 👍
I think it could be added to https://docusaurus.io/community/resources#articles, we don't really have any other place otherwise

I shall PR!

fixed in https://github.com/facebook/docusaurus/pull/8313

authors: johnnyreilly slorber


text:
the docSidebar can't work.

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[ ] I have tried the npm run clear or yarn clear command.
[ ] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[ ] I have tried creating a repro with https://new.docusaurus.io.
[ ] I have read the console error message carefully (if applicable).

Description
I tried to use docSidebar, but it doesn't work.
Reproducible demo
https://github.com/MaHe666/docusaurus-mahe666-source/tree/main
Steps to reproduce

add a docSidebar in a dropdown item
delete the dropdown item
make the type value of the first item docSidebar

Expected behavior
It will be work in a normal way.
Actual behavior
I just use it as the document wrote.
Your environment

Public source code:
Public site URL:
Docusaurus version used:
Environment name and version (e.g. Chrome 89, Node.js 16.4):
Operating system and version (e.g. Windows10 ):

Self-service

[ ] I'd be willing to fix this bug myself.

It doesn't work when I try npm run start.
I use Windows 10, and I use Chrome.
Maybe the reason is the Chinese word.
I've put the github repo in the ticket.
Is there anything else need me to supply?

So the issue is that sidebar ids don't support Chinese characters. Please try using latin-alphabet characters for the sidebar id and see if this works. In my testing it works up until I try to use Chinese characters as the machine-id for the sidebar.

So the issue is that sidebar ids don't support Chinese characters. Please try using latin-alphabet characters for the sidebar id and see if this works. In my testing it works up until I try to use Chinese characters as the machine-id for the sidebar.

Ignore this - I hadn't rebuilt my test - this works for me.

I'm Sorry,maybe I didn't express it exactly.The error is "ValidationError: Bad navbar item type docSidebar"
I don't know how to make it work.

Hi, the big notifier above tells you that your version is far, far outdated. Please install the latest version 2.4.0.

I'm sorry, I ignored the notice.

authors: Josh-Cena MaHe666 homotechsual


text:
duplicate route detection with autogenerated slugs

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] I have tried the npm run clear or yarn clear command.
[X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[X] I have tried creating a repro with https://new.docusaurus.io.
[ ] I have read the console error message carefully (if applicable).

Description
I'm trying to diagnose a duplicated route warning, and I'm not sure what the problem is, I suspect it's a bug.
Reproducible demo
https://codesandbox.io/p/devbox/pensive-neumann-8hhhvs
Steps to reproduce

Create a file structure with similar file names, but in different folders. So different ids.

Add them in a TOC with the autogenerated instruction:

 {
      type: "category",
      label: "service",
      link: {
        id: "tools/cli/service",   // This is like the one below but that's a file.
        type: "doc",
      },
      items: [
        {
          type: "autogenerated",
          dirName: "tools/cli/service", // That's a directory, not a file.
        },
      ],
    },

Build and get a duplicated route warning:

[WARNING] Duplicate routes found!
- Attempting to create page at /docs/tools/cli/service, but a page already exists at this route.
This could lead to non-deterministic routing behavior.

In my case, there is only 1 file, or page, living there (see repro) but I do have a folder with the same path.
Expected behavior
I shouldn't see a warning, since there is no file path duplication.  Only one page will be rendered at that location.
Actual behavior
I get a duplicated route warning.
Your environment

Docusaurus version used: 3.1
Environment name and version (e.g. Chrome 89, Node.js 16.4):
Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

[ ] I'd be willing to fix this bug myself.

Hi, service/service.md will also become /service. If you want to make its slug be service/service, you have to use the slug front matter. I'll add a sentence to the doc.

Hi :smile:
I have a smiliar issue with the typescript api docs plugin. It generates modules.md by default. I have a folder called modules where this is being generated. I tried to be smart and implemented a custom isCategoryIndex function like this
async sidebarItemsGenerator({ defaultSidebarItemsGenerator, ...args }) {
  return defaultSidebarItemsGenerator({
    ...args,
    // by default docusaurus treats a file named as the parent directory as the index file as well, which
    // collides with the modules.md generated by the typescript API docs.
    // see https://docusaurus.io/docs/sidebar/autogenerated#category-index-convention
    isCategoryIndex({ fileName, directories }) {
      const eligibleDocIndexNames = ['index', 'readme'];
      return eligibleDocIndexNames.includes(fileName.toLowerCase());
    }
  });
}

as described here in the docs: https://docusaurus.io/docs/sidebar/autogenerated#category-index-convention
The function is working and the categorization as well. However the warning still exists. Is the warning generated independently from the isCategoryIndex function?

@muuki88 we are not the implementor of the typedoc plugin and don't really know how it works internally.
Note that there are 2 things to be aware of:

The category index convention defines if clicking the sidebar category links to the doc
The category index convention does not affect the doc URL

If you want to alter the doc URL, you can use the slug front matter.
If the typedoc plugin does not enable you to inject a slug front matter, you can try to make an exception with the parseFrontMatter hook: https://docusaurus.io/docs/markdown-features#front-matter

Hi @slorber
Thanks for the quick and detailed reply :heart: Makes sense if both are still competing for the same URL. Seems I didn't fully  comprehend what the isCategoryIndex function does :see_no_evil:
I'll move the discussion to the typedoc-plugin-markdown forum. Should be possible to customize either the modules.md filename or inject custom fontmatter meta data.

Sure 👍
Note that parseFrontMatter is a core feature, so technically you can still use it to inject custom front matter in other plugins that use our mdx loader. I think that typedoc plugin is "reusing" our docs plugin so it qualifies too.

authors: ArthurFlag Josh-Cena muuki88 slorber


text:
feat(theme-classiic, theme-translations): Added text selection option instead of breadcrumb icon

First, I'm sorry. I'm not good at English skill. so, I may use miss expression and have a wrong understanding. If you point out any mistake, I appreciate.
I added the breadcrumbsHomeText option to the themeConfig.
Added it to:
const config = {
  themeConfig: {
    breadcrumbsHomeText: false,
  },
};

if set false or if not set (breadcrumbs icon case):

if set true (breadcrumbs text case):

Pre-flight checklist

[x] I have read the Contributing Guidelines on pull requests.
[x] If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
[ ] If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

I don't want to use breadcrumb icon. I want to use substitute text for icon.
There may be other people besides me who want to use the text.
so, I added an option to make it text instead of icon.
I was wondering if I should set the option to themeConfig.　Because @docusaurus/preset-classic have breadcrumbs options. but, I chose to add option in themeConfig.  I thought it was appearance option.
Test Plan

case 1)

Add breadcrumbsHomeText option to themeConfig of docusaurus.config.js with false

If breadcrumb icon is displayed in breadcrumb, it's OK
case 2)

Add breadcrumbsHomeText option to themeConfig of docusaurus.config.js with true

If Home is displayed in breadcrumb, it's OK
case 3)

Do not add breadcrumbsHomeText option to themeConfig of docusaurus.config.js

If breadcrumb icon is displayed in breadcrumb, it's OK
case 4)

Change theme.docs.breadcrumbs.home.text of one language of theme-translations from Home to any string
Add breadcrumbsHomeText option to themeConfig of docusaurus.config.js with true

If the written string is displayed in breadcrumb, it's OK
case 5)

Change theme.docs.breadcrumbs.home.text of one language of theme-translations  from Home to any string. but language different from case4
Add breadcrumbsHomeText option to themeConfig of docusaurus.config.js with true

If the written string is displayed in breadcrumb, it's OK

Also, the entire presence of the home icon is probably unnecessary. Many SEO guides recommend the breadcrumbs to NOT have a common starting point because its basically useless. (For a similar reason, many recommend breadcrumbs to not end with the current page's title either.) We only have it so that root-level docs can at least have a non-trivial breadcrumbs list. It's purely meant for aesthetic purposes and does not try to be informative.

Sorry, I didn't understand enough.
Thank you for your reply.


text:
[RFC] Custom Providers

Proposal for Custom Providers
Today, the docs state:

At the time of this writing, there is no way to add custom providers without forking DotSlash.

But we have already seen interest in custom providers, so it seems like we should start discussing possible solutions. Note this will likely require some sort of configuration file, which, as a reminder, we would like to avoid having to read in the case of a cache hit.
While the design for the configuration file is still under discussion, let's assume for the moment that at least two locations for provider-specific data are supported:

$XDG_STATE_HOME/dotslash/provider/ where providers installed by the user live
/etc/dotslash or some location for system-wide configuration. In practice, an entity might push enterprise-wide providers to this folder with the expectation that end-users should not write this folder directly.

Provider is an executable
Today, the things a provider needs to know are:

the (platform, artifact-entry) pair being requested
the path where the fetched artifact should be written
[optional] what UI, if any, is the provider allowed to present to the user to communicate fetch progress

One option would be to pass everything thing needs to the executable via a single JSON argument and then stream the stdout from the provider invocation directly to the path where the artifact should be written. This way, the provider does not get any direct knowledge about the layout of the $DOTSLASH_CACHE.
Because the provider can be an executable, it makes sense for the provider to be a DotSlash file. For example, we could have:
$XDG_STATE_HOME/dotslash/provider/<provider-name>

where <provider-name> is the name of the DotSlash file, which must also match the "type" used in the "providers" section of a DotSlash file. (The "name" in the DotSlash file should probably also be required to match.) Note that this file will always be executed by DotSlash itself, so there is no need for any special Windows stuff.
How to install a provider
A simple option is to support a subcommand like dotslash -- install-provider URL_TO_PROVIDER that would fetch the specified URL, verify it contains a DotSlash file, and then write it to $XDG_STATE_HOME/dotslash/provider/<provider-name>, as appropriate.
Another option (we'll call this the "DotSlash Inception" option) would be to enable a DotSlash file to include metadata about how to obtain a provider referenced in the file. Example:
{
  "name": "example-cli",
  "providers": {
    "my-custom-cas": {
      "size": 40660307,
      "hash": "blake3",
      "digest": "6e2ca33951e586e7670016dd9e503d028454bf9249d5ff556347c3d98c347c34",
      // Must be a single DotSlash file?
      "format": "gz",
      // No need to specify path because it must be my-custom-cas?
      "providers": [
        {
          "url": "https://example.com/my-custom-cas"
        }
      ]
    }
  }
  "platforms": {
    "linux-x86_64": {
      /* size, hash, digest, format, path */
      "providers": [
        {
          "type": "my-custom-cas",
          "id": "72b81fc3a30b7bedc1a09a3fafc4478a1b02e5ebf0ad04ea15d23b3e9dc89212"
        }
      ]
    }
  }
}

The idea is that when example-cli is run for the first time, DotSlash sees that it should use the my-custom-cas provider. If the user does not have it installed, DotSlash can use the information in the providers section to install the provider first and then use it to fetch example-cli.
There are a lot of questions on how strict we might be on the requirements for a provider. There are also questions around how to know when to install a new version of a provider, or what to do if multiple DotSlash files try to provide different implementations of a provider (particularly with respect to defending against attackers).

Thanks for drafting this initial pass! One thought that occurs to me is that, if the single parameter is JSON, it should be standard JSON, and not the loose JSON accepted by the dotslash tool. This is just because it's not super standardized and cross-language may cause parsing complexities / problems for people writing providers (which may or may not be written in Rust).
Another thought is that the "streaming output to stdout so the provider doesn't need / get to know layout" is a nice idea! I'm imagining the case of the draft GitLab provider, I think this would mean needing to redirect the output of the subcommand to stdout, which isn't too terrible. The one constraint is we'd probably want some protocol for how to handle things going wrong. If we assume providers may basically delegate to a subcommand (like the GitHub and GitLab providers), those subcommands might write error messages to stdout if they're poorly-written. It may be good to specify that providers should write errors to stderr so they can be printed to the dotslash user, and also to use error return codes properly in the provider binary.

if the single parameter is JSON, it should be standard JSON

Yes, we would absolutely do that. Though FYI, I just updated the docs last night to list "experimental commands":
https://dotslash-cli.com/docs/flags/
FYI, today you can do:
dotslash -- parse DOTSLASH_FILE

to get the "pure JSON" of a DotSlash file, if that's helpful for any sort of tooling you build around DotSlash.

authors: alilleybrinker bolinfest

repo: facebook/dotslash


text:
Behavior Of textAlignment="right" with whitespace:pre-wrap

When textAlignment="right", I would expect pressing 'space' in a no-wrap scenario to introduce another space into the text content. However, because of whitespace:pre-wrap the space is not added until I press another character.  Changing whitespace to 'normal' solves this problem. However, changing it to 'normal' also introduces other irregularities, such as misplaced cursors after deletion.
The situation I'm using Draft in is a spreadsheet-cell, because I wanted to take advantage of the rich text capabilities of draft for things like autocompletion of cell references (which often contain metadata for my application), functions, etc. In many spreadsheet cells numeric values are right-aligned in the cell, with spaces appending normally and the cell enlarging (usually by multiples of column width) as you type. What's the standard way to disable or override Draft's text-wrapping and resizing behavior?

Yeah, that's annoying.
You'll definitely need to keep white-space: pre-wrap to avoid whitespace collapsing, for the reason you mentioned. Draft selection behavior needs the character count in text nodes to match the model.
A couple ideas:

Does it behave properly if you use white-space: pre?
You could possibly use handleBeforeInput to intercept spacebar presses, and insert a non-breaking space '\u00a0' instead. I don't know for sure if that would prevent the collapsing, but I have a hunch that it would.

It seems like this question has been sufficiently answered so I am going to close this issue. Thanks for bringing it up!

authors: hellendag jclyons lacker

repo: facebook/draft-js

license: mit

license_source: bigquery


text:
Union subset still not working when it's a subset of a sentinel type

/* @flow */

type Subset = 'a' | 'b';

type A = {
  sentinel: 'a';
};

type B = {
  sentinel: 'b';
};

type C = {
  sentinel: 'c';
  contents: string;
};

type Fullset = A | B | C;

function foo(bar: Subset): Fullset {
  return ({
    sentinel: bar
  });
}

This fails to typecheck, but it should. Here's the error which shouldn't exist:
test.js:21
 21:   return ({
               ^ object literal. This type is incompatible with
 20: function foo(bar: Subset): Fullset {
                                ^^^^^^^ union: A | B | C

I believe it's the same issue as https://github.com/facebook/flow/issues/1014. Of course, it would be nice to hear from the developers on whether they plan to fix this in a foreseeable future...

@zgao This is working as intended. Unfortunately without an assurance that sentinel is read-only, we cannot conclude that { sentinel: 'a' | 'b' } is the same as { sentinel: 'a' } | { sentinel: 'b' }.
function gen(sentinel: 'a' | 'b') {
  const obj = { sentinel };
  sub(obj, () => {
    obj.sentinel = 'b';
  });
}

gen('a');

function sub(obj: { sentinel: 'a' } | { sentinel: 'b' }, callback: () => void) {
  if (obj.sentinel === 'a') fix(obj, callback);
}

function fix(obj: { sentinel: 'a' }, callback: () => void): 'a' {
  callback();
  (obj.sentinel: 'a');
}

authors: avikchaudhuri pasha-mf zgao

repo: facebook/flow


text:
Flow does not understand template literals.

Flow version: 0.93
Expected behavior
Flow typing should work
.
Actual behavior
It does not work.
Here is link to playground
// @flow

type Badge = 'scout' | 'badge'

type Icon = 'scout' | 'scoutMissing' | 'badge' | 'badgeMissing'

var icon: Icon;

var badge: Badge = 'scout';

icon = `${badge}Missing`

Thanks for the bug report!
A simpler version of your example is:
('s' + 'M': 'sM');

With that said, I believe Flow is not designed to infer types of the result of string (or other literal) operations like this.
(1 + 2: 3);
```

authors: L-Yeiser vicapow


text:
RFC: functional API with support for Array and Object

This adds a functional API for the core read/write methods (get, set, update, merge) (originally proposed in #39). I don't believe that simply providing a functional alternative is enough value to warrant the increase in API surface area, but what this functional API enables is to use the immutable read/write API on typical Array and Object values, allowing for a combination of nesting Immutable Collections and typical Arrays and Objects while preserving the ability to use getIn and setIn.
As an example:
import { getIn, setIn } from 'immutable';
const data = { x: { y: 'z' } }
const z = getIn(data, ['x', 'y'])
const data2 = setIn(data, ['x', 'y'], 'abc') // { x: { y: 'abc' } }

I think that providing this flexibility will allow for a more reasoned use of Immutable collections based on best fit, rather than the "all or nothing" approach often taken. Specifically, I'm interested in supporting typical Objects as a viable alternative to Record for those that want to use Immutable collections but prefer not to use the Record API.
This does add some byte-weight to the library, but only marginally due to replacing existing implementations. Adds +209 gz-bytes, or +1167 raw-bytes.
Remaining tasks:

[x] Fix existing tests
[x] Add new tests for new use cases
[x] Add flow types
[x] Add flow type tests
[x] Add typescript types
[x] Add typescript type tests
[x] Documentation

Closes #1268
Closes #1363

This is awesome! Why not have the data/collections come after the other arguments to be more curry friendly?

Why not have the data/collections come after the other arguments to be more curry friendly?

It's a tradeoff.
Use of curry is still pretty uncommon in JavaScript programs, so the argument order intends to better fit the most commonly expected order from JavaScript devs instead. I don't think it would be wise to choose a different order than similar methods in lodash, and cause confusion or a difficult learning curve for most. Curry-friendly argument order is nice to have, but not nice enough to warrant a worse learning curve, in my opinion.
Also, if I understand correctly the datastructure-last argument order for curry friendliness makes the most sense within languages which have syntactic support for currying. For languages that do not, like JS, the order should play a less important role - you'll need to use some explicit function to curry anyhow. For example:
const first = coll => get(coll, 0);
first(['a','b','c'])

Or if you use a function like curry from ramda to create curryable versions of functions, just use that opportunity to re-order the arguments, since you'll need to explicitly call it anyhow. For example:
const get = curry((key, collection) => Immutable.get(key, collection));
get(0)(['a', 'b', 'c'])

True - one could always provide a wrapper function. You make good points. I guess I was under the assumption that if you're going out of your way to use a functional API you would expect the data to come last, but perhaps Lodash FP is more popular than I think ;)

Could all the affected functions be added to the changelog? I ran into this with toJS, but only merge and setIn are mentioned.

I wanted this functionality in a couple places, but didn't quite realize how much it would impact elsewhere in the existing application as I was using POJOs as "merge barriers" in a bunch of places. I'm trying to square how to mix both functionality now. Now that POJOs are no longer "merge barriers", I'm wondering if there needs to be some other way to set explicit "barriers" when using something like mergeDeep?

authors: WorldMaker jpollard-cs leebyron mattzeunert

repo: facebook/immutable-js


text:
[Bug]:

Version
27.2.1
Steps to reproduce

Clone my repo at https://github.com/tomasdelaveau/jest-issue
npm install
npm run test

Expected behavior
"RESULT:  error" should be logged.
The assertion inside the catch block should be called.
Actual behavior
"RESULT:  peanut butter" is logged.
The assertion inside the catch block is not called (leading to "Expected one assertion to be called but received zero assertion calls")
Additional context
It seems like Promise.race doesn't work properly with Jest. Even though p2 rejects after 1ms and p1 resolves after 4s, fetchData() returns a resolved Promise instead of a rejected one. By changing the order of the elements in the array argument, ie. Promise.race([p2, p1]) instead of Promise.race([p1, p2), fetchData() returns a rejected Promise.
Environment
System:
    OS: macOS 11.1
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
  Binaries:
    Node: 15.9.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.21.1 - /usr/local/bin/npm
  npmPackages:
    jest: ^27.2.1 => 27.2.1

I was calling resolve and reject directly as the first argument of setTimeout instead of inside the body of a callback function.

repo: facebook/jest


text:
[Bug]: Cannot show diff when .toMatchInlineSnapshot throws exception

Version
29.0
Steps to reproduce
git clone https://github.com/babel/babel
yarn up jest*
make build
yarn jest babel-preset-react

I know this is overly complicated to reproduce, I'm still investigating, just opened an issue first in case anyone can think of what could be the reason for this, will update if I find anything new!😃
Expected behavior
Differences are displayed normally.
Actual behavior
normalize options › Babel 7 › default values

    expect(received).toMatchInlineSnapshot(snapshot)

    Snapshot name: `normalize options Babel 7 default values 2`

    - Snapshot  - 0
    + Received  + 0

    @@ -7,5 +7,5 @@
        "runtime": "automatic",
        "throwIfNamespace": true,
        "useBuiltIns": undefined,
        "useSpread": undefined,
      }

      113 |         }
      114 |       `);
    > 115 |       expect(normalizeOptions({ runtime: "automatic" })).toMatchInlineSnapshot(`
          |                                                          ^
      116 |         Object {
      117 |           "development": false,
      118 |           "importSource": undefined,

      at Object.toMatchInlineSnapshot (packages/babel-preset-react/test/normalize-options.skip-bundled.js:115:58)

Additional context
No response
Environment
System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700KF @ 3.60GHz
  Binaries:
    Node: 18.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.1.1 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    jest: ^29.0.0 => 29.0.0

Huh, this is a weird one 😅

@liuxingbaoyu the issue is in jest-light-runner. This is the result using "normal" jest-runner.

I tried applying https://github.com/prettier/prettier/pull/13355/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R129 which made no difference

@nicolo-ribaudo @liuxingbaoyu this is actually not new with jest 29 - seems like jest-light-runner doesn't properly support inline snapshot errors.
This diff on main gives the same weird error using Jest 28
diff --git i/jest.config.js w/jest.config.js
index d499a021de..8c9108c56f 100644
--- i/jest.config.js
+++ w/jest.config.js
@@ -70,4 +70,5 @@ module.exports = {
   // package should be declared explicitly in the package.json
   // Yarn will generate correct file links so that Jest can resolve correctly
   moduleNameMapper: null,
+  snapshotFormat: { escapeString: false, printBasicPrototype: false },
 };

The snapshotFormat changes are why your snapshots are changed, fwiw

Yeah, I tried without jest-light-runner, as I wrote in the issue, it outputs
- Snapshot - 0
+Received +0

, is this expected?

Ah, good catch

Ah, just saw your latest reply, and yes, I'm also guessing that the snapshot change might be related to jest-light-runner, thank you so much for looking into this!😃

@liuxingbaoyu fixed the diffing issue in https://github.com/facebook/jest/releases/tag/v29.0.1. The weird error is in jest-light-runner as mentioned 🙂

Thanks for the quick fix! I will continue to investigate jest-light-runner.

Thanks for noticing! 😀 Very confusing diff for users upgrading

authors: SimenB liuxingbaoyu


text:
[Bug]: Test case failing with node js 16.17.0

Version
26.2.2
Steps to reproduce
Here is the following test case which i am testing ( it might be difficult to reproduce but this is the best i can share )
import { HttpChatClientDriver } from '@externals/drivers/http/chat-client'
import { SecretStorageFetchingDriver } from '@externals/drivers/secret-storage/fetcher'
import { ChatSenderUseCase } from '@use-cases/operation/chat-sender'
import { ChatSenderController } from '@controllers/operation/chat-sender'
import { PubSubMessageFixture } from '@test/fixtures/pub-sub/message'
import { Chance } from 'chance'

const chance = new Chance.Chance()

describe('ChatSenderController', () => {
  const useCase = new ChatSenderUseCase({
    httpChatClientRepository: new HttpChatClientDriver(),
    secretStorageFetchingRepository: new SecretStorageFetchingDriver(),
  })
  const controller = new ChatSenderController({ useCase })

  describe('handle', () => {
    describe('When there are multiple records', () => {
      test('The method should complete expectedly', () => {
        const fixture = new PubSubMessageFixture({
          messageCount: 3,
        })
        jest.spyOn(useCase, 'execute').mockResolvedValue()

        expect(controller.handle(fixture)).resolves.toBeUndefined()
      })
    })

    describe('When there are multiple records, some of which cause errors', () => {
      test('The method should complete expectedly', () => {
        const fixture = new PubSubMessageFixture({
          messageCount: 3,
        })
        jest
          .spyOn(useCase, 'execute')
          .mockRejectedValueOnce(new Error(chance.string()))

        expect(controller.handle(fixture)).resolves.toBeUndefined()
      })
    })
  })
})

followed by npm run test -> jest --runInBand
Expected behavior
I expect to see this test case being passed
Actual behavior
The promise is being rejected
error message
/Users/jatinmehrotra/Desktop/classmethod/Clients/xxxxxx/dts-s-api/node_modules/jest-jasmine2/node_modules/expect/build/index.js:134
  const err = new JestAssertionError();
              ^

JestAssertionError: expect(received).resolves.toBeUndefined()

Received promise rejected instead of resolved
Rejected to value: [Error: pxBwE]

Additional context
The following  test case works well node js 14 version
I have tried to post it as stackvoverflow question too https://stackoverflow.com/questions/73621327/updating-nodejs-version-from-14-x-to-16-x-results-in-jest-test-cases-failure
Environment
System :- Os Mac monterey 12.5.1,  node js version 16.17.0, npm version 8.15.0
jest: 26.2.2, types/jest: 26.0.8, jest-extended: 0.11.5, ts-jest: 26.1.4

You need to put together a reproduction I can pull down and run  - a bunch of code in isolation isn't actionable.

That said, you need to await or return the .resolves assertions (e.g. await expect(controller.handle(fixture)).resolves.toBeUndefined()), see https://jestjs.io/docs/asynchronous

authors: SimenB jatinmehrotra


text:
How to use Jest for Node.js projects

TLTR: since Node.js 4 is still supported many companies use it and many Node.js projects (including PostCSS, Autoprefixer, Browserslist) must support it. What is a solution for them?

Node.js 4 is not like Node.js 0.12. It is still supported and it is OK to still use it in production until April 2018.
If you are developing popular Node.js library you must support all current Node.js version.
If you support some version you should run tests for this Node.js version of Travis CI. It is the only way to be sure that you didn’t brake Node.js 4 support accidentally.

Of course, it is OK to run the only Node.js 9 on Travis CI for client-side projects like Jest. But Node.js projects is different.
What is your recommendation for the big Node.js project? Stick on Jest 21 until August 2018?

We do not have the time to support a version of Jest that is two versions behind the current LTS. Also, this decision was made for us by the jsdom team. There is no recommendation from us beyond using older versions of Jest. That said, if you'd like to make the latest version of Jest work with Node 4 and you are committed to supporting it until mid 2018, we are happy to accept pull requests and re-enable CI on Node 4.

That said, if you'd like to make the latest version of Jest work with Node 4 and you are committed to supporting it until mid 2018, we are happy to accept pull requests and re-enable CI on Node 4.

What was the problem of supporting Node.js 4? I can’t test it since I get yarn warning right now. It is about some very useful Node.js API or just using let without "use strict"?

Also, Node.js 4 is current LTS ;). All 4, 6 and 8 are LTS.

You'll have to ask the folks working on jsdom about that. Jest frequently segfaults on Node 4 which was fixed in later versions of Node. I generally don't recommend using Node 4 (for Jest) and would encourage you to push your company to upgrade to a later version which is about 2x faster, more stable and likely more secure.
Please note that it doesn't matter to this project which versions of Node.js are LTS. At Facebook, we only use the latest LTS release or unstable version. I'd even go so far as to drop support for Node 6 but I understand that's taking it a bit far for some folks, and it isn't causing major issues for us right now (like, segfaults).

@ai See their changelog regarding v10: https://github.com/tmpvar/jsdom/blob/master/Changelog.md#1000
Also, JSDOM v9 started becoming a burden, because of all sort of bugs, which needed to be patched in setup files.

I generally don't recommend using Node 4 (for Jest) and would encourage you to push your company to upgrade to a later version which is about 2x faster, more stable and likely more secure.

We don’t use Node.js 4 too. But PostCSS has 25 M downloads, so we have many Node.js 4 users, which I must support until Node.js 4 is still current LTS.

The problem that PostCSS doesn’t even use JSDOM :(.
Can I install Jest 22 without JSDOM to use it for pure JS tests?

What was the problem of supporting Node.js 4?

Right now we've done nothing to remove node 4 support beyond upgrading to the latest version of jsom in jest-environment-jsdom (which fixes bugs and add features everybody has to polyfill for older versions). There are still TODOs in the code marking removal when node 4 is dropped.
We might have some issues as we haven't run node 4 on CI for a couple of months, but nothing major I wager.

I can’t test it since I get yarn warning right now.

YARN_IGNORE_ENGINES=true yarn.

It is about some very useful Node.js API or just using let without "use strict"?

Nope. That's more relevant when we wanna drop node 6 as we use a ton of async-await in the code base.

All 4, 6 and 8 are LTS.

True, only the latter two are active LTS though, which I think counts for something.

Can I install Jest 22 without JSDOM to use it for pure JS tests?

If you use a lock file and ignore the warning from yarn about engines there should be no issue upgrading

You should be good to do it. Just use "testEnvironment": "node" in Jest config.

Awesome! Thanks for this advice. I run Jest on Node.js 4, but have this issue right now (destructor syntax?):
SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at _load_normalize (/home/travis/build/postcss/postcss/node_modules/jest-config/build/index.js:14:73)
    at Object.<anonymous> (/home/travis/build/postcss/postcss/node_modules/jest-config/build/index.js:173:30)
    at Module._compile (module.js:409:26)

What do you think about some unofficial Node.js 4 support. You don’t use Node.js 4+ syntax, but this support is not official and may require some hacks?

What do you think about some unofficial Node.js 4 support. You don’t use Node.js 4+ syntax, but this support is not official and may require some hacks?

Something like that 🙂
PR welcome for you specific error here: https://github.com/facebook/jest/blob/d1845116ebe818e6d945d50ad4857752758970ee/packages/jest-config/src/normalize.js#L284-L289. Just concat instead of spread syntax should work out fine

I will send PR tomorrow :). And try to grep other ... symbols.

I sent PR with ... fix https://github.com/facebook/jest/pull/5134

I fixed all ... in Jest repo, but now has this issue:
 FAIL  test/container.test.js
  ● Test suite failed to run

    SyntaxError: Unexpected token ...

      at _load_jestJasmine (node_modules/jest-runner/build/run_test.js:146:355)

I look into jest-runner and there is no ... there. Seems like it is in some dependency and stacktrace is broken. Maybe somebody have a idea how find this dependency?

https://github.com/facebook/jest/blob/1521c516c2cae8f4bfe41605640f273f9c17fb87/packages/jest-jasmine2/src/index.js#L53

@SimenB my bad :sweat: PR was sent https://github.com/facebook/jest/pull/5142

Done. Now Jest works for Node.js 4 too. Thanks to everyone.

Thanks for pushing on this @ai!

Is there something specific I need to do to run jest under node 4 environments?

@shawnmclean Node 4 gets it's end of life in 6 days, better use that time to migrate to Node 8 (latest LTS version) than figuring out your tools to work with soon unmaintained language.

@thymikee thats my issue now. We're migrating to Node 8, but during that time, we want to maintain backwards compatibility with 4, hence having tests running under Node 4 for the time being.

Jest 22 should work fine on node 4 as long as yiu use node env and not jsdom. Use jest 21 (or a custom jsdom env) if you need it

authors: SimenB ai cpojer shawnmclean thymikee


text:
Add table plugin example

[x] created a CodeSandbox example for the table plugin here
[x] added a new page and the example on the website (under “/docs/demos/plugins/tables”)

Issue https://github.com/facebook/lexical/issues/2886

@thegreatercurve implemented your suggestions, let me know if I need to fix anything.

repo: facebook/lexical


text:
Add Chinese manual

I try to translate some document artificial. I think it may help china user, and I will use my private time to complete it step by step.
SO WHEN I COMPLETE IT, I REQUEST TO MERGE.

Already done here: http://prestodb-china.com/

authors: ZheYuan cberner

repo: facebook/presto


text:
Fix SectionList example

SectionList Example 1 is displayed incorrectly.

Oops, good catch!
Looks like the tabulations have been overridden, I've changed the tab code blocks to proper markdown and also apply this to versioned docs of 0.55.

authors: charpeni mcordini

repo: facebook/react-native-website


authors: CyberCookie grabbou hramos koenpunt rozele

repo: facebook/react-native


text:
RCTUIManager.measure not working on Android

Description
RCTUIManager.measure is not working on Android. Trying this.refs.myRef.measure() doesn't give any results either.
Reproduction
import { findNodeHandle } from 'react-native';
const RCTUIManager = require('NativeModules').UIManager;

RCTUIManager.measure(findNodeHandle(this.refs.myRef), (x, y, width, height, pageX, pageY) => {
      // Returns valid values on iOS but undefined on Android
});

Additional Information

React Native version: 0.42.0
Platform: Android
Operating System: MacOS
Dev tools: Android Studio 2.3

Can you show me your view with the ref? I suspect you have the issue I've previously opened in https://github.com/facebook/react-native/issues/9382

Adding style={{opacity: 1}} did the trick. Thanks a lot!
Referring to your comment in #9382, what exactly do you mean by collapsable property?
Now I always force it to be created with collapsable property.
Although an annoyance, should I just follow your lead and close out this issue?

So style={{opacity: 1}} is what I used until I understood the issue.
Collapsable property is explained in https://facebook.github.io/react-native/docs/view.html#collapsable

Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and ensure that this View exists in the native view hierarchy.

However, some of UIManager functions such as measure expect to find a native view; and when it can't it returns undefined values instead of throwing an error; really it would be better to throw an error. React unfortunately is not intelligent to know you would be measuring the view in the first place.
Putting an explicit style is one way to disable the optimization; because now the view has to be created with special drawing properties. But the real fix is putting collapsable={false} on the view you will be measuring to disable the optimization by the documentation.

Makes sense. Thank you @hey99xx!

Having the same issue with Views that are rendered within ListView. For the visible first rows, RCTUIManager.measure receives valid data on Android. But on the invisible rows every value is undefined.
On IOS everything works fine and es expected. Running RN 0.42.
I also tried out style={{opacity: 1}} and collapsable={false}. Is doesn't matter if i pass those properties and styles or not.

@itinance  If you post your render method I can help you out.

Thx @hey99xx , any ideas?
    return (
      <View ref="container"
        collapsable={false}
        style={s.container}
        onLayout={this.onLayout}
        >
        <TouchableWithoutFeedback
          onPress={this.onPress}
          onLongPress={this.onLongPress}
          accessibilityTraits="text"
          collapsable={false}
        >
          <View style={s.row}>
            {isMe ? null : (
              <UserAvatar size={48} name={user.name} defaultName="?" src={user.avatar} style={s.avatar} />
            ) }
            <View style={[s.content, isMe ? s.contentMe : null]}>
              <View style={[s.meta, isMe ? s.metaMe : null]}>
                <SemiBoldText style={s.metaText}>{isMe ? 'Me' : user.name}</SemiBoldText>
                <LightText style={s.metaText}>{sent.format('ddd DD/MM/YYYY h:mm a')}</LightText>
              </View>

            </View>
          </View>
        </TouchableWithoutFeedback>
      </View>
    )

The "container" node in the Stylesheet contains also "opacity:1"

But on the invisible rows every value is undefined.

Is it possible that your list view is getting clipped before you start scrolling down? It is possible that on iOS you have rendered the entire list view in the first render, while on Android that's not the case.
Can you try removeClippedSubviews={false} on your list view or its rows? Not sure if collapsable prop is applicable to TouchableWithoutFeedback btw.

Yes, removeClippedSubviews={false} fixed it. Thank you @hey99xx !

@itinance You should realize that removeClippedSubviews is a performance optimization, which you are now disabling. Related documentation:

A performance optimization for improving scroll perf of large lists, used in conjunction with overflow: 'hidden' on the row containers. This is enabled by default.

Although I am glad you are unblocked, I suggest you find a different solution to measure your views after scroll. Maybe onChangeVisibleRows can work.

Thank you very much for the hint, @hey99xx. I will look at it and try it out.

Hey @hey99xx , onChangeVisibleRows works really fine and fits all of our needs. At least on iOS. On Android this event is never fired unfortunately. There was an open Pullrequest since 14 Januar (!) in the pipeline, that was closed 14 days ago without any merge "as ListView is deprecated" 👎 👎 👎

@itinance That's a shame. I was not aware it wouldn't get further bug fixes. You can look at if the new alternative FlatList has a way to do the same thing, possible through onViewableItemsChanged. I never used FlatList so I wouldn't be able to help you there. Good luck!

Also, unless you have infinite scrolling and/or very long lists with lots of images (basically heavy-weight rendering needs) I wouldn't worry too much about clipping views.

Just FYI, @hey99xx : the onViewableItemsChanged-Event of VirtualizedList/FlatList works fine unless one use react-native-infinite-scrollview, which is base component of gifted-chat.

@hey99xx hi, thanks for your answer.
I encouter the same problem on android, besides removeClippedSubviews = {false}, we can't stand the performance problem。
do you have other solutions？

sorcery!!!
style={{opacity:1 }} works like charms!!! thanks.


text:
How about Animated.subtract?

I'm finding myself typing Animated.add(x, Animated.multiply(-1, y)) a lot.
Would you take a PR that adds an Animated.subtract?

cc @janicduplessis

Sure, we have Animated.divide so I guess substract does make sense too. If you want to make a PR for it I can review it, it should be relatively simple if you start from the add implementation.

Hey, @dgreensp are you working on it? Or is it something I could take on?

@avendiart Go for it!

authors: avendiart dgreensp hramos janicduplessis


text:
Movies App redboxes when searching for ab

Repro Steps:

Open MoviesApp
Search for ab
See the redbox

[RCTGIFImage.m:89] Loading remote image URLs synchronously is a really bad idea.
http://d3biamo577v4eu.cloudfront.net/static/images/redesign/poster_default_thumb.gif

Also, would be nice to change the error message to add the url that's failing

This has been fixed. Just checked in master.

Also, the failing URL is definitely in the message.


text:
Nested Section Lists cause continuous re-render; dropped data; no sticky headers.

Nested Section Lists cause continuous re-render with dropped data;
Sticky headers do not work on nested section list
React Native version:
System:
    OS: Windows 10 10.0.17134
    CPU: (4) ia32 Intel(R) Pentium(R) CPU G4560T @ 2.90GHz
    Memory: 1.11 GB / 7.43 GB
  Binaries:
    Node: 12.10.0 - C:\Program Files (x86)\nodejs\node.EXE
    Yarn: 1.10.1 - C:\Users\mjfiandaca\AppData\Roaming\npm\yarn.CMD
    npm: 6.13.4 - C:\Program Files (x86)\nodejs\npm.CMD
  SDKs:
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 25.0.1, 26.0.3, 27.0.3, 28.0.0, 28.0.3
      System Images: android-23 | Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.6010548
  npmPackages:
    react: 16.9.0 => 16.9.0
    **react-native: 0.61.5 => 0.61.5**

Steps To Reproduce

Copy supplied code into App.js (this was reproduced with a brand-new react native playground; however, it has manifested in earlier releases for my actual App).
Look. See.

Describe what you expected to happen:
The screen should render all data in the nested Section List.
Scrolling the data should not cause screen jumping.
Scrolling the data should maintain sticky headers for the nested section list.
Snack, code example, screenshot, or link to a repository:
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  StatusBar,
  SectionList,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

const accordionTypes = ['David Bowie', 'Beatles', 'The Clash', 'HadesTown'];
const songList = ['Song One', 'Song Two', 'Song Three', 'Song Four'];

const sections = [
  {
    title: {
      item: 1,
      section: accordionTypes[0],
    },
    data: [
      [
        {
          title: {
            item: 'a',
            section: songList[0],
          },
          data: [
            {
              urn: 1,
              text: `Time, it's waiting in the wings.`,
            },
            {urn: 2, text: 'It speaks of senseless things.'},
            {urn: 3, text: `Its trick is you and me.`},
            {
              urn: 4,
              text: `Time, it's waiting in the wings.`,
            },
            {urn: 5, text: 'It speaks of senseless things.'},
            {urn: 6, text: `Its trick is you and me.`},
          ],
        },
        {
          title: {
            item: 'a',
            section: songList[1],
          },
          data: [
            {urn: 7, text: `Don't talk of dust and roses`},
            {urn: 8, text: 'Or should we powder our noses'},
            {
              urn: 9,
              text: `Don't live for last year's capers`,
            },
            {urn: 10, text: 'Give me steel give me steel.'},
            {urn: 11, text: `Give me pulses unreal.`},
          ],
        },
      ],
    ],
  },
  {
    title: {
      item: 1,
      section: accordionTypes[1],
    },
    data: [
      [
        {
          title: {
            item: 'a',
            section: songList[0],
          },
          data: [
            {
              urn: 12,
              text: 'It happened once before',
            },
            {urn: 13, text: 'When I came to your door'},
            {urn: 14, text: 'No reply'},
          ],
        },
        {
          title: {
            item: 'a',
            section: songList[1],
          },
          data: [
            {urn: 15, text: `Elanor Rigby`},
            {
              urn: 16,
              text: 'Picks up the rice in a church where a wedding has been',
            },
            {urn: 17, text: 'Lives in a dream'},
            {urn: 18, text: `Waits at the window`},
            {
              urn: 19,
              text: 'Wearing a face that she keeps in a jar by the door',
            },
            {urn: 20, text: 'Who is it for?'},
            {urn: 21, text: `All the lonely people`},
            {
              urn: 22,
              text: 'Where do they all come from?',
            },
            {urn: 23, text: 'All the lonely people'},
            {urn: 24, text: `Where do they all belong?`},
          ],
        },
      ],
    ],
  },
];

renderSectionHeader = info => {
  const {item, section} = info.section.title;
  return renderHeader(item, section);
};

renderHeader = (item, section) => {
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.sectionTitle}> {section} </Text>
    </View>
  );
};

renderSectionItem = data => {
  return renderItem(data.item, data.item.item?.urn);
};

keyExtractor = item => {
  const unique = new Date().getTime() + Math.random();
  return unique.toString();
};

renderItem = (data, item) => {
  return (
    <SectionList
      sections={data}
      stickySectionHeadersEnabled={true}
      renderSectionHeader={renderSubSectionHeader}
      renderItem={renderSubSectionItem}
      keyExtractor={keyExtractor}
    />
  );
};

renderSubSectionHeader = info => {
  const {item, section} = info.section.title;
  return renderSubHeader(item, section);
};

renderSubHeader = (item, section) => {
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.sectionTitle}> {section} </Text>
    </View>
  );
};

renderSubSectionItem = data => {
  return renderSubItem(data.item);
};

renderSubItem = data => {
  return (
    <View>
      <Text> {data.text} </Text>
    </View>
  );
};

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <SectionList
          sections={sections}
          stickySectionHeadersEnabled={true}
          renderSectionHeader={renderSectionHeader}
          renderItem={renderSectionItem}
          keyExtractor={keyExtractor}
        />
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
    backgroundColor: '#226600',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: '#ffffff',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

nested-section-lists.zip
Not sure whether this is what you are looking for, since I've never used snack before.
Funny, the red box was because I used a new react native app, and just stuck with the standard imports...duh.

Sorry, here is a link to the actual snack:
https://snack.expo.io/@mjfiandaca/nested-section-lists

The label 'needs repro' was added to this issue, but then I provided a snack illustrating the issue. Has anyone been able to look at this?

This remains an issue. Has anyone been able to look into this? Thank you.

I had the same problem，Nested SectionList requirements

https://github.com/facebook/react-native/issues/20390
@mjfiandaca That was the problem two years ago

SectionList->ScrollView(stickyHeaderIndices = [0])->Text（is ok）,FlatList
Just have to make do

#20390
@mjfiandaca That was the problem two years ago

I saw that former issue was closed two years ago. As stale. It was never fixed. I am unclear what your three comments mean on this issue. I am already making do. I would like nested section lists to work.
Thanks.

authors: mjfiandaca whereiscode


text:
React Native KeyboardAvoidingView not working with ImageBackground

Description
KeyboardAvoidingView stopped working once I added ImageBackground. Actually it's working but really bad working because when i open the keyboard, picture is broken
React Native Version
0.68.0
Output of npx react-native info
System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 3.27 GB / 15.65 GB
Binaries:
Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.6.0 - ~\AppData\Roaming\npm\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Not Found
Visual Studio: Not Found
Languages:
Java: 12.0.2 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.0 => 0.68.0
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
first pic is my layout with imagebackground and second pic is children that i sent props to  my BGImage layout.
Snack, code example, screenshot, or link to a repository

any fix ? i have the same issus

authors: OguzEkinci alainib


text:
Build App IOS ERROR

Description
❌  error: File /Users/expo/Library/Developer/Xcode/DerivedData/ReliposSaleOrder-ewdmlwntzptsgbdugffzlcepqjhl/Build/Intermediates.noindex/ArchiveIntermediates/ReliposSaleOrder/BuildProductsPath/Release-iphoneos/ReliposSaleOrder.app/main.jsbundle does not exist. This must be a bug with React Native, please report it here: https://github.com/facebook/react-native/issues
▸ ** ARCHIVE FAILED **
▸ The following build commands failed:
▸ 	PhaseScriptExecution Bundle\ React\ Native\ code\ and\ images /Users/expo/Library/Developer/Xcode/DerivedData/ReliposSaleOrder-ewdmlwntzptsgbdugffzlcepqjhl/Build/Intermediates.noindex/ArchiveIntermediates/ReliposSaleOrder/IntermediateBuildFilesPath/ReliposSaleOrder.build/Release-iphoneos/ReliposSaleOrder.build/Script-00DD1BFF1BD5951E006B06BC.sh (in target 'ReliposSaleOrder' from project 'ReliposSaleOrder')
▸ (1 failure)
** ARCHIVE FAILED **
React Native Version
"react": "18.1.0"
Output of npx react-native info
System:
OS: macOS 12.6.8
CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
Memory: 1.46 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 18.18.0 - /usr/local/bin/node
Yarn: Not Found
npm: 9.8.1 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.14 => 0.70.14
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
eas build --platform ios
Snack, screenshot, or link to a repository
https://expo.dev/accounts/phanmemhopnhat/projects/relipossaleorder

I just built it successfully yesterday

Snack: https://snack.expo.dev/@phanmemhopnhat/1abe71


text:
Build failed using ReactNative@0.75.2

Description
Hi,
I tried using npx react-native init Client and npx @react-native-community/cli@latest init Client. Both times, the build failed.
Android Emulator and Metro are connected, but not recognizing
My package.json file:
{
"name": "Client",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"react": "^18.1.0",
"react-native": "0.75.2"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/babel-preset": "0.75.2",
"@react-native/eslint-config": "0.75.2",
"@react-native/metro-config": "0.75.2",
"@react-native/typescript-config": "0.75.2",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
}
}
Thanks,
Lalitha
Steps to reproduce
npx @react-native-community/cli@latest init Client
React Native Version
0.75.2
Affected Platforms
Runtime - Android
Output of npx react-native info
npx react-native info
info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.22631
  CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
  Memory: 4.99 GB / 15.85 GB
Binaries:
  Node:
    version: 18.18.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 9.6.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "28"
      - "29"
      - "30"
      - "31"
      - "32"
      - "33"
      - "33"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 28.0.3
      - 29.0.2
      - 29.0.3
      - 34.0.0
      - 35.0.0
    System Images:
      - android-28 | Google APIs Intel x86_64 Atom
      - android-29 | Google APIs Intel x86 Atom
      - android-30 | Google APIs Intel x86 Atom
      - android-31 | Google APIs Intel x86_64 Atom
      - android-34 | ARM 64 v8a
      - android-34 | Intel x86_64 Atom
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play Intel x86_64 Atom
      - android-35 | Google APIs Intel x86 Atom_64
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
IDEs:
  Android Studio: Not Found
  Visual Studio: Not Found
Languages:
  Java: 17.0.8
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.1.0
    wanted: ^18.1.0
  react-native:
    installed: 0.75.2
    wanted: 0.75.2
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs
npm run android --info

> Client@0.0.1 android
> react-native run-android

info A dev server is already running for this project on port 8081.
info Launching emulator...
error Failed to launch emulator. Reason: The emulator (Pixel_7_API_34) quit before it finished opening. You can try starting the emulator manually from the terminal with: C:\Users\Admin\AppData\Local\Android\Sdk/emulator/emulator @Pixel_7_API_34.
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
info Installing the app...

info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor

FAILURE: Build failed with an exception.

* Where:
Settings file 'E:\ReactNative\RNNodeAuth\Client\android\settings.gradle' line: 2

* What went wrong:
Error resolving plugin [id: 'com.facebook.react.settings']
> java.io.UncheckedIOException: Could not move temporary workspace (E:\ReactNative\RNNodeAuth\Client\android\.gradle\8.8\dependencies-accessors\569c8b261a8a714d7731d5f568e0e5c05babae10-6fe9999e-9d02-4604-b013-3a28c39832e2) to immutable location (E:\ReactNative\RNNodeAuth\Client\android\.gradle\8.8\dependencies-accessors\569c8b261a8a714d7731d5f568e0e5c05babae10)

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

BUILD FAILED in 3s
error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * Where: Settings file 'E:\ReactNative\RNNodeAuth\Client\android\settings.gradle' line: 2 * What went wrong: Error resolving plugin [id: 'com.facebook.react.settings'] > java.io.UncheckedIOException: Could not move temporary workspace (E:\ReactNative\RNNodeAuth\Client\android\.gradle\8.8\dependencies-accessors\569c8b261a8a714d7731d5f568e0e5c05babae10-6fe9999e-9d02-4604-b013-3a28c39832e2) to immutable location (E:\ReactNative\RNNodeAuth\Client\android\.gradle\8.8\dependencies-accessors\569c8b261a8a714d7731d5f568e0e5c05babae10) * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 3s.
info Run CLI with --verbose flag for more details.

Reproducer
https://github.com/lalithasj/Client/tree/main
Screenshots and Videos
No response

same issue. I am using mac m1

Hi,
I'm facing an issue with my Android build after upgrading the React Native version to 0.75.2

Help will be highly appreciated!

Hi,
I'm facing an issue with my Android build after upgrading the React Native version to 0.75.2

Help will be highly appreciated!

I also hope the RN team can help us with the problem.

Hi,
Downgrading npm react-native and npm @react-native-community/cli versions is also not helpful.
Appreciate any suggestions

i am also facing same issue  Appreciate any suggestions

Hi @piyush362 ,
Thank you for your response. But your suggestion isn't working for me. npm run android in VS code and then a in the metro window. Then again npm run android in VS Code window not working.

Hi @piyush362 , Thank you for your response. But your suggestion isn't working for me. npm run android in VS code and then a in the metro window. Then again npm run android in VS Code window not working.

For now, you can use v0.73.* for more stable perfomance

Hi,
Thank you for your suggestion. Unfortunately this is also not working
npx react-native@0.73 init RNExpress3 --template react-native-template-typescript

creating empty folder and no files in it
error : npx react-native@0.73 init RNExpress3 --template react-native-template-typescript
warn Ignoring custom template: 'react-native-template-typescript'. Starting from React Native v0.71 TypeScript is used by default.

npx @react-native-community/cli@11.4.1 init RNExpressEcomm2

This is also creating empty folder
✖ Copying template
error Couldn't find the "C:\Users\Admin\AppData\Local\Temp\rncli-init-template-6aoPvZ\node_modules\react-native\template.config.js file inside "react-native" template. Please make sure the template is valid. Read more: https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template.

npx react-native@0.73 init RNExpress1

This is also creating empty folder and above template error

Appreciate any suggestions

Closing as duplicate of:

https://github.com/facebook/react-native/issues/46210

@lalithasj please try again with 0.75.3 and report back if the issue persists.

Let's keep the conversation in https://github.com/facebook/react-native/issues/46210

authors: aashish-tanwar cortinico dayasudhan harshmdr-devslane klipperklip lalithasj piyush362


text:
How to solve "com.facebook.react.modules.core.JavascriptException:mountComponent"

Create Native Layout UI to extends ViewGroupManager ,it happen"com.facebook.react.modules.core.JavascriptException:mountComponent" when i use it.
the android code is :
public class ReactVideoViewTestManager extends ViewGroupManager<FeedAutoVideo> {
    @Override
    public String getName() {
        return "ReactVideoView";
    }

    @Override
    protected FeedAutoVideo createViewInstance(ThemedReactContext themedReactContext) {
        return new FeedAutoVideo(themedReactContext);
    }

    @Override
    public boolean needsCustomLayoutForChildren() {
        return true;
    }
}

also the FeedAutoVideo is a Framelayout
js code:
render:function(){
return (
React.createElement(View,{style:styles.container},
React.createElement(ReactVideoView,null,' ')));}});

@facebook-github-bot stack-overflow


text:
Detail Callout Clipped

Sometimes it works sometimes it doesn't.  I'm not really sure why/when/how.
Here's my callout code
// annotation.detailCalloutView = object_context.detailCallout(annotation)
  detailCallout (rowData) {
    return (
      <TouchableOpacity style={{flex: 1}}>
        <Text>{`Case Number: ${rowData.caseNumber}`}</Text>
        <Text>{`Subject Name: ${rowData.subjectName}`}</Text>
        <Text>{`Date: ${rowData.dateTime}`}</Text>
        <Text>{`Address: ${rowData.address}`}</Text>
      </TouchableOpacity>
    )
  }

Here's my result in 0.18 - Sometimes this works, and sometimes it doesn't.  You can never tell which pin will work, which time.

Here's a gif of the issue being random.

For those having this issue/watching this ticket, I just verified it still exists in 0.19

+1

I had this problem too.
I ended up using react-native-maps which doesn't have this problem:
https://github.com/lelandrichardson/react-native-maps
Maybe you would like to see what they are doing there OR (even better) work together and merge it into react-native?

@af7 -  It seems react-native-maps works with Android in ways MapView can't!  @nicklockwood and @lelandrichardson - thoughts on possible merge conversation?

@GantMan I originally created that library in an effort to get it merged into RN. I would certainly love to see that happen, and we have talked about it. There are a couple of things to consider though:

react-native-maps requires google play services and an API key. This can make it extra difficult to package it with react native core, where we don't want to add that extra bulk to every RN app.
The react-native-maps library has significant API Surface Area. If it is merged into RN core, this can end up creating even more Issues/PRs for RN as a whole, where we are already struggling to keep up.
FB doesn't use react-native-maps internally

One alternative path is to remove the MapView component that's currently in core into a 3rd-party repo. This would then signal to everyone that a 3rd party solution is needed (just as it is for many things). We could add links to the main maps libraries in the docs if needed.
I'd be interested to see some more discussion around either path.

Hi there! This issue is being closed because it has been inactive for a while.
But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/detail-callout-clipped
ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top
Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

authors: GantMan af7 iricketson lelandrichardson mkonicek


text:
Building WatchKit apps with React Native

I'm interested in what the core team has to say about support for WatchKit apps. Apple Watch is an entirely new platform for developers, but it's built with the same technologies as iOS — is there any chance React Native could be used for WatchKit apps?

Right now, we're focused on normal iOS and Android. We still a very small team and don't have the resources to target a different support right now. However, we open sourced React Native in the hope that we get help from the community to build those :)

@vjeux  👍 Ok, thanks!

@lachlanjc - can you close this issue?

+1 on WatchKit support alongside iOS and Android.

+1 on WatchKit

+1 on WatchKit

+1 would love to see a working fork if anyone's got something in progress

👍🏻

@ajwhite This is the closest we have to a working fork.
Some context

+1 on watchkit !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

+1

+10000

+1

+1

+1

It would be nice to be able to use JS for building watchkit apps but nothing should stop you from using swift/objc and adding watchKit app to your existing react native app. We successfully shipped watchkit app written in swift along with our 100% react native app.

+1

+1

+1

+1

+1

+1

+1

+1

Stop with the +1 and spamming useless notifications to everyone. There are
👍🏻 emoticons, use them.
On Thu, Jan 19, 2017 at 6:35 AM pdaniloais notifications@github.com wrote:

+1
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/685#issuecomment-273791624,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADoJSubDVE0soF4u1ljF29nsACj_H1Urks5rT3TFgaJpZM4D6hh2
.

--
Cheers,
Gary

Does it work alread? Any guides online?

+1 on WatchKit

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

authors: 3den Khleo Nagle Yosiempresafo YusufBesim ajwhite aph-vsn arleyhr basdvries brentvatne carloscpda chirag04 cowboyhackr dovy emmekappa erdemildiz ericraio franciskone fungilation ghamaide lachlanjc marclundgren nigel-dewar nschurmann patrickml pdaniloais soumikcv symmetriccurve uiruson unicornRainbows vjeux vko-online vscholz westcode yeliex


text:
Remove duplicated call from NavigatorSceneConfigs

Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:

Unless you are a React Native release maintainer and cherry-picking an existing commit into a current release, ensure your pull request is targeting the master React Native branch.

Explain the motivation for making this change. What existing problem does the pull request solve?
Prefer small pull requests. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
Test plan (required)
Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
Make sure tests pass on both Travis and Circle CI.
Code formatting
Look around. Match the style of the rest of the codebase. See also the simple style guide.
For more info, see the "Pull Requests" section of our "Contributing" guidelines.

cc @hedgerwang @ericvicenti

@facebook-github-bot shipit

authors: ericvicenti fred2028 leeight


text:
Expose RCTTest for consumers via CocoaPods

Enables using RCTTestRunner in app code.

@facebook-github-bot shipit

Thanks!

authors: nicklockwood paramaggarwal