Blocks App CSS

Blocks App CSS is a utility-first CSS framework for React Native that allows you to use className props on React Native components for quick and easy styling.

Installation

yarn add blocks-app-css

Usage

After installation, import 'blocks-app-css' at the top of your entry file (usually index.js or App.js):

import 'blocks-app-css';
import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View className="flex-1 items-center justify-center bg-blue-500">
        <Text className="text-xl text-white">Hello, Blocks App CSS!</Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

Custom Styles

To add custom styles, create a blocks.config.js file in your project root:

module.exports = {
  theme: {
    extend: {
      'custom-class': { backgroundColor: '#ff0000' }
    }
  }
};

Available Classes

Here are some of the default classes available:

• flex-1: { flex: 1 }
• items-center: { alignItems: 'center' }
• justify-center: { justifyContent: 'center' }
• bg-blue-500: { backgroundColor: '#3b82f6' }
• text-xl: { fontSize: 20 }
• text-white: { color: '#ffffff' }

You can add more in the src/defaultStyles.js file of the package or in your blocks.config.js file.

License

MIT