Drop shadow effect is very common between developers. Drop shadow effect creates a consistent view just like the Parent View of drawing element. It is same as the real object but in the shadow form. So in this tutorial we would going to create a react native app with Create Drop Shadow Effect Text in both Android iOS applications using textShadowColor, textShadowOffset and textShadowRadius attributes of Text component in CSS Style.
Note: This project runs perfectly on both Android and iOS devices.
Contents in this project Create Drop Shadow Effect Text in React Native Android iOS App Example:
1. Import StyleSheet, View and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text } from ‘react-native’;
|
2. Create a Root Parent View in render’s return block. This would be our main View.
|
1
2
3
4
5
6
7
8
9
10
11
|
render()
{
return(
<View style = { styles.MainContainer }>
</View>
);
}
|
3. Create a Text component in Root View and call the TextShadowStyle CSS Style class on it. We have done all the Shadow settings in this class.
|
1
2
3
4
5
6
7
8
9
10
11
|
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={styles.TextShadowStyle}> Sample Shadow Text </Text>
</View>
);
}
|
4. Create 2 Style classes for View and Text component.
MainContainer : For Root Main View.
TextShadowStyle : To apply shadow effect on Text component.
- textShadowColor : Set the Shadow color of Text component.
- textShadowOffset : Set the Shadow offset.
- textShadowRadius : Set the Blur radius on drop shadow.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
TextShadowStyle:
{
textAlign: ‘center’,
fontSize: 30,
textShadowColor: ‘#E91E63’,
textShadowOffset: { width: 1, height: 4 },
textShadowRadius: 5
}
});
|
5. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text } from ‘react-native’;
export default class App extends Component<{}>
{
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={styles.TextShadowStyle}> Sample Shadow Text </Text>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
TextShadowStyle:
{
textAlign: ‘center’,
fontSize: 30,
textShadowColor: ‘#E91E63’,
textShadowOffset: { width: 1, height: 4 },
textShadowRadius: 5
}
});
|
Screenshot in Android device :
Screenshot in iOS device:
Also Read :
Custom Material Style Star Rating Bar component in React Native iOS Android
Hide Show View Text Component in React Native on button Click
React Native Check Text Input is Empty or Not Android iOS Tutorial
React Native Create App Intro Slider Welcome Walk-through Screen
React Native User Registration with Local PhpMyAdmin MySQL Database iOS Android Tutorial
