profile
viewpoint
Eli White TheSavior @facebook Redwood City, CA http://eli-white.com React Native @facebook. Circus Enthusiast. Dessert Fanatic. Ex. @wealthfront @airbnb @google @microsoft

microsoft/react-native-windows 12396

A framework for building native Windows apps with React.

reactjs/react-docgen 2719

A CLI and toolbox to extract information from React component files for documentation generation purposes.

microsoft/react-native-macos 1260

A framework for building native macOS apps with React.

cpojer/js-codemod 992

Codemod scripts to transform code to next generation JS

TheSavior/ESLint-Formatter 137

Sublime Text 3 Plugin to Autoformat with Eslint

TheSavior/covid19-changes 12

View the diff of CDC's COVID-19 updates

TheSavior/clean-git-ref 3

Clean an input string into a usable git ref

TheSavior/2048 1

A small clone of 1024 (https://play.google.com/store/apps/details?id=com.veewo.a1024)

TheSavior/conservice-charges 1

Visualize your conservice charges over time.

AndyMoreland/hackathon-project-backend 0

The winning hackathon project

push eventTheSavior/covid19-changes

Eli White

commit sha 5e82cf854ca5b76326965d6e16fa477313a26ea5

Add new CDC file

view details

push time in an hour

push eventTheSavior/covid19-changes

Eli White

commit sha 88de3991fdd3e1cec03a7c78f9bd9cdd8f46105a

Add new CDC file

view details

push time in a day

push eventTheSavior/covid19-changes

Eli White

commit sha 878e0de321ef7ed871fe3b14a1c3692c3e4b731f

Add new CDC file

view details

push time in 2 days

push eventTheSavior/covid19-changes

Eli White

commit sha 9cdb0be7d1558700a43d82df9a85966f7240b5dc

Add new CDC file

view details

push time in 3 days

push eventTheSavior/covid19-changes

Eli White

commit sha 4d5c8a3e0def74a9e1f5b74d70d2178fc0cc7a57

Add new CDC file

view details

push time in 4 days

push eventTheSavior/covid19-changes

Eli White

commit sha 13d852dd814a4eb984b39edede60bd47b7c661df

Add new CDC file

view details

push time in 4 days

issue closedmicrosoft/react-native-macos

Overflow hidden property on View not working

Issue

Children views overflow parent view even when style property overflow is set to hidden.

Steps to Reproduce

<View style={{backgroundColor: 'red', width: 100, height: 100, overflow: 'hidden'}}>
    <View
        style={{
          backgroundColor: 'blue',
          width: 200,
          height: 200,
          opacity: 0.4,
        }}
    />
</View>

Child view overflows the bounds of the parent view.

image

Expected Behavior

should result in

image

closed time in 4 days

AkshatGiri

issue commentmicrosoft/react-native-macos

Overflow hidden property on View not working

It seems like this should be resolved. @akshatgiri feel free to reopen if it still repros

AkshatGiri

comment created time in 4 days

push eventTheSavior/covid19-changes

Eli White

commit sha 2c220aefb44ec98cef6f089d195803ca62118503

Add new CDC file

view details

push time in 5 days

MemberEvent

push eventstmoy/react-native

Eli White

commit sha 84135af43f07bf496f658344afb2915f04866598

Add a FB URL

view details

push time in 6 days

push eventTheSavior/covid19-changes

Eli White

commit sha 6ccdd795bdd44258d1fd7fcb31728dddcd7249f7

Add new CDC file

view details

push time in 6 days

Pull request review commentfacebook/react-native

Update ECOSYSTEM.md to reflect updated partnerships

 There are three types of stakeholders:  ## Partners -Partners are companies that are significantly invested in React Native and have been for years. Informed by their use of React Native, they push for improvements of the core and/or the ecosystem around it. Facebook's partners think of React Native as a product: they understand the trade offs that the project makes as well as future plans and goals. Together we shape the vision for React Native to make it the best way to build applications.+Partners are companies that are significantly invested in React Native and have been for years. Informed by their use of React Native, they push for improvements of the core and/or the ecosystem around it. Partners think of React Native as a product: they understand the trade offs that the project makes as well as future plans and goals. Together we shape the vision for React Native to make it the best way to build applications. -Our current set of partners include Callstack, Expo, Infinite Red, Microsoft and Software Mansion. Many engineers from these companies are core contributors, and their partner responsibilities also include:+React Native's current set of partners include Callstack, Expo, Facebook, Infinite Red, Microsoft and Software Mansion. Many engineers from these companies are core contributors, and their partner responsibilities also include:  * **[Callstack](https://callstack.com/):** Manages releases, maintains the [React Native CLI](https://github.com/react-native-community/react-native-cli) and organizes [React Native EU](https://react-native.eu/) * **[Expo](https://expo.io/):** Builds [expo](https://github.com/expo/expo) on top of React Native to simplify app development+* **[Facebook]():** Oversees the React Native product and maintains the [React Native core repo](https://reactnative.dev/) 

Hmm, good question about what this should link to. Facebook.com? Facebook's engineering blog? the React Native public docs? Hmm. I don't have a good answer to that. What do you think? 😀

stmoy

comment created time in 6 days

Pull request review commentmicrosoft/react-native-windows

Create Reconcile keyboarding in desktop proposal doc

+# Reconcile Keyboarding APIs in React Native - desktop++There are several APIs and behaviors around keyboarding introduced in Windows and macOS, some of which match and some don&#39;t. Windows implementation is a bit more complete. The ultimate goal is to reconcile and come up with a singular set of keyboarding APIs and behaviors for RN desktop that can then be proposed for upstreaming into core as well as documented cleanly. This document captures the set of APIs and behaviors and identifies:++- Deltas between implementations in order to reconcile one with the other+- Deltas in scenarios that need to be completed in both+- Any other fall out work++## acceptsKeyboardFocus++Property that determines whether this View, Touchable should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. Setting the property to true will make that View compoonent become a part of tabbing loop.++| **TYPE** | **REQUIRED** | **PLATFORM** | **DEFAULT** |+| --- | --- | --- | --- |+| boolean | No | Windows, macOS | false |++React Native core introduced `focusable` that does the same thing as acceptsKeyboardFocus in v0.62. In order to align and make this complete, the work here includes the following:+- **COMPLETED** : Windows has added `focusable` and marked `acceptsKeyboardFocus` as deprecated in 0.62. +- macOS needs to do add `focusable` and mark `acceptsKeyboardFocus` as deprecated. Tracked by - [Issue#498](https://github.com/microsoft/react-native-macos/issues/498)+- **COMPLETED** : Add focusable to Pressable ([windows Issue#5512](https://github.com/microsoft/react-native-windows/issues/5512), [macOS Issue#500](https://github.com/microsoft/react-native-macos/issues/500)). +- `focusable` is already supported in Android and exists in core. There is no hard upstreaming requirement, however – it would be good to implement this for iOS/iPadOS for completion.++## focus, blur, onFocus, onBlur on View++React Native core supports `.focus()`, `.blur()` methods and `onFocus()`, `onBlur()` callbacks on TextInput component. Windows and macOS implementations add the same methods and callbacks on View in addition to supporting them on TextInput. The work remaining for these include:+- **COMPLETED** : The event bubbling behavior with .focus() and .blur() on View in macOS has some differences from Windows and w3c standards. The behavior needs to be evaluated and reconciled between the 2 platforms.+- The microsoft/react-native fork has implementations for all the above methods and callbacks for iOS and Android as well. Once the event bubbling behavior above has been reconciled, these can be upstreamed to core. Tracked by [Issue#243](https://github.com/microsoft/react-native-macos/issues/243)+- TextInput also includes an `isFocused()` method that returns true/false based on whether this TextInput currently has focus. It will be useful to add this to View to and upstream as a separate PR. Tee this up with the previous one. Tracked by - [windows Issue#5511](https://github.com/microsoft/react-native-windows/issues/5511), [macOS Issue#499](https://github.com/microsoft/react-native-macos/issues/499)+- Add `.focus()`, `.blur()`, `onFocus()`, `onBlur()` and `isFocused()` to Pressable. Tracked by [windows Issue#5589](https://github.com/microsoft/react-native-windows/issues/5589), [macOS Issue#518](https://github.com/microsoft/react-native-macos/issues/518)++## Default keyboarding behaviors on JS components++Both Windows and macOS implementations have added appropriate keyboarding defaults to JS components like Button, Touchables. The implementation includes firing onPress() callbacks on Button and Touchable components when they are in focus and Enter/Space key is pressed. The work remaining for these include:+- Upstream keyboarding defaults on Button, Touchables from RNW to core. Tracked by - [windows Issue#4379](https://github.com/microsoft/react-native-windows/issues/4379)+- Add the same support to the new Pressable component in v0.63 and upstream it so all platforms can share it. Tracked by - [windows Issue#4379](https://github.com/microsoft/react-native-windows/issues/4379)+- macOS has some default tabbing and arrow key behaviors supported directly in VirtualizedList, FlatList, SectionList components. These need to be evaluated, completed and then upstreamed to core at which point all downstream components (including Windows) can share the behaviors. Tracked by [macOS Issue#519](https://github.com/microsoft/react-native-macos/issues/519).++## onScrollKeyDown method++macOS has implemented an `onScrollKeyDown` callback in ScrollView to scroll the content when arrow key is pressed. Work to reconcile this includes:++- Deprecate this separate API in favor of exposing generic `onKeyDown`, `onKeyUp` methods instead (see following sections). Tracked by - [Issue#501](https://github.com/microsoft/react-native-macos/issues/501)+- Use the generic callbacks to implement the scroll behavior in lists and scrollviews in macOS and Windows++## onKeyXX callbacks

@harinikmsft onKeyPress is deprecated on web. How does web support IME scenarios? https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

harinikmsft

comment created time in 6 days

push eventTheSavior/covid19-changes

Eli White

commit sha 868de0cfd223c49c553e18a914a718fb5e049955

Add new CDC file

view details

push time in 7 days

push eventTheSavior/covid19-changes

Eli White

commit sha 08ffd32e17c14585743ffd7d180620e574955626

Add new CDC file

view details

push time in 7 days

Pull request review commentmicrosoft/react-native-windows

Create Reconcile keyboarding in desktop proposal doc

+# Reconcile Keyboarding APIs in React Native - desktop++There are several APIs and behaviors around keyboarding introduced in Windows and macOS, some of which match and some don&#39;t. Windows implementation is a bit more complete. The ultimate goal is to reconcile and come up with a singular set of keyboarding APIs and behaviors for RN desktop that can then be proposed for upstreaming into core as well as documented cleanly. This document captures the set of APIs and behaviors and identifies:++- Deltas between implementations in order to reconcile one with the other+- Deltas in scenarios that need to be completed in both+- Any other fall out work++## acceptsKeyboardFocus++Property that determines whether this View, Touchable should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. Setting the property to true will make that View compoonent become a part of tabbing loop.++| **TYPE** | **REQUIRED** | **PLATFORM** | **DEFAULT** |+| --- | --- | --- | --- |+| boolean | No | Windows, macOS | false |++React Native core introduced `focusable` that does the same thing as acceptsKeyboardFocus in v0.62. In order to align and make this complete, the work here includes the following:+- **COMPLETED** : Windows has added `focusable` and marked `acceptsKeyboardFocus` as deprecated in 0.62. +- macOS needs to do add `focusable` and mark `acceptsKeyboardFocus` as deprecated. Tracked by - [Issue#498](https://github.com/microsoft/react-native-macos/issues/498)+- **COMPLETED** : Add focusable to Pressable ([windows Issue#5512](https://github.com/microsoft/react-native-windows/issues/5512), [macOS Issue#500](https://github.com/microsoft/react-native-macos/issues/500)). +- `focusable` is already supported in Android and exists in core. There is no hard upstreaming requirement, however – it would be good to implement this for iOS/iPadOS for completion.++## focus, blur, onFocus, onBlur on View++React Native core supports `.focus()`, `.blur()` methods and `onFocus()`, `onBlur()` callbacks on TextInput component. Windows and macOS implementations add the same methods and callbacks on View in addition to supporting them on TextInput. The work remaining for these include:+- **COMPLETED** : The event bubbling behavior with .focus() and .blur() on View in macOS has some differences from Windows and w3c standards. The behavior needs to be evaluated and reconciled between the 2 platforms.+- The microsoft/react-native fork has implementations for all the above methods and callbacks for iOS and Android as well. Once the event bubbling behavior above has been reconciled, these can be upstreamed to core. Tracked by [Issue#243](https://github.com/microsoft/react-native-macos/issues/243)+- TextInput also includes an `isFocused()` method that returns true/false based on whether this TextInput currently has focus. It will be useful to add this to View to and upstream as a separate PR. Tee this up with the previous one. Tracked by - [windows Issue#5511](https://github.com/microsoft/react-native-windows/issues/5511), [macOS Issue#499](https://github.com/microsoft/react-native-macos/issues/499)

We had to leave methods on the ref while we are in a world where both fabric and paper exist so we had to put the plans to move to a top-level api on hold. The issue is that ref.blur can change the implementation of blur based on which React renderer you are using. We don't have a way to make import {blur} from 'react-native'; blur(ref); use a different implementation of blur based on which renderer you are using.

harinikmsft

comment created time in 7 days

issue commentcallstack/react-native-testing-library

Error for every fireEvent changing state in a component with a Switch

Probably something about the mock that is being used for Switch not forwardRef'ing to the underlying component created with requireNativeComponent, or something like that.

That warning fires when dispatchCommand is called with a ref to a component that was created in JS like a JS function or class, vs a ref to a component created like this: requireNativeComponent('RCTSwitch')

Pardiez

comment created time in 7 days

push eventTheSavior/covid19-changes

Eli White

commit sha 4d1f703f7234c2e2fcfe961bc8bf16602b18ac63

Add new CDC file

view details

push time in 8 days

issue commentmicrosoft/react-native-windows

onMouseEnter doesn't trigger on View where backgroundColor is not set

We've bumped into this bug in a couple more places that we've had to work around (for example backgroundColor: 'rgba(0,0,0,.01)'). It would be great to get this bumped up in priority as we only know to add these workarounds when something is broken on Windows that works on Mac vs systematically.

MasonBergstrom

comment created time in 8 days

push eventTheSavior/covid19-changes

Eli White

commit sha 775d590294c2904e769a85948fced96db89b9441

Add new CDC file

view details

push time in 9 days

issue commentmicrosoft/react-native-windows

Release RNW 0.63 (Checklist)

I'm new, so I have some noob questions. 😀 How do you choose what commit to update to? Is it the same commit that is used for a release on core? Do you plan to release each patch version as well or do you just jump to the latest patch release for that stable branch?

NickGerleman

comment created time in 9 days

push eventTheSavior/covid19-changes

Eli White

commit sha f4821865a3e7ebc18bfc3a0569a9fb959049e8a1

Add new CDC file

view details

push time in 10 days

push eventTheSavior/covid19-changes

Eli White

commit sha 9e8907420fd35babce67bfdc78de46ff4b8fb2e7

Add new CDC file

view details

push time in 10 days

push eventTheSavior/covid19-changes

Eli White

commit sha 8b5b5693651e4ec3c633a46f21da07b307845729

Add new CDC file

view details

push time in 11 days

pull request commentmicrosoft/react-native-windows

[WIP] Integrate React Native Up to The Base of 0.63

Looks pretty small, nice!

The main change here that you should test is the Inspector from the dev menu as well as the interaction with the standalone react devtools inspector when the in-app inspector is enabled.

NickGerleman

comment created time in 11 days

issue commentmicrosoft/react-native-windows

Add `.focus()`, `.blur()`, `onFocus()`, `onBlur()` and `isFocused()` to Pressable

If these are added to View they should automatically become available on Pressable because Pressable uses forwardRef to <View>: https://github.com/facebook/react-native/blob/master/Libraries/Components/Pressable/Pressable.js#L158-L159

harinikmsft

comment created time in 11 days

push eventTheSavior/covid19-changes

Eli White

commit sha f812d77697cac78de15398c65d267ff35848b2ed

Add new CDC file

view details

push time in 11 days

push eventTheSavior/covid19-changes

Eli White

commit sha cbcb9cb1ec7f59d6be529c16ae15a36e5c1a0556

Add new CDC file

view details

push time in 12 days

push eventTheSavior/covid19-changes

Eli White

commit sha c6977390e5010247feba791980dd904ef7f66be2

Add new CDC file

view details

push time in 13 days

push eventTheSavior/covid19-changes

Eli White

commit sha bc345d8fa2b0eb653d79171f21ddaf19cc72db9f

Add new CDC file

view details

push time in 14 days

push eventTheSavior/covid19-changes

Eli White

commit sha 14a2c0ae12a75d1a90d5314beeef7194cffe72a1

Add new CDC file

view details

push time in 14 days

push eventTheSavior/covid19-changes

Eli White

commit sha 996a9cc73a69006b99f4e75fc7a4e52487085102

Add new CDC file

view details

push time in 14 days

issue closedreact-native-community/discussions-and-proposals

Pass component's own props to event handler functions for native components

Introduction

I would like to discuss the idea of passing component's own props to the event handler functions, on native components. To be noted that I am not sure whether this proposal would be fit for React Native, or the core React project, forgive me if it doesn't belong here.

Details

One of the major flaws that I see in developing react native projects, is that it's very hard to "inject" data into event handler functions. This easily forces devs into binding functions in render just so they are able to access some data: <TouchableOpacity onPress={()=>{ handlePress(greeting, rank, name); }}> Even worse, some may be tempted to use global variables or class fields to pass data. Everyone should already know the issues of using these solutions (unnecessary re-renders, stalled state, ect.). Nevertheless, we still need to access data computed at render time in order to handle some events, and do so without using global variables or class fields.

A class component could mitigate the issue, allowing to compute some data in the event handler function itslef. But we can all agree that this method has 2 main issues:

  • the overhead of a class component, way overkill if you just need some data computed at render time
  • some data may be shared by other components rendered in the return tree, forcing the creation of helper functions, to avoid duplicating logic and/or data - which in turn causes clutter.

My proposal aims to avoid these issues, by proposing for React Native to pass component's own props to any of the event handler functions. This behavior should only be implemented for native components/events - that is, custom components are free to handle events as they see fit. The props would be availabe to the event handler function as an additional parameter to the parameters list of an event handler function.

Consider the following example:

function handlePress(event, ownProps){
	// ownProps is the proposed change - an object which contains all of
	// component's own props. In this case, for example, it contains:
	/* ownProps = {
		greeting: "Hello there",
		rank: "General",
		name: "Kenobi",
		onPress: <function handlePress>
	} */
	
	const { greeting, rank, name } = ownProps;

	console.log(`${greeting}, ${rank} ${name}`);
}

function CustomButton(props){
	const name = props.name || "Kenobi";

	return <TouchableOpacity
		greeting="Hello there"
		rank={props.rank || "General"}
		name={name}
		onPress={handlePress}
	>
		<Text>Greet {name}</Text>
	</TouchableOpacity>;
}

Discussion points

The pros:

  • This proposal allows to easily compute and share data from the render function to the event handler functions
  • There is no need to switch to a class component to access component's props
  • No need to use state to ensure updated computed data is used for every component in the returned render tree

Any cons ? I don't have knowledge of the possible impact that this may have on the core logic in React / React Native. I can suppose that passing through component's own props creates some additional work behind the scenes, which could possibly impact performance. However, computed props will be already available and computed during each component's render, which should not create additional overhead to process those.

What do you guys think about this proposal? Did I not catch any flaws in it?

closed time in 15 days

CostachescuCristinel

issue commentreact-native-community/discussions-and-proposals

Pass component's own props to event handler functions for native components

I think this is more of a question or proposal for React than React Native. Consider opening an issue in the React RFCs repo to get feedback.

CostachescuCristinel

comment created time in 15 days

push eventTheSavior/covid19-changes

Eli White

commit sha e863b3509774cefa96dba8063fdff1cba7fefb9e

Add new CDC file

view details

push time in 15 days

issue commentmicrosoft/react-native-macos

Focus events

I also created this flow chart of the different pieces of focus handling last year when I was refactoring some of the JS code. It might come in handy again.

67992345-982c9d80-fbf9-11e9-96ea-b091210dddbe

For more context on where that image came from, you can check out the commit message from https://github.com/facebook/react-native/commit/e9b4928311513d3cbbd9d875827694eab6cfa932

tom-un

comment created time in 15 days

issue commentmicrosoft/react-native-macos

Focus events

Apparently this isn't checked in to the open source repo, but I wrote an integration test for this code on Android at one point. You may want to reuse this:

/**
 * (c) Facebook, Inc. and its affiliates. Confidential and proprietary.
 *
 * @flow strict-local
 * @format
 */

'use strict';

import {ScrollView, StyleSheet, TextInput, View} from 'react-native';
import * as React from 'react';

function useFocusIndicator(
  name,
  dependency,
): [
  {|current: ?React.ElementRef<typeof TextInput>|},
  React.Element<typeof View>,
] {
  const inputRef = React.useRef<?React.ElementRef<typeof TextInput>>(null);
  const [focused, setFocused] = React.useState<boolean>(false);

  React.useEffect(() => {
    if (inputRef.current != null) {
      setFocused(inputRef.current.isFocused());
    }
  }, [dependency]);

  const indicator = (
    <View
      testID={`${name}_indicator`}
      style={{
        backgroundColor: focused ? 'lime' : 'red',
        width: 50,
        height: 50,
        margin: 5,
      }}
    />
  );

  return [inputRef, indicator];
}

function TextInputFocusBlurApp(props: {...}): React.Element<typeof ScrollView> {
  const [counter, setCounter] = React.useState(0);

  const [inputRef1, indicator1] = useFocusIndicator('ti_1', counter);
  const [inputRef2, indicator2] = useFocusIndicator('ti_2', counter);

  return (
    <ScrollView keyboardShouldPersistTaps="handled">
      <View style={styles.container}>
        <View
          testID="safe_target"
          style={{backgroundColor: '#ccc', width: 100, height: 100}}
        />
        <View style={styles.row}>
          <TextInput
            testID="ti_1"
            ref={inputRef1}
            onFocus={() => setCounter(count => count + 1)}
            onBlur={() => setCounter(count => count + 1)}
            placeholder="input 1"
            returnKeyType="next"
            style={styles.input}
          />
          {indicator1}
        </View>
        <View style={styles.row}>
          <TextInput
            testID="ti_2"
            ref={inputRef2}
            onFocus={() => setCounter(count => count + 1)}
            onBlur={() => setCounter(count => count + 1)}
            placeholder="input 2"
            returnKeyType="done"
            style={styles.input}
          />
          {indicator2}
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    padding: 10,
    paddingTop: 30,
  },
  input: {
    borderColor: '#eee',
    borderWidth: 1,
    padding: 5,
    margin: 5,
  },
  row: {
    flexDirection: 'row',
  },
});

export default TextInputFocusBlurApp;
// (c) Facebook, Inc. and its affiliates. Confidential and proprietary.

package com.facebook.react;

import android.view.View;
import com.facebook.react.testing.ReactAppInstrumentationTestCase;
import com.facebook.react.views.textinput.ReactEditText;
import com.facebook.react.views.view.ReactViewBackgroundDrawable;

public class TextInputFocusBlurTestCase extends ReactAppInstrumentationTestCase {

  public void testTextInputStartsBlurred() throws Throwable {
    final ReactEditText editText1 = getViewByTestId("ti_1");
    final ReactEditText editText2 = getViewByTestId("ti_2");
    final View indicator1 = getViewByTestId("ti_1_indicator");
    final View indicator2 = getViewByTestId("ti_2_indicator");

    getInstrumentation().waitForIdleSync();
    waitForBridgeAndUIIdle();

    assertFalse(editText1.isFocused());
    assertFalse(editText2.isFocused());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator1.getBackground()).getColor());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator2.getBackground()).getColor());
  }

  public void testTextInputIsFocusedWhenTapped() throws Throwable {
    final ReactEditText editText1 = getViewByTestId("ti_1");
    final ReactEditText editText2 = getViewByTestId("ti_2");
    final View indicator1 = getViewByTestId("ti_1_indicator");
    final View indicator2 = getViewByTestId("ti_2_indicator");

    tapOnView(editText1);

    getInstrumentation().waitForIdleSync();
    waitForBridgeAndUIIdle();

    assertTrue(editText1.isFocused());
    assertFalse(editText2.isFocused());

    assertEquals(
        android.graphics.Color.GREEN,
        ((ReactViewBackgroundDrawable) indicator1.getBackground()).getColor());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator2.getBackground()).getColor());
  }

  public void testTextInputChangesFocusedWhenTapped() throws Throwable {
    final ReactEditText editText1 = getViewByTestId("ti_1");
    final ReactEditText editText2 = getViewByTestId("ti_2");
    final View indicator1 = getViewByTestId("ti_1_indicator");
    final View indicator2 = getViewByTestId("ti_2_indicator");

    tapOnView(editText1);
    tapOnView(editText2);

    getInstrumentation().waitForIdleSync();
    waitForBridgeAndUIIdle();

    assertFalse(editText1.isFocused());
    assertTrue(editText2.isFocused());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator1.getBackground()).getColor());

    assertEquals(
        android.graphics.Color.GREEN,
        ((ReactViewBackgroundDrawable) indicator2.getBackground()).getColor());
  }

  public void testTextInputBlursWhenTappingInScrollView() throws Throwable {
    final View safeTarget = getViewByTestId("safe_target");
    final ReactEditText editText1 = getViewByTestId("ti_1");
    final ReactEditText editText2 = getViewByTestId("ti_2");
    final View indicator1 = getViewByTestId("ti_1_indicator");
    final View indicator2 = getViewByTestId("ti_2_indicator");

    tapOnView(editText1);
    tapOnView(editText2);
    tapOnView(safeTarget);

    getInstrumentation().waitForIdleSync();
    waitForBridgeAndUIIdle();

    assertFalse(editText1.isFocused());
    assertFalse(editText2.isFocused());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator1.getBackground()).getColor());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator2.getBackground()).getColor());
  }

  private void tapOnView(View view) {
    assertNotNull(view);
    int[] viewLocation = new int[2];
    view.getLocationOnScreen(viewLocation);
    createGestureGenerator()
        .startGesture((float) viewLocation[0] + 1.f, (float) viewLocation[1] + 1.f)
        .endGesture();
  }

  @Override
  protected String getReactApplicationKeyUnderTest() {
    return "TextInputFocusBlurTestModule";
  }
}
tom-un

comment created time in 15 days

issue commentmicrosoft/react-native-macos

Focus events

Something you may want to check:

On iOS / Android if you have <ScrollView><TextInput /></ScrollView>, click on the TextInput to focus it, and then click on the ScrollView outside of the TextInput, the TextInput will get blurred.

I imagine with this change if you have a <View> inside the ScrollView and focus it then click off it won't get blurred. We'll probably need to figure out how that logic needs to get wired up (it's all in JavaScript).

tom-un

comment created time in 15 days

push eventTheSavior/covid19-changes

Eli White

commit sha 541ee939b46832310c54825d97310a9015c308a7

Add new CDC file

view details

push time in 15 days

push eventfacebook/react-native-website

Dan Abramov

commit sha 1d370c92857e1ff71a98f3fa01e26d84a42c4a9e

Tweak principles blog wording (#2076)

view details

push time in 15 days

delete branch facebook/react-native-website

delete branch : gaearon-patch-1

delete time in 15 days

PR merged facebook/react-native-website

Tweak blog wording

I found these a bit confusing. I think in the original draft these examples were meant to show what React is continuing working on — not what React has popularized. Let's just cut it?

+1 -1

0 comment

1 changed file

gaearon

pr closed time in 15 days

push eventTheSavior/covid19-changes

Eli White

commit sha db53876d1b3c18a2526faf09e2060ffbe215905a

Add new CDC file

view details

push time in 16 days

pull request commentDefinitelyTyped/DefinitelyTyped

fix(react-native): mark Animated config option `useNativeDriver` as optional

This config isn't optional anymore. It is a required config to force people to know when they are or aren't using the native driver. Eventually this will let us flip the default.

vpicone

comment created time in 17 days

push eventTheSavior/covid19-changes

Eli White

commit sha 8476f5b0d059fa60386f4e020acc20e0233f22e4

Add new CDC file

view details

push time in 17 days

push eventTheSavior/covid19-changes

Eli White

commit sha b2df80eae0894bbf1b2907d6f283e4c086bca565

Add new CDC file

view details

push time in 18 days

push eventTheSavior/covid19-changes

Eli White

commit sha 33c885f2134ccbde1e5e34424f36c578987a9c01

Add new CDC file

view details

push time in 18 days

Pull request review commentfacebook/react-native-website

Blog post for team principles

+---+title: React Native Team Principles+author: Eli White+authorTitle: Engineering Manager on React Native+authorURL: https://twitter.com/Eli_White+authorImageURL: https://avatars2.githubusercontent.com/u/249164?s=460&v=4+authorTwitter: Eli_White+category: announcements+---++Our team at Facebook has principles that guide how we prioritize our work on React Native. These principles specifically represent our team and not necessarily every stakeholder in the React Native community. We are sharing these principles to be more transparent about what drives us, how we make decisions, and how we focus our efforts.++## **Native Experience**++Our top priority for React Native is to **match people’s expectations on each platform**. This is why React Native renders to platform primitives. We value native look-and-feel over cross-platform consistency.++For example, the TextInput in React Native renders to a UITextField on iOS. This ensures that integration with password managers and keyboard controls work out of the box. By using platform primitives, React Native apps are also able to stay up-to-date with design and behavior changes from new releases of Android and iOS.++In order to match the look-and-feel of native apps, we must also match their performance. This is where we focus our most ambitious efforts. For example, Facebook created Hermes, [a new JavaScript Engine built from scratch for React Native on Android](https://facebook.github.io/react-native/blog/2019/07/17/hermes). Hermes significantly improves the start time of React Native apps. We are also working on major architectural changes that optimize the threading model and make React Native easier to interoperate with native code.++## Massive Scale++Hundreds of screens in the Facebook app are implemented with React Native. The Facebook app is used by billions of people on a huge range of devices. **This is why** **we invest our efforts into the most challenging problems at scale.**++Deploying React Native in our apps lets us identify problems that we wouldn’t see at a smaller scale. For example, Facebook focuses on improving performance across a broad spectrum of devices from the newest iPhone to many older generations of Android devices. This focus informs our architecture projects such as Hermes, Fabric, and TurboModules.++We have proven that React Native can scale to massive organizations too. When hundreds of developers are working on the same app, gradual adoption is a must. This is why we made sure that React Native can be adopted one screen at a time. Soon, we will be taking this one step further and enable migrating individual native views of an existing native screen to React Native.++A focus on massive scale means there are many things our team isn’t currently working on. For example, our team doesn’t drive the adoption of React Native in the industry. We also do not actively build solutions for problems that we don’t see at scale. We are proud that we have [many partners and core contributors](https://github.com/facebook/react-native/blob/master/ECOSYSTEM.md) that are able to focus on those important areas for the community.++## Developer Velocity++Great user experiences are born out of iteration. **It shouldn’t take more than a few seconds from editing code to seeing the result** in a running app. React Native's architecture enables it to provide near-instant feedback during development.++We often hear from teams that adopting React Native significantly improved their development velocity. These teams find that the instant feedback during development makes it much easier to try different ideas and add extra polish when they don’t have to interrupt their coding session for every little change. When we make changes to React Native, we make sure to preserve this quality of the developer experience.++Instant feedback is not the only way that React Native improves developer velocity. Teams can easily leverage the fast-growing ecosystem of high quality open source packages. Teams can also share business logic between Android, iOS, and the web. This helps them ship updates faster and reduce organizational silos between platform teams.++## Every Platform++When we introduced React Native to the world in 2014, we presented a slide with our motto. The slide read, “Learn once, write anywhere” — and we mean _anywhere_. **Developers should be able to reach as many people as possible without being limited by device model or operating system.**++React Native targets very different platforms including mobile, desktop, web, TV, VR, game consoles, and more. We want to enable rich experiences on each platform instead of requiring developers to build for the lowest common denominator. To accomplish this, we focus on supporting the unique features of each platform. This ranges from varying input mechanisms (e.g. touch, pen, mouse) to fundamentally different consumption experiences like 3D environments in VR.++This principle informed our decision to implement React Native’s new core architecture in cross-platform C++ to promote parity across platforms. We are also refining the public interface targeted at other platform maintainers like Microsoft with Windows and macOS. We strive to enable any platforms to support React Native.++## Declarative UI++We don’t believe in deploying the exact same user interface on every platform, we believe in **exposing each platform’s unique capabilities with the same declarative programming model**. Our declarative programming model is React.++In our experience, the unidirectional data flow popularized by React makes applications easier to understand. We prefer to express a screen as a composition of declarative components rather than imperatively managed views. React’s success on the web and the direction of the new native Android and iOS frameworks show that the industry has also embraced declarative UI.++React popularized declarative user interfaces with innovations like Hooks, Suspense, and Concurrent Mode. However, there remain many unsolved problems that React is unique positioned to solve. React Native will continue to build on top of the innovations of React and remain at the forefront of the declarative user interface movement.

Probably. I've kinda struggled with writing a conclusion for this though.

TheSavior

comment created time in 18 days

push eventTheSavior/covid19-changes

Eli White

commit sha 8bc132dec27aab04b6e2861aef51ebca9ffe0ecd

Add new CDC file

view details

push time in 18 days

push eventTheSavior/react-native-website

Eli White

commit sha 87ec949ba1b46929e8f08f36443debd0e3f357ee

Apply suggestions from code review Incorporating Rick's changes Co-authored-by: Ricky <rickhanlonii@gmail.com>

view details

push time in 18 days

pull request commentfacebook/react-native-website

Blog post for team principles

I'm thinking we can ship this on Monday

TheSavior

comment created time in 18 days

delete branch facebook/react-native-website

delete branch : principles

delete time in 18 days

push eventTheSavior/react-native-website

Eli White

commit sha be326b03199a7534ea0b08d1714184ea8ddb1ddf

reword

view details

push time in 18 days

PR opened facebook/react-native-website

Blog post for team principles

We want to share the principles that drive our team.

screencapture-localhost-3000-blog-2020-07-17-react-native-principles-2020-07-17-10_49_24

+53 -0

0 comment

1 changed file

pr created time in 18 days

create barnchfacebook/react-native-website

branch : principles

created branch time in 18 days

push eventTheSavior/react-native-website

Eedrah

commit sha 14fd038eb92981d259881e0cbc6f1fd50e73dd63

change link from deprecated component (#1057)

view details

shau-kote

commit sha f65beaef19c95df189c932aba213aae7c4dfa52b

Mention Animated's FlatList and SectionList (#1049)

view details

Christoph Nakazawa

commit sha 09a31ac71bf91bb7f23d13223f683e3a2f5fbdab

Merge branch 'master' into rename-to-ram-bundle

view details

Seth

commit sha 4e95434ab827576f4907972ec076dd533ad6f8f0

Update Optional Chaining stage (#1050)

view details

Christoph Nakazawa

commit sha 68fde064df29060271879f30128e915a4006085b

Rename 'unbundle' to 'Random Access Modules bundle' (#1046)

view details

Christoph Nakazawa

commit sha 63807e7bedf7894cdf62fd51327bf65657ef249b

Update out-of-tree-platforms.md (#1031) Update out-of-tree-platforms.md

view details

Christoph Nakazawa

commit sha c8b01d27d52b177ad39a77f48ed88d512c2c4a9c

Added value prop to the TextInput (#1052) Added value prop to the TextInput

view details

Christoph Nakazawa

commit sha 191a99f1ddbebc2ba47d411b293696f600a3bca6

Change docs to use "contain" instead Image.resizeMode.contain (#1053) Change docs to use "contain" instead Image.resizeMode.contain

view details

Héctor Ramos

commit sha 1bf8cde8f15db9e4e1bfd015cf5dcdfab480f4e5

Update Docusaurus to resolve dependencies with security vulnerabilities

view details

Nat Alison

commit sha b2ede31830ba0d44362be3a122fd36930d14fd16

restyle action buttons

view details

Nat Alison

commit sha 2161ea0297fdb72ff50bd9300056d4391ffa41ca

add scripts for github and twitter in the siteConfig

view details

Nat Alison

commit sha c4bb8835a1fd541a8f2107e0ba6412289f706ade

update buttons to a color i like more

view details

Lucas Bento

commit sha 374d9785ec719ba9d7a43b33c2051bb87b560a07

Use correct react-native CLI repository URL

view details

Lucas Bento

commit sha 924b3b4541e5cec2fa0c2dfb48c7852913a58e96

Change `upgrade` section

view details

Christoph Nakazawa

commit sha a3bd7d21ca912f9e6084997e5116910a42259c57

Add `upgrade-helper` as an upgrading option (#1063) Add `upgrade-helper` as an upgrading option

view details

Ryan Turner

commit sha cbb5083a78423a00b5a98dc314cd6218116bb035

0.60 blogpost (#1060)

view details

Ryan Turner

commit sha 0f00276c6b8884e6bafb22de0705e7e5d407b666

chore: make 0.60 the default version for the website

view details

Christoph Nakazawa

commit sha 52bc81fa4bf0429626d50dc53868cfca1daa4f5e

Make 0.60 the default version (#1074) Make 0.60 the default version

view details

Ryan Turner

commit sha 9a07efd284034f2a218801cbea76ab32cef90a75

Shrink screenshot to 30% size

view details

Christoph Nakazawa

commit sha 6b15c497d8fc781ab10c84eef7aa80ac9fd280b6

Shrink screenshot to 30% size (#1075) Shrink screenshot to 30% size

view details

push time in 18 days

push eventTheSavior/react-native-website

Eli White

commit sha 3a930cbee2ef85db4fe23ff31e848253b4092a3c

Blog post for team principles

view details

push time in 18 days

create barnchTheSavior/react-native-website

branch : principles

created branch time in 18 days

push eventTheSavior/covid19-changes

Eli White

commit sha dd537ab2b3607e6a23487fa6687923b944e89e39

Add new CDC file

view details

push time in 19 days

issue commentmicrosoft/react-native-windows

Support react-native-svg for RNW vNext

The interest from Messenger is to be able to render static svg icon assets (at any size)

namrog84

comment created time in 19 days

push eventTheSavior/covid19-changes

Eli White

commit sha 87e8ced783a6a2bd7b6cad5b2fdb5c1fce2de1d4

Add new CDC file

view details

push time in 20 days

push eventTheSavior/covid19-changes

Eli White

commit sha 3379c6836f7d84df37bdea6356aec52cdb37e2ca

Add new CDC file

view details

push time in 21 days

issue commentmicrosoft/react-native-windows

Add focusable to Pressable

It might not be necessary, but I could expect Pressable to pass in the state object hovered and focused, where right now it just passes pressed. https://github.com/facebook/react-native/blob/0.63-stable/Libraries/Components/Pressable/Pressable.js#L222-L223

hovered is probably more valuable than focused, but the API was designed to enable platforms to add more things like that.

chrisglein

comment created time in 21 days

push eventTheSavior/covid19-changes

Eli White

commit sha ae657b0c00b6b6bd84ed07bca1976a04bde9e79a

Add new CDC file

view details

push time in 22 days

issue commenttesting-library/native-testing-library

Cannot convert undefined or null to object at assign (<anonymous>)

I'd recommend looking at how those components with native methods, like ScrollView, is mocked in core: https://github.com/facebook/react-native/blob/master/jest/setup.js#L133-L152

alexwasner

comment created time in 22 days

issue commenttesting-library/native-testing-library

Cannot convert undefined or null to object at assign (<anonymous>)

Based on @mym0404's comment, that mock for ReactNative is trying to override NativeMethodsMixin and ReactNative.NativeComponent. Those don't exist anymore, I think you can delete that entire mock and just have the snippet above be:

jest
  .mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
alexwasner

comment created time in 22 days

push eventTheSavior/covid19-changes

Eli White

commit sha 375644163a8b04a2c843cf2db7f54fd2ef7e03d4

Add new CDC file

view details

push time in 22 days

push eventTheSavior/covid19-changes

Eli White

commit sha 02db2a5395363403b2f7956af5670b8003797f71

Add new CDC file

view details

push time in 23 days

issue closedfacebook/react-native

New PlatformColor issue when used with a CSS-in-JS package

Description

After upgrading to RN 63 and trying to make use of the new PlatformColor feature within my StyledComponents I encountered the following issues when the colour was getting parsed.

React Native version:

System: OS: macOS 10.15.5 CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz Memory: 378.68 MB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 13.9.0 - /usr/local/bin/node Yarn: 1.6.0 - /usr/local/bin/yarn npm: 6.13.7 - /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: 1.9.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 Android SDK: Not Found IDEs: Android Studio: 3.4 AI-183.6156.11.34.5692245 Xcode: 11.5/11E608c - /usr/bin/xcodebuild Languages: Java: 10.0.1 - /usr/bin/javac Python: 2.7.15 - /usr/local/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.0 => 0.63.0 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Create RN project
  2. Add styled-components
  3. Try to use PlatformControl values within CSS-In-JSS

Expected Results

The colour value should be parsed correctly and displayed as expected.

Actual Result

IMG_8CC32CF2D271-1

closed time in 24 days

tomacotuna

issue commentfacebook/react-native

New PlatformColor issue when used with a CSS-in-JS package

This seems like it is specific to styled-components. I'll close this in favor of an issue on their repo. Feel free to link to this issue from there.

If this isn't specific to styled-components, feel free to comment with more information and this can be re-opened

tomacotuna

comment created time in 24 days

push eventTheSavior/covid19-changes

Eli White

commit sha b45ab6d25f78389c3aa05971ce166af4a1b803dc

Add new CDC file

view details

push time in 24 days

issue commentfacebook/react-native

TouchableOpacity setOpacityTo is not a function

It looks like we didn’t realize that was a public API. I think we should accept a PR that removes the prefix. Especially because this API is in the documentation https://reactnative.dev/docs/touchableopacity#docsNav

d4rky-pl

comment created time in 24 days

push eventTheSavior/covid19-changes

Eli White

commit sha 04f825e38fc514d72b065f2fc8a957bd1182d516

Add new CDC file

view details

push time in 25 days

Pull request review commentmicrosoft/react-native-windows

Move index file to flow, to allow better internal typechecking with core react-native

+/**+ * 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 typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';+import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';+import typeof Button from './Libraries/Components/Button';+import typeof CheckBox from './Libraries/Components/CheckBox/CheckBox';+import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';+import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid';+import typeof FlatList from './Libraries/Lists/FlatList';+import typeof Image from './Libraries/Image/Image';+import typeof ImageBackground from './Libraries/Image/ImageBackground';+import typeof InputAccessoryView from './Libraries/Components/TextInput/InputAccessoryView';+import typeof KeyboardAvoidingView from './Libraries/Components/Keyboard/KeyboardAvoidingView';+import typeof MaskedViewIOS from './Libraries/Components/MaskedView/MaskedViewIOS';+import typeof Modal from './Libraries/Modal/Modal';+import typeof Picker from './Libraries/Components/Picker/Picker';+import typeof PickerIOS from './Libraries/Components/Picker/PickerIOS';+import typeof Pressable from './Libraries/Components/Pressable/Pressable';+import typeof ProgressBarAndroid from './Libraries/Components/ProgressBarAndroid/ProgressBarAndroid';+import typeof ProgressViewIOS from './Libraries/Components/ProgressViewIOS/ProgressViewIOS';+import typeof SafeAreaView from './Libraries/Components/SafeAreaView/SafeAreaView';+import typeof ScrollView from './Libraries/Components/ScrollView/ScrollView';+import typeof SectionList from './Libraries/Lists/SectionList';+import typeof SegmentedControlIOS from './Libraries/Components/SegmentedControlIOS/SegmentedControlIOS';+import typeof Slider from './Libraries/Components/Slider/Slider';+import typeof Switch from './Libraries/Components/Switch/Switch';+import typeof RefreshControl from './Libraries/Components/RefreshControl/RefreshControl';

I think the theory was Components alphabetical, then APIs alphabetical. shrug. I believe it is the same order as the exports

acoates-ms

comment created time in 25 days

pull request commentDefinitelyTyped/DefinitelyTyped

Add Typing support for React Native 0.63

Ah yeah, good call Tom! Definitely need ProcessedColorValue to be number | the opaque type to keep people from trying to introspect the results of processColor calls as it won't always return a number anymore.

alexbrazier

comment created time in 25 days

pull request commentDefinitelyTyped/DefinitelyTyped

Add Typing support for React Native 0.63

I think ColorValue would be a union of the unique symbol as well as string, just as it is in Flow:

declare const OpaqueColorValue: unique symbol;
type ColorValue = string | typeof OpaqueColorValue;

function PlatformColor(): OpaqueColorValue {
    return {} as ColorValue;
}

As you can use strings or the helpers to construct colors.

alexbrazier

comment created time in 25 days

push eventTheSavior/covid19-changes

Eli White

commit sha a0b67936a35c349f3f23a76120555f4533c3ca20

Add new CDC file

view details

push time in 25 days

issue commentreact-native-community/discussions-and-proposals

What packages belong in react-native-community?

Why are developers waiting on this? Why are they unable to use react-native-config today?

TheSavior

comment created time in a month

push eventTheSavior/covid19-changes

Eli White

commit sha 21165839afbfbe0e1b7246924e7ce41dedeb3676

Add new CDC file

view details

push time in a month

pull request commentDefinitelyTyped/DefinitelyTyped

Add Typing support for React Native 0.63

That PR includes good changes, but doesn't address the opaque type issue.

The purpose of an opaque type in Flow is to ensure that the typechecker keeps people from writing styles like this:

<View style={{
  backgroundColor: {
      resource_paths: ['?attr/colorControlNormal']
  }
}} />

With the types as they are in Flow, you can't construct those objects manually, you can only create those objects by calling the helper functions PlatformColor() or DynamicColorIOS(). It also ensures that you don't call the helper function and then modify the resulting object. You can't do PlatformColor('?attr/colorControlNormal').resource_paths.push('foo') or any form of inspection or modification like that.

I'm not sure how to enforce this in TypeScript but I know @tom-un had thought about this previously.

For more info on opaque types, you can check out this blog post: https://codemix.com/opaque-types-in-javascript

alexbrazier

comment created time in a month

issue commentreact-native-community/releases

V0.63.1 Discussion

Only commits that have landed to master can be considered for picks to a release branch. Open PRs can't be considered

alloy

comment created time in a month

issue closedfacebook/react-native

Pressable delay too long for `pressed` to be true

Description

The <Pressable> component (and all other Touchable components) have received added delay until the onPressIn function fires in react-native 0.63. This means any TouchableOpacitys will feel sluggish and won't immediately respond to touches. See:

1 mov

When immediately clicking, the pressed property won't be set to true at all, so no opacity changes/feedback to the user!

2 mov

After holding (Long press) the pressed property is true and the opacity switches.

Note: When I manually set delayPressIn={0} the feedback appears instant again, but I'm not going to do that for hundreds of Touchables inside my project. Also, this only works on Touchable components, Pressable doesn't even have this feature!

Am I missing something? Is this intended behaviour?

React Native version:

info Fetching system and libraries information...
(node:14869) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 5.47 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.0, 30.0.0
      System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: 21.2.6472646
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.0 => 0.63.0 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

  1. Use <TouchableOpacity> component (or <Pressable> and use style function to toggle between opacity depending on pressed property)
  2. Press it

Expected Results

The Touchable/Pressable should show feedback right away

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

1 mov

When immediately clicking, the pressed property won't be set to true at all, so no opacity changes/feedback to the user!

2 mov

After holding (Long press) the pressed property is true and the opacity switches.

closed time in a month

mrousavy

issue commentfacebook/react-native

Pressable delay too long for `pressed` to be true

Also, looks like this is a duplicate of https://github.com/facebook/react-native/issues/29313

mrousavy

comment created time in a month

issue commentfacebook/react-native

[0.63] TouchableOpacity has a slightly delay between press and opacity change

This was fixed in https://github.com/facebook/react-native/commit/4aaf62998247bcfd8ebf369d73290096fde08012#diff-ff4d5358a97501a402a3f234318497e4 and the pick has been requested for 0.63

stackia

comment created time in a month

issue commentreact-native-community/releases

V0.63.1 Discussion

Can we pick this Pressable fix? https://github.com/facebook/react-native/commit/4aaf62998247bcfd8ebf369d73290096fde08012#diff-ff4d5358a97501a402a3f234318497e4 Fixes https://github.com/facebook/react-native/issues/29321

alloy

comment created time in a month

issue commentfacebook/react-native

Pressable delay too long for `pressed` to be true

Looks like this commit got missed: https://github.com/facebook/react-native/commit/4aaf62998247bcfd8ebf369d73290096fde08012#diff-ff4d5358a97501a402a3f234318497e4

mrousavy

comment created time in a month

pull request commentDefinitelyTyped/DefinitelyTyped

Add Typing support for React Native 0.63

I'm deferring to Microsoft on the new Color types, as these types aren't correct. The new color methods don't return strings, they return an opaque type that should never ever be introspected or modified. We've been able to enforce that in Flow, I'm not sure how that can be enforced in TypeScript

alexbrazier

comment created time in a month

issue commentreact-native-community/releases

V0.63.1 Discussion

Can we pick this LogBox fix? https://github.com/facebook/react-native/commit/f28c7505fa5b4a7ddf1e9311d38dfcd15e8953a2

alloy

comment created time in a month

issue commenttrakt/api-help

How to force user to log in again? OAuth is completing transparently

That's possible, I'm sure you are significantly more informed than I am. I haven't done that much with OAuth or OpenID before. A cursory Google only seems to mention it connected to OpenID, so seems like yes.

TheSavior

comment created time in a month

push eventTheSavior/covid19-changes

Eli White

commit sha 68be68897e336b2f77fe76ea2949084104f87859

Add new CDC file

view details

push time in a month

Pull request review commentDefinitelyTyped/DefinitelyTyped

Add Typing support for React Native 0.63

 export class TouchableNativeFeedbackTest extends React.Component {     } } +// PressableTest+export class PressableTest extends React.Component {+    onPressButton = (e: GestureResponderEvent) => {+        e.persist();+        e.isPropagationStopped();+        e.isDefaultPrevented();+    };++    render() {+        return (+            <Pressable onPress={this.onPressButton}>

As a test for Pressable, can you include the style/children as a function that takes press state approach since that is unique?

alexbrazier

comment created time in a month

Pull request review commentDefinitelyTyped/DefinitelyTyped

Add Typing support for React Native 0.63

 Platform.select({ android: 1, ios: 2, default: 0 }); // $ExpectType number Platform.select({ android: 1, ios: 2, macos: 3, web: 4, windows: 5 }); // $ExpectType number Platform.select({ android: 1, ios: 2, macos: 3, web: 4, windows: 5, default: 0 }); // $ExpectType number +PlatformColor('?attr/colorControlNormal');++DynamicColorIOS({+    dark: 'lightskyblue',+    light: 'midnightblue',+});

Can you add another one with a PlatformColor?

DynamicColorIOS({
    dark: 'lightskyblue',
    light: PlatformColor('labelColor'),
});
alexbrazier

comment created time in a month

Pull request review commentDefinitelyTyped/DefinitelyTyped

Add Typing support for React Native 0.63

 interface PlatformWebStatic extends PlatformStatic {     OS: 'web'; } +/**+ * Select native platform color+ * The color must match the string that exists on the native platform+ *+ * @see https://reactnative.dev/docs/platformcolor#example+ */+export function PlatformColor(color: string): string;++type DynamicColorIOSTuple = {+    light: string;+    dark: string;+};++/**+ * Specify color to display depending on the current system appearance settings+ *+ * @param tuple Colors you want to use for "light mode" and "dark mode"+ * @platform ios+ */+export function DynamicColorIOS(tuple: DynamicColorIOSTuple): string;

@tom-un, can you please review the TypeScript types for the new colors methods? I know you were investigating ways to kinda align as best as possible with what we did in Flow relative to opaque types (which don't exist in TS, right?)

alexbrazier

comment created time in a month

Pull request review commentDefinitelyTyped/DefinitelyTyped

Add Typing support for React Native 0.63

 Platform.select({ android: 1, ios: 2, default: 0 }); // $ExpectType number Platform.select({ android: 1, ios: 2, macos: 3, web: 4, windows: 5 }); // $ExpectType number Platform.select({ android: 1, ios: 2, macos: 3, web: 4, windows: 5, default: 0 }); // $ExpectType number +PlatformColor('?attr/colorControlNormal');

Please include a call with multiple fallback colors

alexbrazier

comment created time in a month

Pull request review commentDefinitelyTyped/DefinitelyTyped

Add Typing support for React Native 0.63

 interface PlatformWebStatic extends PlatformStatic {     OS: 'web'; } +/**+ * Select native platform color+ * The color must match the string that exists on the native platform+ *+ * @see https://reactnative.dev/docs/platformcolor#example+ */+export function PlatformColor(color: string): string;++type DynamicColorIOSTuple = {+    light: string;

This should be ColorValue (at least, that's what it is in Flow, not sure what it is in these TypeScript definitions), as you can use any color, including a PlatformColor:

https://github.com/facebook/react-native/blob/ffa3d7f638c820dc208320193e6ba65667d751eb/Libraries/StyleSheet/PlatformColorValueTypes.ios.js#L28-L31

alexbrazier

comment created time in a month

Pull request review commentDefinitelyTyped/DefinitelyTyped

Add Typing support for React Native 0.63

 interface PlatformWebStatic extends PlatformStatic {     OS: 'web'; } +/**+ * Select native platform color+ * The color must match the string that exists on the native platform+ *+ * @see https://reactnative.dev/docs/platformcolor#example+ */+export function PlatformColor(color: string): string;

PlatformColor takes multiple arguments as fallbacks: https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/PlatformColorValueTypes.ios.js#L24-L26

alexbrazier

comment created time in a month

pull request commentfacebook/react-native-website

Blog post for the 0.63 release

Please document in the release process docs anything you learn! :D

grabbou

comment created time in a month

push eventTheSavior/covid19-changes

Eli White

commit sha 064f81af310218ce2d7726ee0eb3ebb84b039e3a

Add new CDC file

view details

push time in a month

more