Hello friends, It’s been couple of days since I had posted a tutorial on my website. I’m a little busy these days because of new react native project on my company. I’ll discuss it later with you guys. So let’s get started for today. Today we would learn about a new background image zoom effect technique in react native. Friends sometimes we have seen in may mobile applications the background image is moving with zoom effect which looks pretty cool by the way. So in today’s tutorial we would learn about React Native Apply Auto Zoom on Background Image in Android iOS Example.
Contents in this project React Native Apply Auto Zoom on Background Image in Android iOS Example:
1. Open your project’s main App.js file and import useRef, useEffect, SafeAreaView, StyleSheet, View, Text, Image and Animated component.
|
1
2
3
|
import React, { useRef, useEffect } from ‘react’;
import { SafeAreaView, StyleSheet, View, Text, Image, Animated } from ‘react-native’;
|
2. Creating our main Export Default App component.
|
1
2
3
4
5
|
export default function App() {
}
|
3. Create a Constant named as width and height. We would use these constants in to define default image width height from where the animation will start.
|
1
2
3
|
const width = new Animated.Value(360);
const height = new Animated.Value(600);
|
4. Creating another two constants named as BackgroundIMAGE and ReactLOGO. In these we would define the background image URL and react native logo URL.
|
1
2
3
4
5
|
const BackgroundIMAGE =
‘/wp-content/uploads/2021/04/beach-scaled.jpg’;
const ReactLOGO =
‘/wp-content/uploads/2021/07/react_native_logo_new.png’;
|
5. Creating useEffect() method. As we all know it is works as Component did mount in functional component. In this method we would define the animation execution time and duration.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
useEffect(() => {
Animated.timing(
width,
{
toValue: 400,
duration: 500,
useNativeDriver: false,
},
).start();
Animated.timing(
height,
{
toValue: 800,
duration: 10000,
useNativeDriver: false,
},
).start();
}, []);
|
6. Creating return() method, Here first we would make the SafeAreaView component -> Root View component -> Animated.Image component and above it the Text and react logo.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.MainContainer}>
<Animated.Image
source={{ uri: BackgroundIMAGE }}
style={{
width: width,
height: height,
position: ‘absolute’,
}}
/>
<View style={{ alignItems: ‘center’ }}>
<Image source={{ uri: ReactLOGO }} style={ styles.logo } />
<Text style={styles.text}> React Native Apply Zoom Effect on Background Image </Text>
</View>
</View>
</SafeAreaView>
);
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
text: {
fontSize: 24,
textAlign: ‘center’,
color: ‘white’,
fontWeight: ‘bold’
},
logo: {
width: 250,
height: 250,
resizeMode: ‘contain’
},
});
|
8. Complete Source Code for App.js file :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
import React, { useRef, useEffect } from ‘react’;
import { SafeAreaView, StyleSheet, View, Text, Image, Animated } from ‘react-native’;
export default function App() {
const width = new Animated.Value(360);
const height = new Animated.Value(600);
const BackgroundIMAGE =
‘/wp-content/uploads/2021/04/beach-scaled.jpg’;
const ReactLOGO =
‘/wp-content/uploads/2021/07/react_native_logo_new.png’;
useEffect(() => {
Animated.timing(
width,
{
toValue: 400,
duration: 500,
useNativeDriver: false,
},
).start();
Animated.timing(
height,
{
toValue: 800,
duration: 10000,
useNativeDriver: false,
},
).start();
}, []);
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.MainContainer}>
<Animated.Image
source={{ uri: BackgroundIMAGE }}
style={{
width: width,
height: height,
position: ‘absolute’,
}}
/>
<View style={{ alignItems: ‘center’ }}>
<Image source={{ uri: ReactLOGO }} style={ styles.logo } />
<Text style={styles.text}> React Native Apply Zoom Effect on Background Image </Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
text: {
fontSize: 24,
textAlign: ‘center’,
color: ‘white’,
fontWeight: ‘bold’
},
logo: {
width: 250,
height: 250,
resizeMode: ‘contain’
},
});
|
Screenshots :-
Also Read :
Add Show Border Around Root Main Container View in React Native
React Native Custom Checkbox Component iOS Android Example
React Native Start Stop Device Vibration on Button Click Android iOS
How to change Image border width in React Native Tutorial
React Native Fade In Fade Out Opacity Animation Android iOS Example
