summaryrefslogtreecommitdiff
path: root/app/components/auto-image
diff options
context:
space:
mode:
authorKirill Rogovoy <[email protected]>2021-07-20 21:24:52 +0300
committerKirill Rogovoy <[email protected]>2021-07-20 21:24:52 +0300
commit5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb (patch)
tree273dfc086444533d86d580961c92ba8d14781a67 /app/components/auto-image
parentf0bf4e7afdcd8b02a62be45ab3e7d047ed865a79 (diff)
WIP
Diffstat (limited to 'app/components/auto-image')
-rw-r--r--app/components/auto-image/auto-image.story.tsx37
-rw-r--r--app/components/auto-image/auto-image.tsx46
2 files changed, 0 insertions, 83 deletions
diff --git a/app/components/auto-image/auto-image.story.tsx b/app/components/auto-image/auto-image.story.tsx
deleted file mode 100644
index 76e9dab..0000000
--- a/app/components/auto-image/auto-image.story.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/* eslint-disable */
-import * as React from 'react'
-import { storiesOf } from '@storybook/react-native'
-import { StoryScreen, Story, UseCase } from '../../../storybook/views'
-import { AutoImage } from './auto-image'
-
-declare let module
-
-const bowser = require('../../screens/welcome/bowser.png')
-const morty = { uri: 'https://rickandmortyapi.com/api/character/avatar/2.jpeg' }
-
-storiesOf('AutoImage', module)
- .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
- .add('Style Presets', () => (
- <Story>
- <UseCase text="With require()">
- <AutoImage source={bowser} />
- <AutoImage source={bowser} style={{ width: 150 }} />
- <AutoImage source={bowser} style={{ width: 150, height: 150 }} />
- <AutoImage source={bowser} style={{ height: 150 }} />
- <AutoImage
- source={bowser}
- style={{ height: 150, resizeMode: 'contain' }}
- />
- </UseCase>
- <UseCase text="With URL">
- <AutoImage source={morty} />
- <AutoImage source={morty} style={{ width: 150 }} />
- <AutoImage source={morty} style={{ width: 150, height: 150 }} />
- <AutoImage source={morty} style={{ height: 150 }} />
- <AutoImage
- source={morty}
- style={{ height: 150, resizeMode: 'contain' }}
- />
- </UseCase>
- </Story>
- ))
diff --git a/app/components/auto-image/auto-image.tsx b/app/components/auto-image/auto-image.tsx
deleted file mode 100644
index a8bfe37..0000000
--- a/app/components/auto-image/auto-image.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { useLayoutEffect, useState } from 'react'
-import {
- Image as RNImage,
- ImageProps as DefaultImageProps,
- ImageURISource,
- Platform,
-} from 'react-native'
-
-type ImageProps = DefaultImageProps & {
- source: ImageURISource
-}
-
-/**
- * An Image wrapper component that autosizes itself to the size of the actual image.
- * You can always override by passing a width and height in the style.
- * If passing only one of width/height this image component will use the actual
- * size of the other dimension.
- *
- * This component isn't required, but is provided as a convenience so that
- * we don't have to remember to explicitly set image sizes on every image instance.
- *
- * To use as a stand-in replacement import { AutoImage as Image } and remove the
- * Image import from react-native. Now all images in that file are handled by this
- * component and are web-ready if not explicitly sized in the style property.
- */
-export function AutoImage(props: ImageProps) {
- const [imageSize, setImageSize] = useState({ width: 0, height: 0 })
-
- useLayoutEffect(() => {
- if (props.source?.uri) {
- RNImage.getSize(props.source.uri as any, (width, height) => {
- setImageSize({ width, height })
- })
- } else if (Platform.OS === 'web') {
- // web requires a different method to get it's size
- RNImage.getSize(props.source as any, (width, height) => {
- setImageSize({ width, height })
- })
- } else {
- const { width, height } = RNImage.resolveAssetSource(props.source)
- setImageSize({ width, height })
- }
- }, [])
-
- return <RNImage {...props} style={[imageSize, props.style]} />
-}