Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] JS migration api #3296

Merged
merged 1 commit into from
Sep 5, 2022
Merged

[Fix] JS migration api #3296

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/new-architecture-library-intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,7 +414,7 @@ const styles = StyleSheet.create({

In this example when the View is pressed there is a `setNativeProps` call to update the style and accessibility props of the component. To migrate this component it’s important to understand its current behavior using `setNativeProps`.

### Pre-Fabric, Component Props Persist
#### Pre-Fabric, Component Props Persist

On first render, the component props are those declared in the render function. After the View is pressed `_onSubmit` calls `setNativeProps` with updated prop values.
The resulting component can be represented as such:
Expand All @@ -437,7 +437,7 @@ Note that all prop values set in the render function are unchanged even though `

The fact that React Native stores some internal state of each component that isn’t explicitly declared in last render is what Fabric intends to fix.

### Moving `setNativeProps` to state
#### Moving `setNativeProps` to state

Taking those caveats into account, a proper migration would look like this:

Expand Down Expand Up @@ -588,7 +588,7 @@ Note:
- The command definition is co-located with the native component. This is an encouraged pattern
- Ensure you have included your command name in `supportedCommands` array

### Using Your Command
#### Using Your Command

```tsx
import {Commands, ... } from './MyCustomMapNativeComponent';
Expand All @@ -614,7 +614,7 @@ class MyComponent extends React.Component<Props> {
}
```

### Updating Native implementation
#### Updating Native implementation

In the example the code-generated `Commands` will dispatch `moveToRegion` call to the native component’s view manager. In addition to writing the JS interface, you’ll need to update your native implementation signatures to match the dispatched method call. See the mapping for [Android argument types](https://facebook.github.io/react-native/docs/native-modules-android#argument-types) and[iOS argument types](https://facebook.github.io/react-native/docs/native-modules-ios#argument-types) for reference.

Expand Down