Summary:
Need to add explicit type annotations in these areas to unblock types-first architecture for Flow. These are locations the codemod could not automatically handle.
I'll call out areas I need a close eye on in the comments.
Reviewed By: panagosg7
Differential Revision: D16659053
fbshipit-source-id: 167dd2abe093019b128676426374c1c62cf71e7f
Summary:
In order to cleanup the callsites that are not using Animated's native driver, we are going to make useNativeDriver a required option so people have to think about whether they want the native driver or not.
I made this change by changing [Animated.js](https://fburl.com/ritcebri) to have this animation config type:
```
export type AnimationConfig = {
isInteraction?: boolean,
useNativeDriver: true,
onComplete?: ?EndCallback,
iterations?: number,
};
```
This causes Flow to error anywhere where useNativeDriver isn't set or where it is set to false.
I then used these Flow errors to codemod the callsites.
I got the location of the Flow errors by running:
```
flow status --strip-root --json --message-width=0 | jq '.errors | [.[].extra | .[].message | .[].loc | objects | {source: .source, start: .start, end: .end}]'
```
And then ran this codemod:
```
const json = JSON.parse('JSON RESULT FROM FLOW');
const fileLookup = new Map();
json.forEach(item => {
if (!fileLookup.has(item.source)) {
fileLookup.set(item.source, []);
}
fileLookup.get(item.source).push(item);
});
export default function transformer(file, api) {
const j = api.jscodeshift;
const filePath = file.path;
if (!fileLookup.has(filePath)) {
return;
}
const locationInfo = fileLookup.get(filePath);
return j(file.source)
.find(j.ObjectExpression)
.forEach(path => {
if (
path.node.properties.some(
property =>
property != null &&
property.key != null &&
property.key.name === 'useNativeDriver',
)
) {
return;
}
const hasErrorOnLine = locationInfo.some(
singleLocationInfo =>
singleLocationInfo.start.line === path.node.loc.start.line &&
Math.abs(
singleLocationInfo.start.column - path.node.loc.start.column,
) <= 2,
);
if (!hasErrorOnLine) {
return;
}
path.node.properties.push(
j.property(
'init',
j.identifier('useNativeDriver'),
j.booleanLiteral(false),
),
);
})
.toSource();
}
export const parser = 'flow';
```
```
yarn jscodeshift --parser=flow --transform addUseNativeDriver.js RKJSModules react-native-github
```
Followed up with
```
hg status -n --change . | xargs js1 prettier
```
Reviewed By: mdvacca
Differential Revision: D16611291
fbshipit-source-id: 1157587416ec7603d1a59e1fad6a821f1f57b952
Summary:
Automatically provides and subscribes to dimension updates - super easy usage:
```
function MyComponent(props: Props) {
const {width, height, scale, fontScale} = useWindowDimensions();
return <Text ...
};
```
Only window for now - it's what people want 99% of the time, so we'll just shovel out a pit of success for them...
There are still cases where `Dimensions` is needed outside of React component render functions, like in GraphQL variables, so we need to keep the existing module.
Reviewed By: zackargyle
Differential Revision: D16525189
fbshipit-source-id: 0a049fb3be8d92888a8a69e3898d337b93422a09
Summary: This diff exposes the new methods SetJSResponder and clearJSResponder in the UI ManagerBinding interface
Reviewed By: shergin
Differential Revision: D16420689
fbshipit-source-id: 606bede1de6b9d5fd5a56e832ad27100b6998c55
Summary: This diff creates a new example in RN Tester for JSResponderHandler
Reviewed By: shergin
Differential Revision: D16420686
fbshipit-source-id: 2e450af0a5ed9ce459a2a13d3ecce0807483018b
Summary:
Original commit changeset: c45409a8413e
I was unable to find the cause of the problem.
Reviewed By: yungsters
Differential Revision: D16240754
fbshipit-source-id: c1e3f0aa615422f1156706f919e8f851f82c18b0
Summary:
We added a test to make sure button and accessibility actions would not have unwanted behavior. Additionally we added support for accessibility actions for all touchables. However we discovered that RCTTextView and possibly anything else that does not derive from RCTView does not support accessibility actions and need to be children off a component that does support it for it to not crash in ios. This became noticeable when TouchableWithoutFeedback only worked if text is a child of view on ios.
In a local branch we where able to modify RCTTextView to support accessibility actions and text no longer needed to be a child of view for it to work.
## Changelog
[General] [Added] - Button test with accessibility actions
[General] [Added] - Support for accessibility actions to all Touchables. With TouchableWithoutFeedback being a special case where text must be a child of view. (See AccessibilityExample.js for an example)
Pull Request resolved: https://github.com/facebook/react-native/pull/25582
Test Plan:
Test plan is testing in RNTester making sure the examples work
## Open Question
What would you say is the best practice for adding accessibility action support for all the components that do not extended from RCTView?
Reviewed By: cpojer
Differential Revision: D16192919
Pulled By: osdnk
fbshipit-source-id: 7d4e186ba1f30393f2b4d08a0e227b960f83586c
Summary:
The current technique we use to draw text uses linear memory, which means that when text is too long the UIView layer is unable to draw it. This causes the issue described [here](https://github.com/facebook/react-native/issues/19453). On an iOS simulator the bug happens at around 500 lines which is quite annoying. It can also happen on a real device but requires a lot more text.
To be more specific the amount of text doesn't actually matter, it is the size of the UIView that we use to draw the text. When we use `[drawRect:]` the view creates a bitmap to send to the gpu to render, if that bitmap is too big it cannot render.
To fix this we can use `CATiledLayer` which will split drawing into smaller parts, that gets executed when the content is about to be visible. This drawing is also async which means the text can seem to appear during scroll. See https://developer.apple.com/documentation/quartzcore/calayer?language=objc.
`CATiledLayer` also adds some overhead that we don't want when rendering small amount of text. To fix this we can use either a regular `CALayer` or a `CATiledLayer` depending on the size of the view containing the text. I picked 1024 as the threshold which is about 1 screen and a half, and is still smaller than the height needed for the bug to occur when using a regular `CALayer` on a iOS simulator.
Also found this which addresses the problem in a similar manner and took some inspiration from the code linked there https://github.com/GitHawkApp/StyledTextKit/issues/14#issuecomment-395234885
Fixes https://github.com/facebook/react-native/issues/19453
## Changelog
[iOS] [Fixed] - Use CALayers to draw text, fixes rendering for long text
Pull Request resolved: https://github.com/facebook/react-native/pull/24387
Test Plan:
- Added the example I was using to verify the fix to RNTester.
- Made sure all other examples are still rendering properly.
- Tested text selection
Reviewed By: shergin
Differential Revision: D15918277
Pulled By: sammy-SC
fbshipit-source-id: c45409a8413e6e3ad272be39ba527a4e8d349e28
Summary:
I found that on Android we only support 2 fontWeight options, either **normal** or **bold**, even developer can set any numeric value. But iOS supports all possible numeric values. This PR tries to add support for all possible numeric values on Android, even if it's supported only on Android P(28) and above.
This change might break texts where fontWeight use improperly, because this PR removes conversion of values above 500 to BOLD and below 500 to normal.
FYI, also moved **mCustomTypefaceCache** usage up because it was working after unnecessary mFontCache usage.
## Changelog
[Android] [Changed] - add custom font weight support to Text component on Android, only on P(API 28) and above versions.
Pull Request resolved: https://github.com/facebook/react-native/pull/25341
Test Plan: RNTester app's Text examples will show Rubik Regular, Rubik Light, Rubik Bold, Rubik Medium and Rubik Medium Italic texts in corresponding font family, style and weights.
Differential Revision: D15956350
Pulled By: mdvacca
fbshipit-source-id: 61079d953c65fb34ab4497d44c22317912a5a616
Summary:
Reland https://github.com/facebook/react-native/issues/15611 and added the gcc warning that was different from fb internal config. The original PR missed the static keyword for the `RCTNormalizeAnimatedEventName` function which triggered the gcc warning internally but not with the OSS xcode config.
When calling a prop of type `RCTDirectEventBlock` or `RCTBubblingEventBlock` it uses a completely different code path than events using `[RCTEventDispatcher sendEvent:]` and those were not dispatched to the `RCTEventDispatcherListener`s. We also do some event name normalization which caused issues between the JS and native event names. To fix that I simply remove the parts we normalize from the event key.
## Changelog:
[iOS] [Fixed] - Support events using RCT{Direct|Bubbling}EventBlock
Pull Request resolved: https://github.com/facebook/react-native/pull/25317
Test Plan: Added a Slider (it uses RCTBubblingEventBlock for its onValueChange event) that can control a native animated value in RNTester to reproduce the bug and made sure this diff fixes it.
Differential Revision: D15938856
Pulled By: cpojer
fbshipit-source-id: 7e7a3459e2a2e8b1254a2f1ec8153a159ea73eed
Summary:
When calling a prop of type `RCTDirectEventBlock` or `RCTBubblingEventBlock` it uses a completely different code path than events using `[RCTEventDispatcher sendEvent:]` and those were not dispatched to the `RCTEventDispatcherListener`s. We also do some event name normalization which caused issues between the JS and native event names. To fix that I simply remove the parts we normalize from the event key.
## Changelog:
[iOS] [Fixed] - Support events using RCT{Direct|Bubbling}EventBlock
Pull Request resolved: https://github.com/facebook/react-native/pull/15611
Test Plan: Added a Slider (it used RCTBubblingEventBlock for it's onValueChange event) that can control a native animated value in RNTester to reproduce the bug and made sure this diff fixes it.
Differential Revision: D15896806
Pulled By: cpojer
fbshipit-source-id: c0ae463f4c3f890062238575e813ed7ab3b7a7e6
Summary:
This module is being removed from React Native via Lean Core. This diff moves all the related JS files to FB internal.
Note: I removed two references to previously removed modules from some files in this diff. I hope you don't mind.
Reviewed By: TheSavior
Differential Revision: D15714919
fbshipit-source-id: 88ea406396b31f5c255e06d9c92b67127c81db4a
Summary:
Add example showing regression before this fix is applied.
https://github.com/facebook/react-native/pull/18187 Was found to introduce a regression in some internal facebook code-base end to end test which couldn't be shared. I was able to create a reproducible demo of a regression I found, and made a fix for it. Hopefully this will fix the internal test, such that the pr can stay merged.
## Changelog
[GENERAL] [Fixed] - Fix connection of animated nodes and scroll offset with useNativeDriver.
Pull Request resolved: https://github.com/facebook/react-native/pull/24177
Reviewed By: rickhanlonii
Differential Revision: D14845617
Pulled By: cpojer
fbshipit-source-id: 1f121dbe773b0cde2adf1ee5a8c3c0266034e50d
Summary: Adding flow types for DeviceInfo module and migrating our codebase over to using `DeviceInfo.getConstants()`
Reviewed By: fkgozali
Differential Revision: D14645744
fbshipit-source-id: e30a060c6dc92938cd1420ba11a1d837c79d1e32
Summary:
Changes RNTester, first attempt in the direction of improving the RNTester overall. Related ticket: #24647
Changed the `js` directory of the RNTester to have the following structure:
```
- js
- assets
- components
- examples
- types
- utils
```
* **assets**
_Any images, gifs, and media content_
* **components**
_All shared components_
* **examples**
_Example View/Components to be rendered by the App_
* **types**
_Shared flow types_
* **utils**
_Shared utilities_
## Changelog
[General] [Changed] - Update folder structure of RNTester's JS directory.
Pull Request resolved: https://github.com/facebook/react-native/pull/25013
Differential Revision: D15515773
Pulled By: cpojer
fbshipit-source-id: 0e4b6386127f338dca0ffe8c237073be53a9e221
Logan Daniels
Eli White
Spencer Ahrens
David Vacca
Min ho Kim
Samuel Susla
Kevin Gonzales
Janic Duplessis
Dulmandakh
Anton Domashnev
Christoph Nakazawa
Mikael Sand
Tom Sanderson
Sam Goldman
Emily Janzer
AndreiCalazans