1
1
import React , { useState , useRef , useEffect } from 'react' ;
2
- import { View , Text , StyleSheet } from 'react-native' ;
2
+ import { View , Text , StyleSheet , Linking } from 'react-native' ;
3
3
import BetterImage from 'react-native-better-image' ;
4
4
5
5
const styles = StyleSheet . create ( {
@@ -9,6 +9,9 @@ const styles = StyleSheet.create({
9
9
justifyContent : 'center' ,
10
10
alignItems : 'center' ,
11
11
} ,
12
+ titleStyle : {
13
+ fontWeight : 'bold' ,
14
+ } ,
12
15
} ) ;
13
16
14
17
function useInterval ( callback : ( ) => unknown , delay : number ) {
@@ -32,31 +35,29 @@ function useInterval(callback: () => unknown, delay: number) {
32
35
} , [ delay ] ) ;
33
36
}
34
37
38
+ const ImageUrl = `https://images.unsplash.com/photo-1610746334198-e7525c63509c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&h=900` ;
39
+ const ThumbnailUrl = `https://images.unsplash.com/photo-1610746334198-e7525c63509c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&h=90` ;
40
+ const placeholderUrl = `https://unsplash.com/a/img/empty-states/photos.png` ;
41
+
35
42
const validSource = {
36
43
title : 'Valid Image & Thumbnail' ,
37
- image : ( ) =>
38
- `https://pyt-images.imgix.net/images/app/pretrip/australia.png?h=346.5&w=252&crop=fit&dpr=3&auto=format,compress,enhance&q=10&bust=${ Math . random ( ) } ` ,
39
- thumbnail : ( ) =>
40
- `https://pyt-images.imgix.net/images/app/pretrip/australia.png?h=346.5&w=252&crop=fit&dpr=0.1&auto=format,compress,enhance&q=10&bust=${ Math . random ( ) } ` ,
41
- placeholder : ( ) => `https://pyt-images.imgix.net/images/place-holder.png` ,
44
+ image : ( ) => `${ ImageUrl } &bust=${ Math . random ( ) } ` ,
45
+ thumbnail : ( ) => `${ ThumbnailUrl } &bust=${ Math . random ( ) } ` ,
46
+ placeholder : ( ) => placeholderUrl ,
42
47
} ;
43
48
44
49
const inValidSource = {
45
50
title : 'Invalid Image & Thumbnail' ,
46
- image : ( ) =>
47
- `https://pyt-images.imgix.net/images/app/pretrip/nowheretobefound.png?h=346.5&w=252&crop=fit&dpr=0.3&auto=format,compress,enhance&q=10&bust=${ Math . random ( ) } ` ,
48
- thumbnail : ( ) =>
49
- `https://pyt-images.imgix.net/images/app/pretrip/nowheretobefound.png?h=346.5&w=252&crop=fit&dpr=0.1&auto=format,compress,enhance&q=10&bust=${ Math . random ( ) } ` ,
50
- placeholder : ( ) => `https://pyt-images.imgix.net/images/place-holder.png` ,
51
+ image : ( ) => `not found` ,
52
+ thumbnail : ( ) => `not found` ,
53
+ placeholder : ( ) => placeholderUrl ,
51
54
} ;
52
55
53
56
const invalidImageOnlySource = {
54
57
title : 'Invalid Image & Valid Thumbnail' ,
55
- image : ( ) =>
56
- `https://pyt-images.imgix.net/images/app/pretrip/nowheretobefound.png?h=346.5&w=252&crop=fit&dpr=0.3&auto=format,compress,enhance&q=10&bust=${ Math . random ( ) } ` ,
57
- thumbnail : ( ) =>
58
- `https://pyt-images.imgix.net/images/app/pretrip/australia.png?h=346.5&w=252&crop=fit&dpr=0.1&auto=format,compress,enhance&q=10&bust=${ Math . random ( ) } ` ,
59
- placeholder : ( ) => `https://pyt-images.imgix.net/images/place-holder.png` ,
58
+ image : ( ) => `not found` ,
59
+ thumbnail : ( ) => `${ ThumbnailUrl } &bust=${ Math . random ( ) } ` ,
60
+ placeholder : ( ) => placeholderUrl ,
60
61
} ;
61
62
62
63
const sources = [ validSource , inValidSource , invalidImageOnlySource ] ;
@@ -82,7 +83,10 @@ function App() {
82
83
83
84
return (
84
85
< View style = { styles . container } >
85
- < Text > { imageSource . title } </ Text >
86
+ < Text > Various scenarios will change every 5 seconds</ Text >
87
+ < Text >
88
+ Scenario: < Text style = { styles . titleStyle } > { imageSource . title } </ Text >
89
+ </ Text >
86
90
< BetterImage
87
91
viewStyle = { style }
88
92
source = { {
@@ -96,6 +100,30 @@ function App() {
96
100
} }
97
101
resizeMode = { 'cover' }
98
102
/>
103
+ < Text >
104
+ Photo by{ ' ' }
105
+ < Text
106
+ style = { styles . titleStyle }
107
+ onPress = { ( ) =>
108
+ Linking . openURL (
109
+ 'https://unsplash.com/@vovcarrot?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
110
+ )
111
+ }
112
+ >
113
+ Vladimir Gladkov
114
+ </ Text > { ' ' }
115
+ on{ ' ' }
116
+ < Text
117
+ style = { styles . titleStyle }
118
+ onPress = { ( ) =>
119
+ Linking . openURL (
120
+ 'https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
121
+ )
122
+ }
123
+ >
124
+ Unsplash
125
+ </ Text >
126
+ </ Text >
99
127
</ View >
100
128
) ;
101
129
}
0 commit comments