11import React , { useState , useRef , useEffect } from 'react' ;
2- import { View , Text , StyleSheet } from 'react-native' ;
2+ import { View , Text , StyleSheet , Linking } from 'react-native' ;
33import BetterImage from 'react-native-better-image' ;
44
55const styles = StyleSheet . create ( {
@@ -9,6 +9,9 @@ const styles = StyleSheet.create({
99 justifyContent : 'center' ,
1010 alignItems : 'center' ,
1111 } ,
12+ titleStyle : {
13+ fontWeight : 'bold' ,
14+ } ,
1215} ) ;
1316
1417function useInterval ( callback : ( ) => unknown , delay : number ) {
@@ -32,30 +35,27 @@ function useInterval(callback: () => unknown, delay: number) {
3235 } , [ delay ] ) ;
3336}
3437
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+
3541const validSource = {
3642 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 ( ) } ` ,
43+ image : ( ) => `${ ImageUrl } &bust=${ Math . random ( ) } ` ,
44+ thumbnail : ( ) => `${ ThumbnailUrl } &bust=${ Math . random ( ) } ` ,
4145 placeholder : ( ) => `https://pyt-images.imgix.net/images/place-holder.png` ,
4246} ;
4347
4448const inValidSource = {
4549 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+ image : ( ) => `not found` ,
51+ thumbnail : ( ) => `not found` ,
5052 placeholder : ( ) => `https://pyt-images.imgix.net/images/place-holder.png` ,
5153} ;
5254
5355const invalidImageOnlySource = {
5456 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 ( ) } ` ,
57+ image : ( ) => `not found` ,
58+ thumbnail : ( ) => `${ ThumbnailUrl } &bust=${ Math . random ( ) } ` ,
5959 placeholder : ( ) => `https://pyt-images.imgix.net/images/place-holder.png` ,
6060} ;
6161
@@ -82,7 +82,10 @@ function App() {
8282
8383 return (
8484 < View style = { styles . container } >
85- < Text > { imageSource . title } </ Text >
85+ < Text > Various scenarios will change every 5 seconds</ Text >
86+ < Text >
87+ Scenario: < Text style = { styles . titleStyle } > { imageSource . title } </ Text >
88+ </ Text >
8689 < BetterImage
8790 viewStyle = { style }
8891 source = { {
@@ -96,6 +99,30 @@ function App() {
9699 } }
97100 resizeMode = { 'cover' }
98101 />
102+ < Text >
103+ Photo by{ ' ' }
104+ < Text
105+ style = { styles . titleStyle }
106+ onPress = { ( ) =>
107+ Linking . openURL (
108+ 'https://unsplash.com/@vovcarrot?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
109+ )
110+ }
111+ >
112+ Vladimir Gladkov
113+ </ Text > { ' ' }
114+ on{ ' ' }
115+ < Text
116+ style = { styles . titleStyle }
117+ onPress = { ( ) =>
118+ Linking . openURL (
119+ 'https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
120+ )
121+ }
122+ >
123+ Unsplash
124+ </ Text >
125+ </ Text >
99126 </ View >
100127 ) ;
101128}
0 commit comments