status-im/react-native-fast-image
2
0
Fork 0
mirror of https://github.com/status-im/react-native-fast-image.git synced 2025-02-23 19:58:15 +00:00
Code Issues Projects Releases Wiki Activity

chore: Add animated WebP example. (#418)

Browse Source
This commit is contained in:
Dylan Vann 2019-02-24 19:52:11 -05:00 committed by GitHub
parent 32fa98d621
commit 96f98c4d0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
react-native-fast-image-example-cocoapods/src/LocalImagesExample.js vendored
View File

@ -7,7 +7,8 @@ import FeatureText from './FeatureText'
import FieldsImage from './images/fields.jpg'
import FieldsBase64 from './images/fields.js'
import FieldsWebP from './images/fields.webp'
import JellyfishImage from './images/jellyfish.gif'
import JellyfishGIF from './images/jellyfish.gif'
import JellyfishWebP from './images/jellyfish.webp'
import ImagePicker from 'react-native-image-picker'
import BulletText from './BulletText'
@ -26,6 +27,13 @@ const Image = ({ source, ...p }) => (
const Row = p => <View style={styles.row} {...p} />
const Example = ({ name, source }) => (
<Row>
<BulletText>{name}</BulletText>
<Image source={source} />
</Row>
)
class PhotoExample extends Component {
state = {}
@ -42,7 +50,6 @@ class PhotoExample extends Component {
response.customButton,
)
} else {
const fileUri = `file://${response.path}`
const uri = response.uri
this.setState({
image: { uri: uri },
@ -67,62 +74,18 @@ class PhotoExample extends Component {
}
}
const Require = () => (
<React.Fragment>
<BulletText>require</BulletText>
<Image source={require('./images/fields.jpg')} />
</React.Fragment>
)
const Import = () => (
<React.Fragment>
<BulletText>import</BulletText>
<Image source={FieldsImage} />
</React.Fragment>
)
const GIF = () => (
<React.Fragment>
<BulletText>gif</BulletText>
<Image source={JellyfishImage} />
</React.Fragment>
)
const Base64 = () => (
<React.Fragment>
<BulletText>base64</BulletText>
<Image source={{ uri: FieldsBase64 }} />
</React.Fragment>
)
const WebP = () => (
<React.Fragment>
<BulletText>WebP</BulletText>
<Image source={FieldsWebP} />
</React.Fragment>
)
const LocalImagesExample = ({ onPressReload, bust }) => (
const LocalImagesExample = () => (
<View>
<Section>
<FeatureText>• Local images.</FeatureText>
</Section>
<View style={styles.container}>
<Row>
<Require />
</Row>
<Row>
<Import />
</Row>
<Row>
<GIF />
</Row>
<Row>
<Base64 />
</Row>
<Row>
<WebP />
</Row>
<Example name="Require" source={require('./images/fields.jpg')} />
<Example name="Import" source={FieldsImage} />
<Example name="GIF" source={JellyfishGIF} />
<Example name="Animated WebP" source={JellyfishWebP} />
<Example name="Base64" source={{ uri: FieldsBase64 }} />
<Example name="WebP" source={FieldsWebP} />
<PhotoExample />
</View>
</View>

BIN
react-native-fast-image-example-cocoapods/src/images/jellyfish.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

69
react-native-fast-image-example/src/LocalImagesExample.js vendored
View File

@ -7,7 +7,8 @@ import FeatureText from './FeatureText'
import FieldsImage from './images/fields.jpg'
import FieldsBase64 from './images/fields.js'
import FieldsWebP from './images/fields.webp'
import JellyfishImage from './images/jellyfish.gif'
import JellyfishGIF from './images/jellyfish.gif'
import JellyfishWebP from './images/jellyfish.webp'
import ImagePicker from 'react-native-image-picker'
import BulletText from './BulletText'
@ -26,6 +27,13 @@ const Image = ({ source, ...p }) => (
const Row = p => <View style={styles.row} {...p} />
const Example = ({ name, source }) => (
<Row>
<BulletText>{name}</BulletText>
<Image source={source} />
</Row>
)
class PhotoExample extends Component {
state = {}
@ -42,7 +50,6 @@ class PhotoExample extends Component {
response.customButton,
)
} else {
const fileUri = `file://${response.path}`
const uri = response.uri
this.setState({
image: { uri: uri },
@ -67,62 +74,18 @@ class PhotoExample extends Component {
}
}
const Require = () => (
<React.Fragment>
<BulletText>require</BulletText>
<Image source={require('./images/fields.jpg')} />
</React.Fragment>
)
const Import = () => (
<React.Fragment>
<BulletText>import</BulletText>
<Image source={FieldsImage} />
</React.Fragment>
)
const GIF = () => (
<React.Fragment>
<BulletText>gif</BulletText>
<Image source={JellyfishImage} />
</React.Fragment>
)
const Base64 = () => (
<React.Fragment>
<BulletText>base64</BulletText>
<Image source={{ uri: FieldsBase64 }} />
</React.Fragment>
)
const WebP = () => (
<React.Fragment>
<BulletText>WebP</BulletText>
<Image source={FieldsWebP} />
</React.Fragment>
)
const LocalImagesExample = ({ onPressReload, bust }) => (
const LocalImagesExample = () => (
<View>
<Section>
<FeatureText>• Local images.</FeatureText>
</Section>
<View style={styles.container}>
<Row>
<Require />
</Row>
<Row>
<Import />
</Row>
<Row>
<GIF />
</Row>
<Row>
<Base64 />
</Row>
<Row>
<WebP />
</Row>
<Example name="Require" source={require('./images/fields.jpg')} />
<Example name="Import" source={FieldsImage} />
<Example name="GIF" source={JellyfishGIF} />
<Example name="Animated WebP" source={JellyfishWebP} />
<Example name="Base64" source={{ uri: FieldsBase64 }} />
<Example name="WebP" source={FieldsWebP} />
<PhotoExample />
</View>
</View>

BIN
react-native-fast-image-example/src/images/jellyfish.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB