https://github.com/suryakarmakar/reactnative-stylesheet
use inline, local/Internal, global/external style and pass multiple styles object
https://github.com/suryakarmakar/reactnative-stylesheet
Last synced: 7 months ago
JSON representation
use inline, local/Internal, global/external style and pass multiple styles object
- Host: GitHub
- URL: https://github.com/suryakarmakar/reactnative-stylesheet
- Owner: SuryaKarmakar
- Created: 2021-04-11T15:30:44.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-07-12T15:50:22.000Z (about 4 years ago)
- Last Synced: 2025-01-14T13:16:14.525Z (9 months ago)
- Language: JavaScript
- Size: 159 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native StyleSheet
## Inline Style :
Using Inline style, you just put any style property into double curly braces {{}} before style attribute
```js
This is Inline Style
```
## Local Style :
In Local style first import StyleSheet from 'react-native'
```js
import {StyleSheet} from 'react-native'
```
Then create a styles object with StyleSheet create method
```js
const styles = StyleSheet.create({
textStyle:{
color:'green',
fontSize:20
}
})
```
Now using styles object just pass the object value with dot '.' in to style attribute
```js
This is Local/Internal Style
```
## Global Style :
In Global style first create a Styles.js file and put your all styles into this file and also export as a default
```js
export default StyleSheet.create({
textStyle:{
color:'tomato',
fontSize:20
}
})
```
Or you can make diffrent diffrent style object and export.
```js
export const globalStyle = StyleSheet.create({
textStyle:{
color:'lightblue',
fontSize:20
}
})
```
Now using Global style into your component you can just import the Styles.js file and pass the object value
```js
import Styles from './Styles';
This is Global/External Style
import {globalStyle} from './Styles';
Another way to use GlobalStyles
```
## Multiple Style Object :
You can pass multiple styles object into style attribute, using array
```js
Use Multuple Style Object
```
## Usage
```
$ git clone https://github.com/SuryaKarmakar/React-Native-StyleSheet.git
$ cd React-Native-StyleSheet
$ npm install
$ npm run [web, android, ios]
```
## Run with Expo
```
$ expo start --[web, android, ios]
```