Commit Graph

74 Commits

Author SHA1 Message Date
Dmitriy Loktev 8e70c7f003 [Image] Add onLoadStart, onLoadProgress, onLoadError events to Image component
Summary:
This PR adds 4 native events to NetworkImage.

![demo](http://zippy.gfycat.com/MelodicLawfulCaecilian.gif)

Using these events I could wrap `Image` component into something like:
```javascript
class NetworkImage extends React.Component {
  getInitialState() {
    return {
      downloading: false,
      progress: 0
    }
  }

  render() {
    var loader = this.state.downloading ?
      <View style={this.props.loaderStyles}>
        <ActivityIndicatorIOS animating={true} size={'large'} />
        <Text style={{color: '#bbb'}}>{this.state.progress}%</Text>
      </View>
      :
      null;

    return <Image source={this.props.source}
      onLoadStart={() => this.setState({downloading: true}) }
      onLoaded={() => this.setState({downloading: false}) }
      onLoadProgress={(e)=> this.setState({progress: Math.round(100 * e.nativeEvent.written / e.nativeEvent.total)});
      onLoadError={(e)=> {
        alert('the image cannot be downloaded because: ', JSON.stringify(e));
        this.setState({downloading: false});
      }}>
      {loader}
    </Image>
  }
}
```
Useful on slow connections and server errors.

There are dozen lines of Objective C, which I don't have experience with. There are neither specific tests nor documentation yet. And I do realize that you're already working right now on better `<Image/>` (pipeline, new asset management, etc.). So this is basically a proof concept of events for images, and if this idea is not completely wrong I could improve it or help somehow.

Closes https://github.com/facebook/react-native/pull/1318
Github Author: Dmitriy Loktev <unknownliveid@hotmail.com>
2015-07-10 06:34:21 -08:00
Eric Vicenti 47508566a0 [ReactNative] resizeMode is not a nativeOnly prop
Summary:
resizeMode is a native prop, but it is also in the propTypes, so this causes an incorrect warning:

```
Prop resizeMode = `contain` should not be set directly on Image.
```

@public

Test Plan: No warnings on image example in UIExplorer
2015-06-23 08:57:47 -08:00
Nick Lockwood 45d8fb0ef6 Removed deprecated RCT_EXPORT + code paths 2015-06-05 09:58:25 -08:00
Premasagar Rose 33ac55b2bd Fix typo in image documentation
Summary:
Closes https://github.com/facebook/react-native/pull/970
Github Author: Premasagar Rose <p@dharmafly.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-05-18 13:01:20 -08:00
James Ide 08d30e751b [ActivityIndicator] Add the onLayout prop to the outer container view
Summary:
ActivityIndicator was forwarding all of its props except `style` to the inner native view. This meant that onLayout would report a zero-sized frame that was relative to the wrapper view instead of the parent of the ActivityIndicator.

This diff adds `onLayout` to the wrapper view instead of the native view.

In general, all components that forward props need to be audited in this manner.

Closes https://github.com/facebook/react-native/pull/1292
Github Author: James Ide <ide@jameside.com>

Test Plan: `<ActivityIndicator onLayout={...} />` reports the size of the spinner plus a position relative to its parent view.
2015-05-15 18:08:32 -08:00
Krzysztof Magiera ff00e1496c [ReactNative] Rename ReactIOS JS module (and relatives) to ReactNative. 2015-05-13 13:24:35 -07:00
Alex Kotliarskyi d3c0029cef [ReactNative] Do not throw when Image.source is null 2015-05-06 16:16:49 -08:00
Ben Alpert dd56ccb9c7 [react-native] Fix capitalization of "REact" 2015-04-27 13:52:57 -08:00
Alex Kotliarskyi c5ea25f7fb [ReactNative] Adopt client asset managing code to server changes 2015-04-22 13:41:28 -08:00
Alex Kotliarskyi c6ad7b85d1 [ReactNative] Use network image for new image assets 2015-04-21 12:45:36 -08:00
Spencer Ahrens 65b6d209d9 [ReactNative] cleanup some requireNativeComponent cruft 2015-04-17 15:45:12 -08:00
Spencer Ahrens 915151c5d7 [ReactNative] verifyPropTypes against native exports 2015-04-16 18:15:36 -08:00
Christopher Chedeau dee36b8e07 [ReactNative] Improve <Image> docs 2015-04-01 10:15:51 -08:00
Basil Hosmer 030b264eb4 flowify a few more Libraries 2015-03-26 10:13:38 -08:00
Christopher Chedeau e1ef0328d9 [ReactNative] Expanded license on js files 2015-03-23 13:17:54 -08:00
Amjad Masad f1746ac83e [react-packager] change all but one `ix` to `require` 2015-03-20 15:26:58 -08:00
Spencer Ahrens 9086365faf [ReactNative] Strip prefixes from NativeModules keys 2015-03-17 21:54:27 -08:00
Spencer Ahrens d8ee4e87a1 [ReactKit] Remove NativeModulesDeprecated 2015-03-17 02:48:58 -08:00
Spencer Ahrens b396de3cc8 [ReactNative] s/RK/RCT in OSS 2015-03-17 02:48:57 -08:00
Jiajie Zhu 50f77016bb [catlyst|madman] fix prop type warning 2015-03-11 14:45:41 -08:00
Christopher Chedeau e4093a6abb [ReactNative] Remove ImageSourcePropType 2015-03-09 09:49:30 -08:00
Christopher Chedeau 45da1f03cb [ReactNative] s/Image.sourcePropType/Image.propTypes.source/ 2015-03-09 09:49:29 -08:00
Christopher Chedeau d8e83c882e [ReactNative] Move around and reformat comments for the documentation 2015-03-09 09:49:24 -08:00
Spencer Ahrens 99f7a0ab9d [ReactNative] Pull out some OSS modules into separate libs 2015-02-27 08:36:52 -08:00