status-im/react-native-fast-image
1
0
Fork 0
mirror of https://github.com/status-im/react-native-fast-image.git synced 2026-08-31 13:51:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Update example to React Native 0.61.5. (#639)

Browse Source 
This also upgrades all the dependencies.
This commit is contained in:
Dylan Vann
2020-03-01 15:58:28 -05:00
committed by GitHub
parent e94e6fee66
commit 6994606073
40 changed files with 2736 additions and 2555 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ReactNativeFastImageExample/src/AutoSizeExample.js
+6 -2
View File
@@ -20,11 +20,15 @@ class AutoSizingImage extends Component {
nativeEvent: { width, height },
} = e
this.setState({ width, height })
if (this.props.onLoad) this.props.onLoad(e)
if (this.props.onLoad) {
this.props.onLoad(e)
}
}
getHeight = () => {
if (!this.state.height) return this.props.defaultHeight
if (!this.state.height) {
return this.props.defaultHeight
}
const ratio = this.state.height / this.state.width
const height = this.props.width * ratio
return height
ReactNativeFastImageExample/src/DefaultImageGrid.js
-7
View File
@@ -1,14 +1,7 @@
// @flow
import React from 'react'
import { Image } from 'react-native'
import Icon from './Icons/Icon'
import ImageGrid from './ImageGrid'
const DefaultImageGrid = () => <ImageGrid ImageComponent={Image} />
DefaultImageGrid.navigationOptions = {
tabBarLabel: 'Image Grid',
tabBarIcon: props => <Icon name="ios-image" {...props} />,
}
export default DefaultImageGrid
ReactNativeFastImageExample/src/FastImageExamples.js
-6
View File
@@ -1,6 +1,5 @@
import React from 'react'
import { ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
import Icon from './Icons/Icon'
import Section from './Section'
import PriorityExample from './PriorityExample'
import GifExample from './GifExample'
@@ -45,11 +44,6 @@ const FastImageExample = () => (
</View>
)
FastImageExample.navigationOptions = {
tabBarLabel: 'FastImage Example',
tabBarIcon: props => <Icon name="ios-information-circle" {...props} />,
}
const styles = StyleSheet.create({
titleText: {
fontWeight: '900',
ReactNativeFastImageExample/src/FastImageGrid.js
-6
View File
@@ -1,13 +1,7 @@
import React from 'react'
import FastImage from 'react-native-fast-image'
import Icon from './Icons/Icon'
import ImageGrid from './ImageGrid'
const FastImageGrid = () => <ImageGrid ImageComponent={FastImage} />
FastImageGrid.navigationOptions = {
tabBarLabel: 'FastImage Grid',
tabBarIcon: props => <Icon name="ios-photos" {...props} />,
}
export default FastImageGrid
ReactNativeFastImageExample/src/Icon.js
+13
View File
@@ -0,0 +1,13 @@
import React from 'react'
import Base from 'react-native-vector-icons/Ionicons'
export function Icon({ size, name, color }) {
return (
<Base
name={name}
size={size}
style={{ width: size, height: size }}
color={color}
/>
)
}
ReactNativeFastImageExample/src/Icons/Icon.js
-17
View File
@@ -1,17 +0,0 @@
import React from 'react'
import Base from 'react-native-vector-icons/Ionicons'
const Icon = ({ size, name, tintColor }) => (
<Base
name={name}
size={size}
style={{ width: size, height: size }}
color={tintColor}
/>
)
Icon.defaultProps = {
size: 26,
}
export default Icon
ReactNativeFastImageExample/src/ImageGrid.js
-1
View File
@@ -92,7 +92,6 @@ const MARGIN = 2
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'stretch',
justifyContent: 'center',
backgroundColor: 'white',
ReactNativeFastImageExample/src/LocalImagesExample.js
+5 -10
View File
@@ -39,16 +39,12 @@ class PhotoExample extends Component {
pick = () => {
ImagePicker.showImagePicker(options, response => {
console.log('Response = ', response)
if (response.didCancel) {
console.log('User cancelled image picker')
console.log('ImagePicker - User cancelled.')
} else if (response.error) {
console.log('ImagePicker Error: ', response.error)
console.log(`ImagePicker - Error ${response.error}.`)
} else if (response.customButton) {
console.log(
'User tapped custom button: ',
response.customButton,
)
console.log(`ImagePicker - Tapped ${response.customButton}`)
} else {
const uri = response.uri
this.setState({
@@ -64,9 +60,7 @@ class PhotoExample extends Component {
<BulletText>photo library</BulletText>
<TouchableOpacity onPress={this.pick}>
<Image style={styles.imageSquare} source={this.state.image}>
<Text style={{ color: 'white', fontWeight: '900' }}>
Pick Photo
</Text>
<Text style={styles.pickPhoto}>Pick Photo</Text>
</Image>
</TouchableOpacity>
</Row>
@@ -92,6 +86,7 @@ const LocalImagesExample = () => (
)
const styles = StyleSheet.create({
pickPhoto: { color: 'white', fontWeight: '900' },
row: {
justifyContent: 'center',
alignItems: 'center',
ReactNativeFastImageExample/src/PreloadExample.js
+5 -4
View File
@@ -4,7 +4,7 @@ import SectionFlex from './SectionFlex'
import FastImage from 'react-native-fast-image'
import Section from './Section'
import FeatureText from './FeatureText'
import uuid from 'uuid/v4'
import { v4 as uuid } from 'uuid'
import Button from './Button'
import { createImageProgress } from 'react-native-image-progress'
@@ -58,13 +58,13 @@ class PreloadExample extends Component {
<View style={styles.image} />
)}
<View style={styles.buttons}>
<View style={{ flex: 1 }}>
<View style={styles.buttonView}>
<Button text="Bust" onPress={this.bustCache} />
</View>
<View style={{ flex: 1 }}>
<View style={styles.buttonView}>
<Button text="Preload" onPress={this.preload} />
</View>
<View style={{ flex: 1 }}>
<View style={styles.buttonView}>
<Button text="Render" onPress={this.showImage} />
</View>
</View>
@@ -75,6 +75,7 @@ class PreloadExample extends Component {
}
const styles = StyleSheet.create({
buttonView: { flex: 1 },
section: {
flexDirection: 'column',
alignItems: 'center',
ReactNativeFastImageExample/src/ProgressExample.js
+6 -8
View File
@@ -24,14 +24,7 @@ class ProgressExample extends Component {
<Section>
<FeatureText text="• Progress callbacks." />
</Section>
<SectionFlex
onPress={onPressReload}
style={{
flexDirection: 'column',
alignItems: 'center',
paddingBottom: 20,
}}
>
<SectionFlex onPress={onPressReload} style={styles.section}>
<FastImage
style={styles.image}
source={{
@@ -69,6 +62,11 @@ class ProgressExample extends Component {
}
const styles = StyleSheet.create({
section: {
flexDirection: 'column',
alignItems: 'center',
paddingBottom: 20,
},
image: {
height: 100,
backgroundColor: '#ddd',
ReactNativeFastImageExample/src/ResizeModeExample.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
import { StyleSheet, View } from 'react-native'
import SectionFlex from './SectionFlex'
import FastImage from 'react-native-fast-image'
import Section from './Section'
ReactNativeFastImageExample/src/StatusBarUnderlay.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { Platform, StatusBar, StyleSheet, View } from 'react-native'
import { StyleSheet, View } from 'react-native'
import { getStatusBarHeight } from 'react-native-status-bar-height'
export const STATUS_BAR_HEIGHT = getStatusBarHeight()
ReactNativeFastImageExample/src/TintColorExample.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { StyleSheet, View} from 'react-native'
import { StyleSheet, View } from 'react-native'
import withCacheBust from './withCacheBust'
import FastImage from 'react-native-fast-image'
import Section from './Section'
ReactNativeFastImageExample/src/images/fields.js
+1 -1
View File
File diff suppressed because one or more lines are too long
ReactNativeFastImageExample/src/index.js
+41 -14
View File
@@ -1,24 +1,51 @@
import React from 'react'
import { YellowBox } from 'react-native'
import { createBottomTabNavigator, createAppContainer } from 'react-navigation'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { Icon } from './Icon'
import FastImageExamples from './FastImageExamples'
import FastImageGrid from './FastImageGrid'
import DefaultImageGrid from './DefaultImageGrid'
const Tab = createBottomTabNavigator()
YellowBox.ignoreWarnings([
'Warning: isMounted(...) is deprecated',
'Module RCTImageLoader',
])
const App = createBottomTabNavigator({
fastImageExample: {
screen: FastImageExamples,
},
image: {
screen: DefaultImageGrid,
},
fastImage: {
screen: FastImageGrid,
},
})
export default createAppContainer(App)
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="FastImage Example"
component={FastImageExamples}
options={{
tabBarIcon: props => (
<Icon name="ios-information-circle" {...props} />
),
}}
/>
<Tab.Screen
name="Image Grid"
component={DefaultImageGrid}
options={{
tabBarIcon: props => (
<Icon name="ios-image" {...props} />
),
}}
/>
<Tab.Screen
name="FastImage Grid"
component={FastImageGrid}
options={{
tabBarIcon: props => (
<Icon name="ios-photos" {...props} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
}
ReactNativeFastImageExample/src/withCacheBust.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
import uuid from 'uuid/v4'
import { v4 as uuid } from 'uuid'
export default BaseComponent => {
class WithCacheBust extends Component {