How to use Breakpoints?

[remon-nashid]

I get a warning while using Breakpoints, I guess I don't know how to use them properly:

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Breakpoints } from 'carbon-ui'

const styles = {
  base: {
    fontSize: 12,
    [Breakpoints.xl]: {
      // Font size should be 24 on Desktop.
      fontSize: 24,
    }
  }
}

class App extends Component {
  render() {
    return (
      <Text style={styles.base}>
        Clockworks
      </Text>
    );
  }
}

export default App;

Gives the warning:

Warning: Unsupported style property @media (min-width: 1600px). Did you mean @media (minWidth: 1600px)? Check the render method of `Text`.

Any clues?

[tuckerconnelly]

Use css prop instead of style 🙂 On Sun, Jan 29, 2017 at 4:00 PM Remon Georgy notifications@github.com wrote:

I get a warning while using Breakpoints, I guess I don't know how to use them properly:

import React, { Component } from 'react'; import { Text } from 'react-native'; import { Breakpoints } from 'carbon-ui'

const styles = { base: { fontSize: 12,

  // Font size should be 24 on Desktop.
  fontSize: 24,
}

} }

class App extends Component { render() { return (

Clockworks

);

} }

export default App;

Gives the warning:

Warning: Unsupported style property @media (min-width: 1600px). Did you mean @media (minWidth: 1600px)? Check the render method of Text.

Any clues?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tuckerconnelly/carbon-ui/issues/22, or mute the thread https://github.com/notifications/unsubscribe-auth/AEJcmkYnppulXNa0cUDxG66_UnBA34Jzks5rXP3sgaJpZM4Lw5_U .

[remon-nashid]

Thanks for your quick response @tuckerconnelly!

I confirm that changing style prop to 'css' silents the warning. However, the property which was applying properly as a style, doesn't seem to apply anymore, i.e Text component now has default inherited font-size (16px) instead of desktop size (24px) or even the default one (12px).

[tuckerconnelly]

Ahh, need the Uranium HOC around App. Check uranium docs On Sun, Jan 29, 2017 at 4:42 PM Remon Georgy notifications@github.com wrote:

Thanks for your quick response @tuckerconnelly https://github.com/tuckerconnelly!

I confirm that changing style prop to 'css' silents the warning. However, the property which was applying properly as a style, doesn't seem to apply anymore, i.e Text component now has default inherited font-size (16px) instead of desktop size (24px) or even the default one (12px).

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/tuckerconnelly/carbon-ui/issues/22#issuecomment-275948593, or mute the thread https://github.com/notifications/unsubscribe-auth/AEJcmt2B7C7rMS-pZc3V1wNTx0yWeANEks5rXQfEgaJpZM4Lw5_U .

[remon-nashid]

Nice! wrapping App with Uranium fixed it. Wasn't obvious in Carbon-ui docs if you ask me ;).

Closing this issue.