Changeset View
Changeset View
Standalone View
Standalone View
native/media/remote-image.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import type { ImageSource } from 'react-native/Libraries/Image/ImageSource'; | |||||
import { type ConnectionStatus } from 'lib/types/socket-types.js'; | import { type ConnectionStatus } from 'lib/types/socket-types.js'; | ||||
import LoadableImage from './loadable-image.react.js'; | import LoadableImage from './loadable-image.react.js'; | ||||
import { useSelector } from '../redux/redux-utils.js'; | import { useSelector } from '../redux/redux-utils.js'; | ||||
import type { ImageStyle } from '../types/styles.js'; | import type { ImageStyle } from '../types/styles.js'; | ||||
type BaseProps = { | type BaseProps = { | ||||
+uri: string, | +uri: string, | ||||
+onLoad: (uri: string) => void, | +onLoad: (uri: string) => void, | ||||
+spinnerColor: string, | +spinnerColor: string, | ||||
+style: ImageStyle, | +style: ImageStyle, | ||||
+invisibleLoad: boolean, | +invisibleLoad: boolean, | ||||
+placeholder?: ?ImageSource, | |||||
}; | }; | ||||
type Props = { | type Props = { | ||||
...BaseProps, | ...BaseProps, | ||||
+connectionStatus: ConnectionStatus, | +connectionStatus: ConnectionStatus, | ||||
}; | }; | ||||
type State = { | type State = { | ||||
+attempt: number, | +attempt: number, | ||||
}; | }; | ||||
Show All 11 Lines | componentDidUpdate(prevProps: Props) { | ||||
) { | ) { | ||||
this.setState(otherPrevState => ({ | this.setState(otherPrevState => ({ | ||||
attempt: otherPrevState.attempt + 1, | attempt: otherPrevState.attempt + 1, | ||||
})); | })); | ||||
} | } | ||||
} | } | ||||
render() { | render() { | ||||
const { style, spinnerColor, invisibleLoad, uri } = this.props; | const { style, spinnerColor, invisibleLoad, uri, placeholder } = this.props; | ||||
const source = { uri }; | const source = { uri }; | ||||
return ( | return ( | ||||
<LoadableImage | <LoadableImage | ||||
source={source} | source={source} | ||||
placeholder={placeholder} | |||||
onLoad={this.onLoad} | onLoad={this.onLoad} | ||||
spinnerColor={spinnerColor} | spinnerColor={spinnerColor} | ||||
style={style} | style={style} | ||||
invisibleLoad={invisibleLoad} | invisibleLoad={invisibleLoad} | ||||
key={this.state.attempt} | key={this.state.attempt} | ||||
/> | /> | ||||
); | ); | ||||
} | } | ||||
Show All 15 Lines |