Skip to content

Support HTTP headers #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ghost wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Support HTTP headers #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b61038
Support HTTP headers
Orclyx Jul 13, 2018
1638ac3
Use source rather than uri prop
Orclyx Jul 29, 2018
94b0eaa
Add comment
Orclyx Jul 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions src/CacheManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,21 @@ const BASE_DIR = `${FileSystem.cacheDirectory}expo-image-cache/`;
export class CacheEntry {

uri: string
headers: {[string]: string} | void;
path: string;

constructor(uri: string) {
constructor(uri: string, headers?: {[string]: string}) {
this.uri = uri;
this.headers = headers;
}

async getPath(): Promise<?string> {
const {uri} = this;
const {uri, headers} = this;
const {path, exists, tmpPath} = await getCacheEntry(uri);
if (exists) {
return path;
}
await FileSystem.downloadAsync(uri, tmpPath);
await FileSystem.createDownloadResumable(uri, tmpPath, {headers}).downloadAsync();
await FileSystem.moveAsync({ from: tmpPath, to: path });
return path;
}
Expand All @@ -30,9 +32,9 @@ export default class CacheManager {

static entries: { [uri: string]: CacheEntry } = {};

static get(uri: string): CacheEntry {
static get(uri: string, headers?: {[string]: string}): CacheEntry {
if (!CacheManager.entries[uri]) {
CacheManager.entries[uri] = new CacheEntry(uri);
CacheManager.entries[uri] = new CacheEntry(uri, headers);
}
return CacheManager.entries[uri];
}
Expand Down
36 changes: 22 additions & 14 deletions src/Image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ type ImageProps = {
style?: ImageStyle,
defaultSource?: ImageSourcePropType,
preview?: ImageSourcePropType,
uri: string,
source: ImageSourcePropType,
transitionDuration?: number,
tint?: "dark" | "light"
};

type ImageState = {
uri: ?string,
source: ?ImageSourcePropType,
intensity: Animated.Value
};

Expand All @@ -32,29 +32,35 @@ export default class Image extends React.Component<ImageProps, ImageState> {
};

state = {
uri: undefined,
source: undefined,
intensity: new Animated.Value(100)
};

async load({uri}: ImageProps): Promise<void> {
async load(source: ImageSourcePropType): Promise<void> {
const {uri, headers} = source;
if (uri) {
const path = await CacheManager.get(uri).getPath();
const path = await CacheManager.get(uri, headers).getPath();
if (this.mounted) {
this.setState({ uri: path });
this.setState({
source: {
...source,
uri: path
}
});
}
}
}

componentDidMount() {
this.load(this.props);
this.load(this.props.source);
}

componentDidUpdate(prevProps: ImageProps, prevState: ImageState) {
const {preview, transitionDuration} = this.props;
const {uri, intensity} = this.state;
if (this.props.uri !== prevProps.uri) {
this.load(this.props);
} else if (uri && preview && prevState.uri === undefined) {
const {source, intensity} = this.state;
if (this.props.source !== prevProps.source) {
this.load(this.props.source);
} else if (source && preview && prevState.source === undefined) {
Animated.timing(intensity, {
duration: transitionDuration,
toValue: 0,
Expand All @@ -69,10 +75,12 @@ export default class Image extends React.Component<ImageProps, ImageState> {

render(): React.Node {
const {preview, style, defaultSource, tint, ...otherProps} = this.props;
const {uri, intensity} = this.state;
// Prevent overwriting source from state
delete otherProps.source;
const {source, intensity} = this.state;
const hasDefaultSource = !!defaultSource;
const hasPreview = !!preview;
const isImageReady = !!uri;
const isImageReady = !!source;
const opacity = intensity.interpolate({
inputRange: [0, 100],
outputRange: [0, 0.5]
Expand Down Expand Up @@ -109,7 +117,7 @@ export default class Image extends React.Component<ImageProps, ImageState> {
{
isImageReady && (
<RNImage
source={{ uri }}
source={source}
style={computedStyle}
{...otherProps}
/>
Expand Down