status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added a small note about an issue I ran into vending a simple `UIView? 

Summary:?` instance to React Native. The layout system suppressed the values for `frame` and `backgroundColor` on my simple view and it wasn't clear why. After some debugging and hacking it became apparent that React Native needed to adjust those properties during layout. The workaround I found was to wrap my custom `UIView` in another `UIView` instance.

**Motivation**

When attempting to bridge a simple 100x100 red background `UIView` to ReactNative I could not get the view to show up as a `RCTView`. The view was there, but it was not 100x100 and it didn't have a red background. After a couple hours of poking around and debugging the call stacks on `setBackgroundColor` and `setFrame` it became apparent that React Native calls those messages on your `UIView` and sends new values. This is likely because of the layout system React Native uses.

I was encouraged to provide a small comment in the documentation if I thought others might find it useful. This PR is an attempt to provide a note in the documentation
Closes https://github.com/facebook/react-native/pull/6786

Differential Revision: D3133093

fb-gh-sync-id: 77d895f2f8e09978d283ee9e3193ee68cc5a7cb8
fbshipit-source-id: 77d895f2f8e09978d283ee9e3193ee68cc5a7cb8
This commit is contained in:
Aaron Connolly 2016-04-04 04:35:12 -07:00 committed by Facebook Github Bot 2
parent d95757037a
commit 67b138e77c
1 changed files with 2 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/NativeComponentsIOS.md
View File

@ -21,7 +21,7 @@ Vending a view is simple:
- Create the basic subclass.
- Add the `RCT_EXPORT_MODULE()` marker macro.
- Implement the `-(UIView *)view` method
- Implement the `-(UIView *)view` method.
```objective-c
// RCTMapManager.m
@ -43,6 +43,7 @@ RCT_EXPORT_MODULE()
@end
```
**Note:** Do not attempt to set the `frame` or `backgroundColor` properties on the `UIView` instance that you vend through the `-view` method. React Native will overwrite the values set by your custom class in order to match your JavaScript component's layout props. If you need this granularity of control it might be better to wrap the `UIView` instance you want to style in another `UIView` and return the wrapper `UIView` instead. See [Issue 2948](https://github.com/facebook/react-native/issues/2948) for more context.
Then you just need a little bit of JavaScript to make this a usable React component: