GitHub

Uranium: CSS-in-js media queries for React Native and React by @TuckerConnelly

  • expanded }) } render () { return ( < View css = {[ styles .
  • Use the css property to add styles with media queries.
  • So width will animate from 20 to 40, and height will also animate from 20 to 40.
  • import React , { PropTypes } from ‘ react ‘ import { View } from ‘ react-native-universal ‘ import Uranium from ‘ uranium ‘ import Shadows from ‘ .
  • 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.

uranium – Universal css-in-js media queries for React Native and React

@fullstackreact: Uranium: CSS-in-js media queries for React Native and React by @TuckerConnelly

export default () => const styles = { base: { height: 120, ‘@media (min-width: 600px)’ : { height: 56, }, }, }

is set:

import matchMedia from ‘react-native-match-media’ // Only for native, will already be set on web global.matchMedia = matchMedia

property to add styles with media queries.

import React, { PropTypes } from ‘react’ import { View } from ‘react-native-universal’ import Uranium from ‘uranium’ import Shadows from ‘./styles/Shadows’ const MyComponent = () => < Text >Some text< / Text > < /View> export default Uranium(MyComponent) const styles = { base: { backgroundColor: ‘red’, ‘@media (min-width: 480px)’ : { backgroundColor: ‘blue’, } }, }

function to make animations simple in React Native, and to take into account the current screen size/media query when animating.

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)

to animate from 0 to 1.

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, } }

will also animate from 20 to 40.

This also animates opacity from ‘0.25’ to ‘1’.

, you could have specified specific values to animate:

(and vice versa).

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

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

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

GitHub