React Native Call Load Different CSS Style on View Component

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.

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.

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 .

4. Now create a Root View in render’s return block.

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.

See the below screenshot to understand all this works :

6. Now create all the CSS Style classes.

7. Complete source code for App.js File :

Screenshot in Android device :

Load Different CSS StyleScreenshot in iOS device :

2 Comments

  1. It is nice. So by using this can we make themes for an app and in UI we can provide options to change the theme?

Leave a Reply

Your email address will not be published. Required fields are marked *