this is Antika. I have started learning to code since a few days back, and am only familiar with HTML/CSS/JS, and basics of React
Developer Level: Beginner Project type & language: I am developing a Study planner app for myself, using React Native Expo.
Problem - I have mostly done my programming in traditional ways - HTML, CSS and JS. and have recently moved to advanced languages like React and flutter. How do I Import a list of multiple stylesheets, Like we do in HTML, in react native projects
THESE ARE THE INDIVIDUAL CSS FILES-
<link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/vendor/font-awesome.css">
<link rel="stylesheet" href="assets/css/vendor/slick.css">
<link rel="stylesheet" href="assets/css/vendor/slick-theme.css">
<link rel="stylesheet" href="assets/css/vendor/base.css">
<link rel="stylesheet" href="assets/css/plugins/plugins.css">
<link rel="stylesheet" href="assets/css/style.css">
I am using Expo for this project.
I am still a newbie in React Native and Expo, and still learning about the different features and possible syntax. And I can use any help I get.
Its better to think of styling in react native as a different animal than css. Sort of similar syntax, but different values (mostly), and a bit different way of using them.
In your example you are importing all styles to be used globally, any html can now use those styles.
In react, it's more common to grab what you need when you need it.
For example, if I want to have a style that turns text red I could have a file like
//myStyles.js
export const MyStyles = StyleSheet.create({
redText: {
color: 'red',
},
});
And then in any file you want to use redText
import {MyStyles} from "/path/to/myStyles"
//...other code
<Text style={MyStyles.redText}>this is red </Text>
//... other code