Changeset View
Changeset View
Standalone View
Standalone View
native/media/remote-image.react.js
| // @flow | // @flow | ||||
| import { Image } from 'expo-image'; | |||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { View, StyleSheet, ActivityIndicator } from 'react-native'; | import { View, StyleSheet, ActivityIndicator } from 'react-native'; | ||||
| import FastImage from 'react-native-fast-image'; | |||||
| import { type ConnectionStatus } from 'lib/types/socket-types.js'; | import { type ConnectionStatus } from 'lib/types/socket-types.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, | ||||
| Show All 30 Lines | if (this.state.loaded && !prevState.loaded) { | ||||
| this.props.onLoad && this.props.onLoad(this.props.uri); | this.props.onLoad && this.props.onLoad(this.props.uri); | ||||
| } | } | ||||
| } | } | ||||
| render() { | render() { | ||||
| const source = { uri: this.props.uri }; | const source = { uri: this.props.uri }; | ||||
| if (this.state.loaded) { | if (this.state.loaded) { | ||||
| return ( | return ( | ||||
| <FastImage | <Image | ||||
| source={source} | source={source} | ||||
| onLoad={this.onLoad} | onLoad={this.onLoad} | ||||
| style={this.props.style} | style={this.props.style} | ||||
| key={this.state.attempt} | key={this.state.attempt} | ||||
| /> | /> | ||||
| ); | ); | ||||
| } | } | ||||
| if (this.props.invisibleLoad) { | if (this.props.invisibleLoad) { | ||||
| return ( | return ( | ||||
| <FastImage | <Image | ||||
| source={source} | source={source} | ||||
| onLoad={this.onLoad} | onLoad={this.onLoad} | ||||
| style={[this.props.style, styles.invisible]} | style={[this.props.style, styles.invisible]} | ||||
| key={this.state.attempt} | key={this.state.attempt} | ||||
| /> | /> | ||||
| ); | ); | ||||
| } | } | ||||
| return ( | return ( | ||||
| <View style={styles.container}> | <View style={styles.container}> | ||||
| <View style={styles.spinnerContainer}> | <View style={styles.spinnerContainer}> | ||||
| <ActivityIndicator color={this.props.spinnerColor} size="large" /> | <ActivityIndicator color={this.props.spinnerColor} size="large" /> | ||||
| </View> | </View> | ||||
| <FastImage | <Image | ||||
| source={source} | source={source} | ||||
| onLoad={this.onLoad} | onLoad={this.onLoad} | ||||
| style={this.props.style} | style={this.props.style} | ||||
| key={this.state.attempt} | key={this.state.attempt} | ||||
| /> | /> | ||||
| </View> | </View> | ||||
| ); | ); | ||||
| } | } | ||||
| Show All 32 Lines | |||||