diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index b0d665ed31c..4374fcb8cb5 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -36,6 +36,7 @@ type NetworkImageCallbackExampleState = {| events: Array, startLoadPrefetched: boolean, mountTime: number, + imageHash: number, |}; type NetworkImageCallbackExampleProps = $ReadOnly<{| @@ -51,6 +52,7 @@ class NetworkImageCallbackExample extends React.Component< events: [], startLoadPrefetched: false, mountTime: Date.now(), + imageHash: Date.now(), }; UNSAFE_componentWillMount() { @@ -63,6 +65,10 @@ class NetworkImageCallbackExample extends React.Component< })); }; + updateLoadingImageHash = () => { + this.setState({imageHash: Date.now()}); + }; + render() { const {mountTime} = this.state; return ( @@ -340,6 +346,193 @@ class MultipleSourcesExample extends React.Component< } } +type LoadingIndicatorSourceExampleState = {| + imageHash: number, +|}; + +type LoadingIndicatorSourceExampleProps = $ReadOnly<{||}>; + +class LoadingIndicatorSourceExample extends React.Component< + LoadingIndicatorSourceExampleProps, + LoadingIndicatorSourceExampleState, +> { + state = { + imageHash: Date.now(), + }; + + reloadImage = () => { + this.setState({ + imageHash: Date.now(), + }); + }; + + loaderGif = { + uri: 'https://media1.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif', + }; + + render() { + const loadingImage = { + uri: `https://www.facebook.com/ads/pics/successstories.png?hash=${this.state.imageHash}`, + }; + + return ( + + + + Refresh Image + + + + Image Hash: {this.state.imageHash} + Image URI: {loadingImage.uri} + + ); + } +} + +type OnLayoutExampleState = {| + width: number, + height: number, + layoutHandlerMessage: string, +|}; + +type OnLayoutExampleProps = $ReadOnly<{||}>; + +class OnLayoutExample extends React.Component< + OnLayoutExampleProps, + OnLayoutExampleState, +> { + state = { + width: 30, + height: 30, + layoutHandlerMessage: 'No Message', + }; + + onLayoutHandler = event => { + this.setState({ + width: this.state.width, + height: this.state.height, + layoutHandlerMessage: JSON.stringify(event.nativeEvent), + }); + console.log(event.nativeEvent); + }; + + increaseImageSize = () => { + if (this.state.width >= 100) { + return; + } + this.setState({ + width: this.state.width + 10, + height: this.state.height + 10, + }); + }; + + increaseImageSize = () => { + if (this.state.width >= 100) { + return; + } + this.setState({ + width: this.state.width + 10, + height: this.state.height + 10, + }); + }; + + decreaseImageSize = () => { + if (this.state.width <= 10) { + return; + } + this.setState({ + width: this.state.width - 10, + height: this.state.height - 10, + }); + }; + + render() { + return ( + + Adjust the image size to trigger the OnLayout handler. + + + Decrease image size + + + Increase image size + + + + Container image size: {this.state.width}x{this.state.height}{' '} + + + + + Layout Handler Message: {this.state.layoutHandlerMessage} + + ); + } +} + +type OnPartialLoadExampleState = {| + hasLoaded: boolean, +|}; + +type OnPartialLoadExampleProps = $ReadOnly<{||}>; + +class OnPartialLoadExample extends React.Component< + OnPartialLoadExampleProps, + OnPartialLoadExampleState, +> { + state = { + hasLoaded: false, + }; + + partialLoadHandler = () => { + this.setState({ + hasLoaded: true, + }); + }; + + render() { + return ( + + + Partial Load Function Executed: {JSON.stringify(this.state.hasLoaded)} + + + + ); + } +} + const fullImage = { uri: 'https://www.facebook.com/ads/pics/successstories.png', }; @@ -951,4 +1144,60 @@ exports.examples = [ ); }, }, + { + title: 'Accessibility', + description: ('If the `accessible` (boolean) prop is set to True, the image will be indicated as an accessbility element.': string), + render: function(): React.Node { + return ; + }, + }, + { + title: 'Accessibility Label', + description: ('When an element is marked as accessibile (using the accessibility prop), it is good practice to set an accessibilityLabel on the image to provide a description of the element to people who use VoiceOver. VoiceOver will read this string when people select this element.': string), + render: function(): React.Node { + return ( + + ); + }, + }, + { + title: 'Fade Duration', + description: ('The time (in miliseconds) that an image will fade in for when it appears (default = 300).': string), + render: function(): React.Node { + return ( + <> + + This image will fade in over the time of 1.5s. + + ); + }, + platform: 'android', + }, + { + title: 'Loading Indicator Source', + description: ('This prop is used to set the resource that will be used as the loading indicator for the image (displayed until the image is ready to be displayed).': string), + render: function(): React.Node { + return ; + }, + }, + { + title: 'On Layout', + description: ('This prop is used to set the handler function to be called when the image is mounted or its layout changes. The function receives an event with `{nativeEvent: {layout: {x, y, width, height}}}`': string), + render: function(): React.Node { + return ; + }, + }, + { + title: 'On Partial Load', + description: ('This prop is used to set the handler function to be called when the partial load of the image is complete. This is meant for progressive JPEG loads.': string), + render: function(): React.Node { + return ; + }, + platform: 'ios', + }, ];