agustito37

import { GlobalStyles } from 'react-native-use-styles';

GlobalStyles({
  constants: {
    white: '#ffffff',
    black: '#000000',
    grey: '#adadad'
  },
  container: {
    flex: 1,

agustito37

import { Styles } from 'react-native-use-styles';

export default Styles({
  computed: {
    disabled: ([isDisabled]) => ({ color: isDisabled ? '$grey' : '$black' })
  },
  content: '.container pd:horizontal:10',
  contentText: { fontSize: 16 }
});

agustito37

import { useState } from 'react';
import useStyles from './styles';

const Component = () => {
  const [isDisabled, setDisabled] = useState(false);
  const s = useStyles([isDisabled]);
  
  return (
    <View style={s`.content`}>
      <Text style={s`.contentText &disabled`}>Hello World!</Text>

agustito37

import { useState } from 'react';
import { GREY_COLOR, BLACK_COLOR, WHITE_COLOR } from './globalStyles';
import { styles } from './styles';

const Component = () => {
  const [isDisabled, setDisabled] = useState(true);
  
  return (
    <View style={styles.content}>
      <Text style={[

agustito37

import { GREY_COLOR } from './globalStyles';
import { styles } from './styles';

const Component = () => {
  return (
    <View style={styles.content}>
      <Text style={{ color: GREY_COLOR }}>Hello World!</Text>
    </View>
  );
};

agustito37

import { globalStyles, GREEN_COLOR } from './globalStyles';
import Stylesheet from 'react-native';

export const styles = Stylesheet.create({
  content: {
    ...globalStyles.container,
    backgroundColor: GREEN_COLOR
  }
});

agustito37

export const RED_COLOR = '#ff0000';
export const GREEN_COLOR = '#00ff00';
export const BLUE_COLOR = '#0000ff';

export const globalStyles = {
  container: {
    flex: 1,
    flexDirection: row,
    backgroundColor: RED_COLOR
  }

agustito37

import { BLUE_COLOR } from './globalStyles';
import { styles } from './styles';

export default () => {
  return (
    <View style={styles.local}>
      <Text style={{ color: BLUE_COLOR }}>Hello World!</Text>
    </View>
  );
};