Basics

Styling with Skyle is extremely easy.

Class Component
Functional Component

Add the @styled above the component.
Add styles = styles at the top of the component.
Import/create a StyleSheet from 'skyle'.
Use this.styles to style your components!

import { View } from 'react-native';
import { styled, StyleSheet } from 'skyle';

@styled
class App extends Component {
  styles = styles;

  render() {
    return <View style={this.styles.view} />;
  }
}

// Same as StyleSheet but with more customization!
const styles = StyleSheet.create((o) => ({
  view: {
    backgroundColor: o.theme.colors.primary,
    transition: ['backgroundColor', 500],
  },
}));

export default App;

If you don't have decorators enabled, you can also pass the component through a function:

import { View } from 'react-native';
import { styled, StyleSheet } from 'skyle';

class App extends Component {
  styles = styles;

  render() {
    return <View style={this.styles.view} />;
  }
}

// Same as StyleSheet but with more customization!
const styles = StyleSheet.create((o) => ({
  view: {
    backgroundColor: o.theme.colors.primary,
    transition: ['backgroundColor', 500],
  },
}));

export default styled(App);

Use the useStyles hook to access computed styles.
Import/create a StyleSheet from 'skyle'.
Use the hook's return value to style your components!

import { View } from 'react-native';
import { useStyles, StyleSheet } from 'skyle';

const App = (props) => {
  const s = useStyles(styles);

  return <View style={s.view} />;
};

// Same as StyleSheet but with more customization!
const styles = StyleSheet.create((o) => ({
  view: {
    backgroundColor: o.theme.colors.primary,
    transition: ['backgroundColor', 500],
  },
}));