❤
npm
Sign UpSign In

react-native-dynamic-stylesheet
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

build status

Intro

A dynamic stylesheet for react native, support typescript.

npm install react-native-dynamic-stylesheet --save

How to use

Just like react stylesheet, but need use build to generate stylesheet after use create method.

import DynamicStyleSheet from 'react-native-dynamic-stylesheet'
 
const styles = DynamicStyleSheet.create({
  container: {
    flex: 1
  }
}).build()
 
class Example extends React.Component {
  render () {
    return (
       <View style={styles.container}></View>
    )
  }
}
 

Usage

1. platform specific styles

import { StyleSheet } from 'react-native'
import DynamicStyleSheet from 'react-native-dynamic-stylesheet'
 
const RNStyles = StyleSheet.create({
  container: {
    ...Platform.select({
      android: {
        flex: 1
      },
      ios: {
        flex: 2
      }
    })
  }
})
 
// is same
 
const styles = DynamicStyleSheet.create({
  container: {
    android: {
      flex: 1
    },
    ios: {
      flex: 2,
    }
  }
}).build()

Then when application running at android device, container style flex will be 2, ios container style flex will be 1.

Do not need write Platform.select anymore.

2. dynamic styles

You can pass props at build method.

import { StyleSheet } from 'react-native'
import DynamicStyleSheet from 'react-native-dynamic-stylesheet'
 
const RNStyles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff'
  }
})
 
// build styles
const styles = DynamicStyleSheet.create({
  container: props => ({
    flex: 1,
    ...props.isTrue
      ? {
        backgroundColor: '#ffffff'
      }
      : {}
  })
}).build({ isTrue: true })

Readme

Keywords

Package Sidebar

Install

npm i react-native-dynamic-stylesheet

Repository

github.com/Lxxyx/react-native-dynamic-stylesheet

Homepage

github.com/Lxxyx/react-native-dynamic-stylesheet#readme

Weekly Downloads

19

Version

1.0.1

License

MIT

Last publish

Collaborators

  • lxxyx
Try on RunKit
Report malware