Commit Graph

44 Commits

Author SHA1 Message Date
Eli White eea4842972 Flow strictify possible files in RN core
Summary:
This was done by running the command on: https://our.intern.facebook.com/intern/wiki/Flow_Strict/

```
ag -L --ignore __snapshots__ 'flow strict$|noflow|generated|partially-generated' | ag '\.js$' | xargs ag -l 'flow' | sort > ~/temp
cat ~/temp | xargs ag -L 'flow strict' | xargs sed -i 's/flow$/flow strict/'
cat ~/temp | xargs ag -L 'flow strict$' | xargs sed -i 's/flow strict-local$/flow strict/'
until flow; do flow --json | jq -r '.errors[].message[0].path' | sort | uniq | xargs hg revert; done
```

Reviewed By: sahrens

Differential Revision: D8530207

fbshipit-source-id: c28c7ac5ed3e9b80f3d126d5f30463be8a8a744d
2018-06-20 00:47:21 -07:00
Eli White d01ab66b47 Prettier React Native Libraries
Reviewed By: sahrens

Differential Revision: D7961488

fbshipit-source-id: 05f9b8b0b91ae77f9040a5321ccc18f7c3c1ce9a
2018-05-10 19:10:38 -07:00
Eli White 8f5ebe5952 Convert react-native-github/Libraries to let/const
Reviewed By: sahrens

Differential Revision: D7956042

fbshipit-source-id: 221851aa311f3cdd6326497352b366048db0a1bb
2018-05-10 16:16:35 -07:00
Rubén Norte d5e9e55fa3 Remove @providesModule from all modules
Summary:
This PR removes the need for having the `providesModule` tags in all the modules in the repository.

It configures Flow, Jest and Metro to get the module names from the filenames (`Libraries/Animated/src/nodes/AnimatedInterpolation.js` => `AnimatedInterpolation`)

* Checked the Flow configuration by running flow on the project root (no errors):

```
yarn flow
```

* Checked the Jest configuration by running the tests with a clean cache:

```
yarn jest --clearCache && yarn test
```

* Checked the Metro configuration by starting the server with a clean cache and requesting some bundles:

```
yarn run start --reset-cache
curl 'localhost:8081/IntegrationTests/AccessibilityManagerTest.bundle?platform=android'
curl 'localhost:8081/Libraries/Alert/Alert.bundle?platform=ios'
```

[INTERNAL] [FEATURE] [All] - Removed providesModule from all modules and configured tools.
Closes https://github.com/facebook/react-native/pull/18995

Reviewed By: mjesun

Differential Revision: D7729509

Pulled By: rubennorte

fbshipit-source-id: 892f760a05ce1fddb088ff0cd2e97e521fb8e825
2018-04-25 07:37:10 -07:00
Tim Yung d69e55060f RN: Support `flexWrap: 'wrap-reverse'`
Reviewed By: fkgozali

Differential Revision: D7684403

fbshipit-source-id: 6c247ba86b8ad1bb4dcc8f44f5609c939afe0f06
2018-04-19 15:50:57 -07:00
Sophie Alpert 1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
Agastya Darma b1cdb7d553 Implementing space-evenly
Summary:
So in v0.52.0 space-evenly is introduced but not yet implemented (1050e0b by woehrl01). This pull request implements the space-evenly.

Manual Testing.
![notes marker](https://i.imgur.com/IXmezVY.png)

[IOS] [FEATURE] [Yoga] Adding space-evenly on justify-content in iOS
[ANDROID] [FEATURE] [Yoga] - Adding space-evenly on justify-content in Android
Closes https://github.com/facebook/react-native/pull/17805

Differential Revision: D6858294

Pulled By: shergin

fbshipit-source-id: 7a705ca05f58603ef4588e1bfd16c16a78f8a390
2018-01-31 10:17:22 -08:00
Ramanpreet Nara 64284bf66e iOS: Implement margin(Start|End) styles for RN
Reviewed By: mmmulani

Differential Revision: D5884168

fbshipit-source-id: 4d37583ba79324e6cf8caaa20cecf865f28337f7
2017-10-18 19:33:31 -07:00
Ramanpreet Nara 0a70c026cb iOS: Implement padding(Start|End) styles for RN
Reviewed By: mmmulani

Differential Revision: D5876934

fbshipit-source-id: 55fc49e0fddeaf0e6541d3159f35783e02bd6260
2017-10-18 19:33:31 -07:00
Ramanpreet Nara 1b5f8d3ee5 iOS: Implement border(Top|Bottom)(Start|End)Radius and border(Start|End)(Color|Width) RN styles
Reviewed By: shergin

Differential Revision: D5874536

fbshipit-source-id: 5ad237bddb70745aef0341cddb172da5ee388c38
2017-10-18 19:33:31 -07:00
Ramanpreet Nara 38b5506599 iOS: Forward RN start/end styles to Yoga
Reviewed By: mmmulani

Differential Revision: D5853589

fbshipit-source-id: 9acee0993a25dce5f4b1ce506746b789b1c4c763
2017-10-18 19:33:31 -07:00
amin roosta f7579381cc Fix typo
Summary: Closes https://github.com/facebook/react-native/pull/15208

Differential Revision: D5497862

Pulled By: javache

fbshipit-source-id: c4ace0deebf339aad037675fc32210b1a9c316eb
2017-07-26 07:08:51 -07:00
Valentin Shergin b1e64a448a Refined type for `display` style property
Reviewed By: javache

Differential Revision: D5185158

fbshipit-source-id: 02fef3862e20e9a5023bfe57601c3cf92ac273e5
2017-06-20 17:16:46 -07:00
Joe Rickerby fa147f02e5 Update overflow docstring to add note on Android
Summary:
The overflow: visible option does not work on Android. This just add a little note to the docs of that property to make that clear.

See #3198  and https://react-native.canny.io/feature-requests/p/add-overflow-support-to-android .

Make it clear that this property is unavailable on Android. We had to figure this out by trial and error when porting an existing codebase, a small note in the docs would be helpful!

I could not find how to build the website - I tried `cd website && npm install && node ./server/generate.js` but I'm getting an error (*JSDOC_ERROR: There are no input files to process.*). But it is such a small change I can't see how it would break the docs build!
Closes https://github.com/facebook/react-native/pull/14103

Differential Revision: D5225814

Pulled By: shergin

fbshipit-source-id: a3136e791178d2a7090f324041be23628130199e
2017-06-18 19:45:27 -07:00
Andrew Imm 50b11aa09b Update remaining PropTypes references
Reviewed By: bvaughn

Differential Revision: D5231309

fbshipit-source-id: d54ee4f73dae63124f4462c138383447829a2551
2017-06-12 16:03:09 -07:00
G. Kay Lee ba17a80aeb Update LayoutPropTypes.js
Summary:
Thanks for submitting a PR! Please read these instructions carefully:

- [x] Explain the **motivation** for making this change.
- [ ] Provide a **test plan** demonstrating that the code is solid.
- [x] Match the **code formatting** of the rest of the codebase.
- [x] Target the `master` branch, NOT a "stable" branch.

Copyediting documentaion

N/A

Sign the [CLA][2], if you haven't already.

Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

Make sure all **tests pass** on both [Travis][3] and [Circle CI][4]. PRs that break tests are unlikely to be merged.

For more info, see the ["Pull Requests"][5] section of our "Contributing" guidelines.

[1]: https://medium.com/martinkonicek/what-is-a-test-plan-8bfc840ec171#.y9lcuqqi9
[2]: https://code.facebook.com/cla
[3]: https://travis-ci.org/facebook/react-native
[4]: http://circleci.com/gh/facebook/react-native
[5]: https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests
Closes https://github.com/facebook/react-native/pull/14320

Differential Revision: D5184852

Pulled By: shergin

fbshipit-source-id: e47d69d9d4b3db64c496b6080d22ac38b9957055
2017-06-06 04:04:44 -07:00
Victor Ilyukevich 0d58669c81 Fix typo in documentation: "…controls how rows…"
Summary: Closes https://github.com/facebook/react-native/pull/13482

Differential Revision: D4883387

Pulled By: javache

fbshipit-source-id: fab3ce3136b18079a566e93fb3d388abc27dd41c
2017-04-13 05:52:45 -07:00
Emil Sjolander 4d69f4b2d1 Add display:none support to react native
Summary:
This diff adds display:none support to React Native. This enables hiding components which still calling their render method and keeping them within the state of your application. This enables preserving state in a component even though the component is not visible. Previously this was often implemented by rendering a component off screen as a work around. See below playground for usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white'}}>
        <View style={{width: 100, height: 100, display: 'none', backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, backgroundColor: 'blue'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611771

fbshipit-source-id: 0dbe0494d989df42994ab9ad5125d47f3233cc5a
2017-03-01 09:16:05 -08:00
Emil Sjolander 31f848a5fa Expose alignContent to react native
Summary:
This diff adds alignContent (https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) support to React Native. This enables aligning the lines of multi-line content. See below playground for example usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white', flexWrap: 'wrap', alignContent: 'space-between'}}>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611803

fbshipit-source-id: ae7f6b4b7e9f4bc78d2502da948214294aad4dd2
2017-03-01 09:16:05 -08:00
desmondyao bac24dde16 Fix comments about Yoga in LayoutPropType.
Summary:
Just a small fix: change css-layout in LayoutPropTypes to Yoga.
Closes https://github.com/facebook/react-native/pull/12509

Differential Revision: D4606716

fbshipit-source-id: c4f6c05c50d241c988604137fd12086d8a1ffb94
2017-02-23 13:01:04 -08:00
Valentin Shergin 1ab104a759 `direction` layout property was marked as iOS only
Reviewed By: fkgozali

Differential Revision: D4523017

fbshipit-source-id: 4972596719fec54616fedf9e8a0a271e745193ae
2017-02-08 14:31:09 -08:00
Valentin Shergin ec673d0771 Added support of `direction` style property
Summary: Now layout direction (LTR or LTR) can be specified not only for whole app but also for view subtree via `direction` style property.

Reviewed By: mmmulani

Differential Revision: D4510206

fbshipit-source-id: 4e56c5886b6e42f2343165eb76be897e681c5ba4
2017-02-06 21:00:16 -08:00
Emil Sjolander 3f49e743be Add percentage support to react native
Summary:
Adds support for percentage value in react native.

syntax: property: 100 | property | '100%'

supported properties:
padding
margin
width
height
minWidth
minHeight
maxWidth
maxHeight
flexBasis

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{backgroundColor: 'white', padding: 10, paddingTop: 30, height: '100%'}}>
        <Text>
          If you want to quickly test out something,
          open the Playground.js file and start coding.
        </Text>
        <View style={{backgroundColor: 'red', height: 50, width: 50}}/>
        <View style={{backgroundColor: 'blue', height: '50%', width: '50%'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4376549

fbshipit-source-id: c41d68a7555396f95d063a7527ee081773ac56dc
2017-01-11 03:58:37 -08:00
Emil Sjolander 976abf87f2 Add baseline alignment support
Summary:
Add baseline alignment support to react native.

{F65372439}

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{padding: 30, flexDirection: 'row', alignItems: 'baseline'}}>
        <View style={{width: 30, height: 10, backgroundColor: 'red'}}/>
        <View style={{width: 30, height: 20, backgroundColor: 'green'}}/>
        <View style={{width: 30, height: 30, backgroundColor: 'blue'}}/>
      </View>
    );
  }
}
```

Reviewed By: javache

Differential Revision: D4385099

fbshipit-source-id: d7caa6e4c086c4a62e24ef1d5db9c805c470ef2a
2017-01-08 04:43:31 -08:00
Emil Sjolander 5850165795 Add support for aspectRatio style prop
Summary:
Expose aspectRatio style prop from css-layout to React Native.

This means the following will now work:

    <View style={{backgroundColor: 'blue', aspectRatio: 1}}/>

Reviewed By: javache

Differential Revision: D4226472

fbshipit-source-id: c8709a7c0abbf77089a4e867879b42dcd9116f65
2016-11-23 07:43:28 -08:00
Tim Yung 7263c349c7 RN: Stop Deep Linking `ReactPropTypes`
Reviewed By: sebmarkbage

Differential Revision: D4025448

fbshipit-source-id: 4e9b6ee002a86f638fc57a4bbeb45bf35fabf74c
2016-10-14 18:59:10 -07:00
Neil Sarkar fea38570ff Fix minor typo in documentation of bottom property - "top" => "bottom"
Summary:
Super minor documentation fix.
Closes https://github.com/facebook/react-native/pull/10278

Differential Revision: D3984539

Pulled By: hramos

fbshipit-source-id: 81559df2173a2471152dc7725bb513a49e6d7c64
2016-10-06 16:58:35 -07:00
Emil Sjolander 0a9b6bedb3 BREAKING - Fix unconstraint sizing in main axis
Summary:
This fixes measuring of items in the main axis of a container. Previously items were in a lot of cases measured with UNSPECIFIED instead of AT_MOST. This was to support scrolling containers. The correct way to handle scrolling containers is to instead provide them with their own overflow value to activate this behavior. This is also similar to how the web works.

This is a breaking change. Most of your layouts will continue to function as before however some of them might not. Typically this is due to having a `flex: 1` style where it is currently a no-op due to being measured with an undefined size but after this change it may collapse your component to take zero size due to the implicit `flexBasis: 0` now being correctly treated. Removing the bad `flex: 1` style or changing it to `flexGrow: 1` should solve most if not all layout issues your see after this diff.

Reviewed By: majak

Differential Revision: D3876927

fbshipit-source-id: 81ea1c9d6574dd4564a3333f1b3617cf84b4022f
2016-09-26 06:13:56 -07:00
Emil Sjolander a6e1e33a50 Reverted commit D3855801
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this.

Reviewed By: astreet

Differential Revision: D3855801

fbshipit-source-id: 3c365f9e6ef612fd9d9caaaa8c650e9702176e77
2016-09-14 11:28:34 -07:00
Emil Sjolander 1f9c9ecb4b BREAKING - Fix unconstraint sizing in main axis
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this.

Reviewed By: astreet

Differential Revision: D3855801

fbshipit-source-id: 6077b0bcb68fe5ddd4aa22926acab40ff4d83949
2016-09-14 09:14:02 -07:00
Emil Sjolander 899adf5343 Expose flexGrow, flexShrink, and flexBasis properties
Reviewed By: javache, astreet

Differential Revision: D3785140

fbshipit-source-id: a735602c53da72e3bce69ba30936c4ed25d76b88
2016-08-30 03:13:39 -07:00
Muraleekrishna c7d0bc73c2 Fix documentation inconsistancy with flexbox alignItems default value
Summary:
As per mozilla docs alignItems already has made `stretch` as default
value

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items.

This resolves issue https://github.com/facebook/react-native/issues/8920
Closes https://github.com/facebook/react-native/pull/9397

Differential Revision: D3718410

fbshipit-source-id: 6c747396fd06652e17cb21a79b0dfa513841cabd
2016-08-15 20:28:30 -07:00
Yann Pringault 1234d27478 Uniformize links in LayoutPropTypes docs
Summary:
The links was a mix of W3Schools, CSS-Tricks and MDN.

Everything is now a MDN link now. [Why?](http://www.w3fools.com/)
Closes https://github.com/facebook/react-native/pull/9005

Differential Revision: D3613520

fbshipit-source-id: 86585613a822a9027f42b61ac5d0abb7c351fa80
2016-07-25 09:43:34 -07:00
David Aurelio bd60d828c5 Remove `node_modules/react` from the list of discoverable haste modules
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.

Reviewed By: astreet

Differential Revision: D3509863

fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
2016-07-05 06:44:33 -07:00
Kevin Lacker 64cdc3547c Overhaul the Flexbox documentation
Summary: Closes https://github.com/facebook/react-native/pull/8395

Differential Revision: D3482652

Pulled By: lacker

fbshipit-source-id: 0bf8955341221b74f69ba24dcf5ab332c910a52c
2016-06-24 11:58:53 -07:00
Pieter De Baets 78b892906b Support {min,max}{Width,Height} on RCTView
Reviewed By: majak

Differential Revision: D2939842

fbshipit-source-id: c8726f1160269e432afc7562c58886313e42963c
2016-06-15 09:58:52 -07:00
Fabian Eichinger d43e0db81e Add support for reverse flex directions on Android and iOS
Summary:
This PR adds support for both 'row-reverse' and 'column-reverse' for Android and iOS and is based on the changes in #6683 that looked like it's all but abandoned.
It also adds examples for the new directions to the "Layout - Flexbox" section of UIExplorer as well as some rad new colors to the section to make the difference between "row-reverse" and "flex-end" more apparent.

**Test plan (required)**
Tested inside of UIExplorer

Android
<img width="571" alt="screen shot 2016-06-05 at 7 42 14 pm" src="https://cloud.githubusercontent.com/assets/4332237/15807140/cf8e05de-2b55-11e6-9366-a2e3194cabf8.png">

iOS
<img width="578" alt="screen shot 2016-06-05 at 7 41 35 pm" src="https://cloud.githubusercontent.com/assets/4332237/15807143/dee8e9b8-2b55-11e6-8777-c30329fa54e8.png">
Closes https://github.com/facebook/react-native/pull/7938

Differential Revision: D3417182

fbshipit-source-id: e8c9f5976ca95b2d2069a5b31a20f6d6309eb3cc
2016-06-10 03:28:45 -07:00
Nick Lockwood d64368b9e2 Implement CSS z-index for iOS
Summary:
This diff implement the CSS z-index for React Native iOS views. We've had numerous pull request for this feature, but they've all attempted to use the `layer.zPosition` property, which is problematic for two reasons:

1. zPosition only affects rendering order, not event processing order. Views with a higher zPosition will appear in front of others in the hierarchy, but won't be the first to receive touch events, and may be blocked by views that are visually behind them.
2. when using a perspective transform matrix, views with a nonzero zPosition will be rendered in a different position due to parallax, which probably isn't desirable.

See https://github.com/facebook/react-native/pull/7825 for further discussion of this problem.

So instead of using `layer.zPosition`, I've implemented this by actually adjusting the order of the subviews within their parent based on the zIndex. This can't be done on the JS side because it would affect layout, which is order-dependent, so I'm doing it inside the view itself.

It works as follows:

1. The `reactSubviews` array is set, whose order matches the order of the JS components and shadowView components, as specified by the UIManager.
2. `didUpdateReactSubviews` is called, which in turn calls `sortedSubviews` (which lazily generates a sorted array of  `reactSubviews` by zIndex) and inserts the result into the view.
3.  If a subview is added or removed, or the zIndex of any subview is changed, the previous `sortedSubviews` array is cleared and  `didUpdateReactSubviews` is called again.

To demonstrate it working, I've modified the UIExplorer example from https://github.com/facebook/react-native/pull/7825

Reviewed By: javache

Differential Revision: D3365717

fbshipit-source-id: b34aa8bfad577bce023f8af5414f9b974aafd8aa
2016-06-07 07:43:49 -07:00
Christopher Chedeau 2529179769 Remove min/max Width/Height in the docs
Summary:
An initial implementation was done on css-layout but isn't working correctly on many cases. The binding from React Native has been removed a long time ago. Let's not confuse people and remove it from the docs :)
Closes https://github.com/facebook/react-native/pull/5522

Reviewed By: svcscm

Differential Revision: D2859665

Pulled By: vjeux

fb-gh-sync-id: 4aa008dd93a6cea6b79a7bce444c94148791eee4
2016-01-27 18:26:56 -08:00
rocman 2244a86eea enable the minWidth/maxWidth/minHeight/maxHeight features
Summary: Closes https://github.com/facebook/react-native/pull/4183

Reviewed By: svcscm

Differential Revision: D2663931

Pulled By: nicklockwood

fb-gh-sync-id: 53d699fbb6041e3623eb78f1045cac28821efde8
2015-11-17 10:58:32 -08:00
Martin Konicek 674abf1955 Flexbox docs
Summary: Documenting this as it wasn't obvious the defaults were different:
https://github.com/facebook/react-native/issues/2724

@​public

Reviewed By: @vjeux

Differential Revision: D2450283
2015-09-16 15:23:01 -07:00
Christopher Chedeau ead3a740ca Second Update from Tue 24 Mar 2015-03-24 19:34:12 -07:00
Christopher Chedeau 5baffa03fd Second Updates from Mon 23 Mar
- [ReactNative] Use deprecated ix in TabBarExample | Amjad Masad
- [ReactNative] Expanded license on obj-c files | Christopher Chedeau
- [ReactNative] Expanded license on js files | Christopher Chedeau
- [ReactNative] Fix React Devtools integration | Alex Kotliarskyi
- [Text] Account for font leading so descenders are not clipped | James Ide
- [ReactNative] Expanded license on js packager files | Christopher Chedeau
- more UIExplorer flow | Basil Hosmer
- [react-packager] Pick up package changes while running | Amjad Masad
- Added a graph view and a ReactNative metric that displays current queue and execution time for the JS thread. | Bryce Redd
- [ReactNative] Add NativeModules and DeviceEventEmitter to react-native exports | Alex Kotliarskyi
2015-03-23 15:07:33 -07:00
Ben Alpert a15603d8f1 Initial commit 2015-01-29 17:10:49 -08:00