Uranium

Adds media-query support to css-in-js in React Native and React.

export default () => 

const styles = {
  base: {
    height: 120,
'@media (min-width: 600px)': {
  height: 56,
},
  },
}

iOS	Web

Also works with android and server-side rendering

This can be used with react-native-web for a basic write-once, run-anywhere React Native app.

Installation

If using in React Native, install react-native-match-media

Make sure

global.matchMedia

import matchMedia from 'react-native-match-media'

// Only for native, will already be set on web
global.matchMedia = matchMedia

Then:

npm -S i tuckerconnelly/uranium

Usage

Use the

css

Then wrap your component in

Uranium

import React, { PropTypes } from 'react'
import { View } from 'react-native'
import Uranium from 'uranium'

import Shadows from './styles/Shadows'
const MyComponent = () =>
  
    Some text
  
export default Uranium(MyComponent)
const styles = {
  base: {
    backgroundColor: 'red',
'@media (min-width: 480px)': {
  backgroundColor: 'blue',
}
  },
}

animate() function

Uranium adds the

animate()

It supports the following signatures:

animate(from: Object, to: Object, on: Animated.AnimatedValue)
animate(props: Array, from: Object, to: Object, on: Animated.AnimatedValue)
animate(prop: string, from: number, to: number, on: AnimatedValue)

It expects the

AnimatedValue

Here it is used in a component:

import React from 'react'
import { View, Animated } from 'react-native'
import Uranium, { animate } from 'uranium'

class ExpandOnPress extends Component {
  state = { expanded: false }
  _expandAV = new Animated.Value(0)
  _toggleExpanded() {
    Animated.timing(this._expandAV, {
      toValue: this.state.expanded ? 0 : 1,
      duration: 300,
    })
this.setState({ expanded: !this.state.expanded })
  }
  render() {
    return (
      
    )
  }
}
export default Uranium(ExpandOnClick)
const styles = {
  base: {
    backgroundColor: 'blue',
  },
  notExpanded: {
    width: 20,
    height: 20,
  },
  expanded: {
    width: 40,
    height: 40,
  }
}

This will animate all the styles on

styles.notExpanded

styles.expanded

_expandAV

So

width

height

This also animates opacity from '0.25' to '1'.

If

styles.notExpanded

borderRadius

animate(['width', 'height'], styles.notExpanded, styles.expanded, this._expandAV)

...
styles = {
  notExpanded: {
    width: 20,
    height: 20,
    borderRadius: 2,
  },
  expanded: {
    width: 40,
    height: 40,
  }
}

Note! The

AnimatedValue

0

1

Inspiration

Many thanks to the creators of Radium who inspired this library.

In fact, the name is a play on Radium: Universal Radium = Uranium :)

Connect

Follow the creator on Twitter, @TuckerConnelly

License

MIT