StyleSheet API

The StyleSheet API works similarly to the React Native StyleSheet API, but with added support for advanced features like nested styles, mixins, and more powerful shorthand properties.

This allows you to structure styles in a more intuitive and maintainable way, especially for complex components.

Creating a StyleSheet object

Import StyleSheet from @bibliolabs/react-native-fluffle and use its own create method to define your styles.

import { StyleSheet } from '@bibliolabs/react-native-fluffle';

const styles = StyleSheet.create({
  modal: {
    wrapper: {
      display: 'flex',
      padding: 16,
    },

    title: {
      fontSize: 24,
      fontWeight: 'bold',
    },

    button: {
      active: {
        backgroundColor: 'blue',
      },

      inactive: {
        backgroundColor: 'gray',
      },
    },
  },
});

Using styles

Apply styles using the returned object. Each key corresponds to a style definition.

<View style={styles.modal.wrapper}>
  <Text style={styles.modal.title}>Hello</Text>

  <Button
    onPress={handlePress}
    title="Submit"
    style={active ? styles.modal.active : styles.modal.inactive}
  />
</View>

Best practices

• Keep styles small and reusable.
• Use descriptive names for style keys.
• Avoid empty style objects.
• Group related styles together.