2

i am new to react native. I was wondering is there anyway to load CSS,Colors globally to all components and screens rather then importing in each screen.

I have one reusable stylesheet.js and colors.js which contain all global css and colors. stylesheet.js

'use strict'; import {StyleSheet} from 'react-native'; import colors from './colors'; module.exports = StyleSheet.create({ container:{ flex:1, }, alwaysred: { color:colors.txt_main, }, });

But now to use in components i need to import in every component. So i was wondering if there is more easy way to import the stylesheet and colors to all scrrens/components.

I tried to importing in index.js ,but then when i tried to access style property it saying style undefined Something like this

Index.js

import { AppRegistry } from 'react-native'; import stylesheet from './app/resources/styles/stylesheet'; import App from './app/App'; AppRegistry.registerComponent('newApp', () => App);

App.js

 <Text style={stylesheet.alwaysred}> New stylesheet imported globally </Text>

This giving error saying undefined stylesheet. I have folloed this Stackoverflow thread link to create global stylesheet

Improve this question
1
  • > it saying style undefined That's because you use different module implementations. You export in node.js style, but import it with implementation from standart. So, just export styles with export default instead of module.exports Commented May 15, 2018 at 8:33

2 Answers 2

Reset to default
4

Use global:

global.stylesheet = StyleSheet.create({ container:{ flex:1, }, alwaysred: { color:colors.txt_main, }, });
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Hey! This works, but it's really not the best practice. By defining variables on global makes it harder for other developers and tools like type checkers, bundlers etc. to use your code. If you must have a "global" style, it's usually a better idea to define a "theme.js" (or similar file) explicitly to import where you want to use it.
@jevakallio agreed, any global statement is very delicate to use. I prefer to use modules and "haste" module system, for example. But topic starter wants to get global access, I just helped)
Cool. Just wanted to log the comment here in case someone comes by later and sees the solution :)
@jevakallio yes i have a a file names stylesheet.js separetly and i am loading it globally rather then importing in each screen. Kirill answer is what i was looking for. thank you kirill :))
@user7747472 cool! Happy you found a solution for your problem. It's not really what you're supposed to do, but hey, the rules are made up and the points don't matter :)
1

The canonical React way of achieving this is creating your own styled, components. For example, if you wanted all the Text elements in your application to be red, you can define your own component for it:

// Text.js import { Text, StyleSheet } from 'react-native'; const StyledText = ({ style, ...props }) => ( <Text style={[styles.text, style]} {...props}></Text> ) const styles = StyleSheet.create({ text: { color: 'red' } }); export default StyledText;

And then you can use that text component where you'd normally use Text from react-native:

import Text from 'Text';

This is a little verbose, so often people use libraries like glamorous-native or styled-components to achieve the same effect.

// glamorous const MyStyledText = glamorous.text({ color: 'red' }); // styled-components const MyStyledText = styled.Text` color: red; `;
Improve this answer

1 Comment

Yes, i have seperate stylesheet js, but i dont like the idea of importing importing in each screen. Lets say i have 10 screen i need to load text.js in each 10 screen, but instead i wanted to make it global so all its variable accessible to all screen. Kilrlin ans is the one what i was looking . I like this method too. I will use it too

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.