Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How i can use variables in stylesheet in React Native?

Tags:

I want to create general variable color in stylesheet, I created it as shown below, but it does not work.

'use strict';

import {Dimensions} from "react-native";

var React = require('react-native');

var { StyleSheet } = React;

var { PrimaryColor } = "#DDDDDD";

module.exports = StyleSheet.create({

title_post:{
padding: 20,
color: PrimaryColor
},

button_share:{
backgroundColor: PrimaryColor
}
like image 725
bdroid Avatar asked Apr 19 '18 20:04

bdroid


People also ask

Can I use CSS variables in React?

Css variables are supported in most browsers so in order to use css variables with React all we need to do is write some css. You can define css variables by using two hyphens, when you define the variable it is important to remember that whatever selector you use will be where the variable scope can exist.

How StyleSheet works in React Native?

React Native StyleSheet is a way of styling an application using JavaScript code, the main function of react native StyleSheet is concerned with styling and structuring of components in an application, all components of react native make use of a prop known as style, names and properties values work in a similar way as ...

What is the attribute used to declare a styles in React Native?

Style attributes React Native mostly use CSS attributes with camelCase instead of kebab-case for styling.

Can I use CSS modules in React Native?

Features. 🎉 You can share your CSS modules between React Native and React Web by using className property in React Native, and by using React Native for Web for the browser. 👌 Supports CSS, PostCSS, Sass, Less and Stylus.


1 Answers

This is destructuring assignmetn (invalid):

var { PrimaryColor } = "#DDDDDD";

It is used to extract values from an object:

var { a } = { a: 1, b: 2 }
console.log(a) // 1

This is variable declaration and assignment (what you want):

var PrimaryColor = "#DDDDDD";
like image 56
madox2 Avatar answered Oct 11 '22 14:10

madox2