profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/sophiebits/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Sophie Alpert sophiebits Humu California https://sophiebits.com/ I like fixing things. eng at humu! former eng manager of @reactjs at Facebook. ex-@khanacademy. 💎🌸 she/her. kindness, intersectional feminism, music.

facebook/react 169857

A declarative, efficient, and flexible JavaScript library for building user interfaces.

jonschlinkert/remarkable 5112

Markdown parser, done right. Commonmark support, extensions, syntax plugins, high speed - all in one. Gulp and metalsmith plugins available. Used by Facebook, Docusaurus and many others! Use https://github.com/breakdance/breakdance for HTML-to-markdown conversion. Use https://github.com/jonschlinkert/markdown-toc to generate a table of contents.

reactjs/rfcs 3335

RFCs for changes to React

reactwg/react-18 1838

Workgroup for React 18 release.

sindresorhus/object-assign 889

ES2015 Object.assign() ponyfill

kentcdodds/modern-react 210

workshop about React's hottest new features in 16.7.0

sophiebits/adventofcode 79

Advent of Code Solutions

bvaughn/react 15

A declarative, efficient, and flexible JavaScript library for building user interfaces.

HCSSiM/yp17 5

HCSSiM style for LaTeX

issue commentfacebook/react-native

[iOS] Failed building app with Hermes enabled

I am facing the same issue with react-native version0.64.1

marf

comment created time in an hour

issue commentfacebook/react-native

"VirtualizedLists should never be nested inside plain ScrollViews with the same orientation" error in console for FlatList/SectionList with scrollEnabled={false}

I built a wrapper component do un-virtualize the list when scrollEnabled={false} to get around this, eg:

import React from 'react';
import { FlatListProps, FlatList as NativeFlatList, View } from 'react-native';

// Custom FlatList that doesnt try to virtualize when scrollEnabled={false}
// Do this to avoid "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation" error in console
export default function FlatListWrapper<ItemT>(props: FlatListProps<ItemT>) {
  if (!props.scrollEnabled) {
    return (
      <View style={props.style}>
        {!!props.ListHeaderComponent && !!props.data && props.data.length > 0 && props.ListEmptyComponent}
        {!!props.ListEmptyComponent && (!props.data || props.data.length === 0) && props.ListEmptyComponent}
        {!!props.data && props.data.map((item: any, index) => <View key={!!props.keyExtractor ? props.keyExtractor(item, index) : `${index}`}>
          {!!props.renderItem && props.renderItem({
            item, index, separators: {
              highlight: () => null,
              unhighlight: () => null,
              updateProps: (select: 'leading' | 'trailing', newProps: any) => null
            }
          })}
        </View>)}
        {!!props.ListFooterComponent && !!props.data && props.data.length > 0 && props.ListFooterComponent}
      </View>
    );
  }
  return <NativeFlatList {...props} />;
}
JeremyBradshaw7

comment created time in an hour

issue commentfacebook/react

React 18: react-router@v5 is breaking in the Strict Mode (strict effects)

We’re not yet asking application authors to try the release.

People won't listen (like me).

For example, TikTok has upgraded to React 18 already (https://twitter.com/Brooooook_lyn/status/1402632529270632456?s=20)

Since people want to try out fresh things immediately, I think a list of what is blocking people from upgrading is helpful and can reduce other one's time-wasting.

Jack-Works

comment created time in 2 hours

issue openedfacebook/react

Bug:

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. -->

React version: 17.0.2

Steps To Reproduce

  1. Render a button and a scrollable list with a height of 150px. The list should contain an array of 15 items, making sure to set the key prop of each item to unique values.
  2. Observe that you can see around 8 of the original 15 list items in view.
  3. On clicking the button, insert 15 more items into the beginning of the list, once again making sure to set the key prop of each item to unique values.
  4. Observe that you can now see around 8 of the new list items in view.

<!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. -->

Link to code example: https://codesandbox.io/s/keen-sound-7q5yf?file=/src/App.js

<!-- Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve. -->

The current behavior

If the scroll position is at the very top of a list, after inserting new items at the beginning of the list, the new items are now visible.

The expected behavior

If the scroll position is at the very top of a list, after inserting new items at the beginning of the list, the original items should remain visible.

NOTE: When the scroll position is 1 or more pixels from the top of a list, after inserting new items at the beginning of the list, the new items remain visible as expected.

created time in 4 hours

issue commentfacebook/react

React 18: react-router@v5 is breaking in the Strict Mode (strict effects)

Hi! Can you clarify what would be the purpose of an issue like this? We’re not yet asking application authors to try the release.

The Alpha is focused on the library maintainers, and there will be a several months period before the Beta. It’s expected things would need adjustment early on, and I’m worried making a list of popular libraries before the authors even got a chance to try the release might be a bit premature.

We are committed to working with library authors and helping find recommendations where they’re unclear, including on this issue tracker. I’m just not sure that making a public list is the right way to kick this off.

What do you think?

Jack-Works

comment created time in 4 hours

pull request commentfacebook/react-native

[Android] Allows to set individual (left,top,right,bottom) dotted/dashed borders

Hi @RSNara , any update on this PR?

fabriziobertoglio1987

comment created time in 4 hours

issue commentfacebook/react-native

Could not GET 'https://dl.bintray.com/umsdk/release/com/facebook/react/react-native/maven-metadata.xml'

If someone encounters this problem, please let me know how to solve it. Thank you

iamfindingway

comment created time in 5 hours

issue closedfacebook/react-native

Could not GET 'https://dl.bintray.com/umsdk/release/com/facebook/react/react-native/maven-metadata.xml'

receive Forbidden!

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

React Native version:

Run react-native info in your terminal and copy the results here.

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

Expected Results

Describe what you expected to happen.

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

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

closed time in 5 hours

iamfindingway

issue openedfacebook/react-native

Could not GET 'https://dl.bintray.com/umsdk/release/com/facebook/react/react-native/maven-metadata.xml'

receive Forbidden!

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

React Native version:

Run react-native info in your terminal and copy the results here.

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

Expected Results

Describe what you expected to happen.

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

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

created time in 5 hours

issue openedfacebook/react

React 18: react-router@v5 is breaking in the Strict Mode (strict effects)

https://github.com/ReactTraining/react-router/issues/7870

I do not have permission to post https://github.com/reactwg/react-18/discussions. Please open and pin a new issue in that repo to list all widely-used library that does not work with React 18 or need special handling.

created time in 5 hours

issue commentfacebook/react-native

"VirtualizedLists should never be nested inside plain ScrollViews with the same orientation" error in console for FlatList/SectionList with scrollEnabled={false}

Have you fixed it? I got it too. Everything worked well, but it shows errors in the console.

JeremyBradshaw7

comment created time in 5 hours

issue commentfacebook/react-native

TextInput select and edit menu labels don't follow system locale on iOS

I am having this issue now on one of my app.

jsamr

comment created time in 6 hours

issue commentfacebook/react

Misleading error description when using wrong useRef

This issue seems to be solved by https://github.com/facebook/react/pull/18031

madroneropaulo

comment created time in 6 hours

PR opened facebook/react

Dependabot/npm and yarn/fixtures/dom/handlebars 4.7.7

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.

Before submitting a pull request, please make sure the following is done:

  1. Fork the repository and create your branch from master.
  2. Run yarn in the repository root.
  3. If you've fixed a bug or added code that should be tested, add tests!
  4. Ensure the test suite passes (yarn test). Tip: yarn test --watch TestName is helpful in development.
  5. Run yarn test --prod to test in the production environment. It supports the same options as yarn test.
  6. If you need a debugger, run yarn debug-test --watch TestName, open chrome://inspect, and press "Inspect".
  7. Format your code with prettier (yarn prettier).
  8. Make sure your code lints (yarn lint). Tip: yarn linc to only check changed files.
  9. Run the Flow type checks (yarn flow).
  10. If you haven't already, complete the CLA.

Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html -->

Summary

<!-- Dependabot npm and yarn fixtures dom handlebars 4.7.7 -->

+35 -4

0 comment

3 changed files

pr created time in 9 hours

PR opened facebook/react

Dependabot/npm and yarn/fixtures/dom/hosted git info 2.8.9

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.

Before submitting a pull request, please make sure the following is done:

  1. Fork the repository and create your branch from master.
  2. Run yarn in the repository root.
  3. If you've fixed a bug or added code that should be tested, add tests!
  4. Ensure the test suite passes (yarn test). Tip: yarn test --watch TestName is helpful in development.
  5. Run yarn test --prod to test in the production environment. It supports the same options as yarn test.
  6. If you need a debugger, run yarn debug-test --watch TestName, open chrome://inspect, and press "Inspect".
  7. Format your code with prettier (yarn prettier).
  8. Make sure your code lints (yarn lint). Tip: yarn linc to only check changed files.
  9. Run the Flow type checks (yarn flow).
  10. If you haven't already, complete the CLA.

Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html -->

Summary

<!-- it hadn't been solved-->

+29 -3

0 comment

3 changed files

pr created time in 10 hours

issue commentfacebook/react

useReducer's dispatch should return a promise which resolves once its action has been delivered

@mmnoo that's sort of what I was saying. Think of it is less as "rules", and think of it as "how is this going to potentially change behavior in my application?".

I can't give specifics, because I don't know your app and I don't know what side effects you're considering doing here.

If the "side effect" is logging to the console or writing to localStorage, then while it's technically "breaking the rules", it's meaningless in the grand scheme and won't cause bugs.

If it's, say, making an HTTP DELETE call at the wrong time... then that could be very bad for your app :)

So, try to think about behavior based on the stated way React is going to execute things, not "am I breaking the rules".

pelotom

comment created time in 12 hours

Pull request review commentfacebook/react-native

remove most of tvOS remnants from the code

-/**- * Copyright (c) Facebook, Inc. and its affiliates.- *- * This source code is licensed under the MIT license found in the- * LICENSE file in the root directory of this source tree.- *- * @format- * @flow- */--'use strict';--import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';-import Platform from '../../Utilities/Platform';-import {type EventSubscription} from '../../vendor/emitter/EventEmitter';-import NativeTVNavigationEventEmitter from './NativeTVNavigationEventEmitter';--class TVEventHandler {

@Simek @EyMaddis I'm sorry I'm so late to this conversation -- I'm just now getting to the work of moving the React Native TV repo to 0.64.2 and saw this PR and discussion. Yes TVEventHandler is a weird API, but it's much easier if you use my more modern version, useTVEventHandler() (see https://github.com/react-native-tvos/react-native-tvos/pull/86). Maybe that could be merged to core.

Simek

comment created time in 12 hours

pull request commentfacebook/react

Fix typo

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

houssemchebeb

comment created time in 13 hours

pull request commentfacebook/react

Fix typo

<!-- 0 failure: 0 warning:

1 markdown notices DangerID: danger-id-stable; -->

Comparing: 1a106bdc2abc7af190b791d13b2ead0c2c556f7a...4b09c091809081be04a87986c45f8164a6ec7c0c

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 126.89 kB 126.89 kB = 40.69 kB 40.69 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 129.70 kB 129.70 kB = 41.61 kB 41.61 kB
facebook-www/ReactDOM-prod.classic.js = 406.00 kB 406.00 kB = 75.07 kB 75.07 kB
facebook-www/ReactDOM-prod.modern.js = 394.35 kB 394.35 kB = 73.25 kB 73.25 kB
facebook-www/ReactDOMForked-prod.classic.js = 406.00 kB 406.00 kB = 75.07 kB 75.07 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

<p align="right"> Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against 4b09c091809081be04a87986c45f8164a6ec7c0c </p>

houssemchebeb

comment created time in 13 hours

pull request commentfacebook/react

Fix typo

Hi @houssemchebeb!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

houssemchebeb

comment created time in 13 hours

PR opened facebook/react

Fix typo

Summary

Fix typo in react-devtools-shared

+8 -8

0 comment

5 changed files

pr created time in 13 hours

issue commentfacebook/react

createPortal: support option to stop propagation of events in React tree

Hi. I just published a library and it contains a wrapper around Portals and it dodges this event bubbling behaviour by portal-ling the portal itself. I didn't really test the implementation but feel free to check it out.

image

Portal Renderer code - https://github.com/nibmz7/nimz-app/blob/main/core/utils/Portal/PortalRenderer.tsx Portal code - https://github.com/nibmz7/nimz-app/blob/main/core/utils/Portal/index.tsx The library if you intend to try it out - https://www.npmjs.com/package/nimz-utils

I haven't tried the library out myself actually 😅. If it doesn't work, you may copy for portals over to your project.

kib357

comment created time in 14 hours

issue openedfacebook/react

React 18

Just a suggestion

In React 18 , React should accept extra params to setState function so dev can specify what changed in more general terms that he/she can use in React.memo() to determine if that changes should re-render the specific component with the new data

it should be something like this

setState(
  [...state.users, user], 
  {action:'USER_ADDED', id : 'some_id'}
);

the broadcast can be any arbitrary data

and then in the User component, we can catch that broadcast in React.memo() like this

const User= (user)=>{
   // component code   
}
export default React.memo(User, (prev, next, brodcast)=>{
  if(broadcast?.action === 'ACTION_ADDED'  &&  next.id !== broadcast.id){
   // should not re-render this component
   return true;
 }
 return false;
});

this should work with batch setState as well just instead of object, broadcast should have an array of broadcasts

this will save the devs from deep comparison of props if it holds a lot of data nodes in it.

created time in 14 hours

issue commentfacebook/react

useReducer's dispatch should return a promise which resolves once its action has been delivered

@markerikson that is a very useful explanation, thanks for taking the time to write it.

I think I have another solution to my specific problem that is less convoluted than a useEffect. (Munging ui (focus) state with data state as a tradeoff).

If I were to pollute my reducer with a side effect and there was no downside to redundant calls to that side effect, is there still a risk of issues with your understanding?

Just curious where rules can be bent. Not meaning to call all of FP ideology as I quite like it. Although when blindly followed anything start to feel that way :)

pelotom

comment created time in 16 hours

issue commentfacebook/react-native

Local image is not being rendered in release and TestFlight

I had the same issue so upgraded React and React Native using the Upgrade helper as a guide

My System:

  • Apple Mac Mini M1 Silicon (2020).
  • Mac OS 11.4
  • XCode 12.5 (open with Rosetta)
  • Target Build IOS 14.3

I made the following changes to package.json:

  • Updated from "react": "16.13.1" to "react": "17.0.1"
  • Updated from "react-native": "0.63.4" to "react-native": "0.64.2",
  • Updated from "@babel/core": "^7.8.4" to "@babel/core": "^7.12.9"
  • Updated from "@babel/runtime": "^7.8.4" to "@babel/runtime": "^7.12.5"
  • Updated from "@react-native-community/eslint-config": "^1.1.0" to "@react-native-community/eslint-config": "^2.0.0"
  • Updated from "@types/jest": "^25.1.0" to "@types/jest": "^26.0.23"
  • Updated from "eslint": "^6.5.1" to "eslint": "^7.14.0"
  • Updated from "jest": "^25.1.3" to "jest": "^26.6.3"
  • Updated from "metro-react-native-babel-preset": "^0.59.0" to "metro-react-native-babel-preset": "^0.64.0"
  • Updated from "react-test-renderer": "16.13.1" to "react-test-renderer": "17.0.1"

Updated Node to 16.3.0 in NVM.

  • In Terminal: nvm unalias default Deleted node_modules folders, pod folder and cleaned build in Xcode Deleted everything in /Users/xxxxx/Library/Developer/Xcode/DerivedData Installed all packages: npm install Updated pod repo: arch -x86_64 pod repo update Installed pod packages: arch -x86_64 pod install (Note: arch -x86_64 only for M1 Silicon)

Then built and archived successfully in Xcode 12.5. Images then rendered in TestFlight

junqdu

comment created time in 17 hours

pull request commentfacebook/react-native

refactor: remove DefaultProps from the StatusBar Component

@Fannolo Great thank you! Would you also be interested in writing a jest test for this component? You can take a look at VirtualizedList-test as an example: https://github.com/facebook/react-native/blob/dc80b2dcb52fadec6a573a9dd1824393f8c29fdc/Libraries/Lists/tests/VirtualizedList-test.js

you can check out the Jest API: and run the the test via

yarn test [name of your test]

Hi @lunaleaps, I added some tests to the StaturBar component could you take a look and see if I'm going on the right direction? Thanks!

Fannolo

comment created time in 17 hours

issue openedfacebook/react-native

`display: none` style property ignored on Android for nested text

Description

Text: display: none won't work on Android for nested text elements.

React Native version:

<pre> System: OS: Linux 5.9 Manjaro Linux CPU: (8) x64 Intel(R) Core(TM) i7-8809G CPU @ 3.10GHz Memory: 2.58 GB / 31.28 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.16.0 - /usr/bin/node Yarn: 2.4.0 - /usr/bin/yarn npm: 7.15.0 - /usr/bin/npm Watchman: 4.9.0 - /usr/bin/watchman SDKs: Android SDK: API Levels: 28, 29, 30 Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.3, 31.0.0 System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.2 AI-202.7660.26.42.7351085 Languages: Java: 1.8.0_292 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: ^0.64.2 => 0.64.2 npmGlobalPackages: react-native: Not Found </pre>

Steps To Reproduce

Implement any component rendering this hierarchy of elements:

<Text>
  <Text style={{ display: 'none' }}>Hello world!</Text>
</Text>

And run on Android.

Expected Results

"Hello world" should not be displayed on screen.

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

https://snack.expo.io/@jsamr/nested-text-display-none

screenshot

created time in 17 hours

push eventfacebook/react-native

Samuel Susla

commit sha e24b55ef4f0909ac9ccfb8d9ecc55f6964cff345

Clean up RuntimeScheduler's API Summary: Changelog: [internal] Mark methods as noexcept and explicitly delete unwanted constructors. Reviewed By: fkgozali Differential Revision: D29085827 fbshipit-source-id: 872009113e2bd519ab3ae11879a15d15f780198f

view details

push time in 18 hours

pull request commentfacebook/react-native

Addressing various issues with the Appearance API (#28823)

So.... anything new?

mrbrentkelly

comment created time in 18 hours