In react native mobile app development language all the design(View) is created using Custom Style CSS(Caching Style Sheet) class. Every component has its unique style class like we did in JavaScript and HTML language. By default we would only call 1 style at a time on a View or Component, But in this tutorial we would going to create a react native app with Dynamic CSS Style loading functionality and Load Different CSS Style on button click using State and Ternary operator at application run time without closing the app.
Contents in this project Load Different CSS Style on View Component :
1. Import StyleSheet, View and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button} from ‘react-native’;
|
2. Create constructor() in your class and inside it create a State named as CallStyleState. Now we would set the default value of CallStyleState is true.
|
1
2
3
4
5
6
7
8
9
10
11
|
constructor(){
super();
this.state={
CallStyleState : ‘true’
}
}
|
3. Create a function named as LoadDifferentStyle() . We would call this function on Button onPress event. In this function we would check the CallStyleState value is false .
|
1
2
3
4
5
6
7
8
9
|
LoadDifferentStyle =()=>
{
this.setState({
CallStyleState: false
})
}
|
4. Now create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
5. Create another View in Root View. Now we would call both CSS styles using Ternary operator. Now using the Ternary operator we would check the state value === true. If the state value is true then it will execute the first part and if the state value is false then it will execute the second part. Now create a Button component after the View and call the LoadDifferentStyle() function on button onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
<View style={(this.state.CallStyleState === true ? styles.ViewStyle1 : styles.ViewStyle2)} />
<Button title=“Call Another CSS Style” onPress={this.LoadDifferentStyle} />
</View>
);
}
|
See the below screenshot to understand all this works :
6. Now create all the CSS Style classes.
|
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
|
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
alignItems: ‘center’,
flex:1,
margin: 10
},
ViewStyle1 : {
width: 100,
height: 100,
backgroundColor : ‘#00BCD4’,
marginBottom : 20
},
ViewStyle2 : {
width: 100,
height: 100,
backgroundColor : ‘#4CAF50’,
marginBottom : 20
}
});
|
7. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button} from ‘react-native’;
export default class MainActivity extends Component {
constructor(){
super();
this.state={
CallStyleState : true
}
}
LoadDifferentStyle =()=>
{
this.setState({
CallStyleState: false
})
}
render() {
return (
<View style={styles.MainContainer}>
<View style={(this.state.CallStyleState === true ? styles.ViewStyle1 : styles.ViewStyle2)} />
<Button title=“Call Another CSS Style” onPress={this.LoadDifferentStyle} />
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
alignItems: ‘center’,
flex:1,
margin: 10
},
ViewStyle1 : {
width: 100,
height: 100,
backgroundColor : ‘#00BCD4’,
marginBottom : 20
},
ViewStyle2 : {
width: 100,
height: 100,
backgroundColor : ‘#4CAF50’,
marginBottom : 20
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native User Registration using PHP MySQL Database PART-2- Writing App Code
React Native Disable Hide ScrollBar ScrollIndicator in ScrollView
React Native Realm Database Insert Update Delete View CRUD Operations iOS Android Tutorial
How to Create Custom Trapezoid Shape View in React Native
React Native Add Items to ScrollView using Loop Method iOS Android
