Neurotic Programmer Masquerade

    @aesthetic/react-native
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.1 • Public • Published

    Aesthetic - React Native Integration

    Build Status npm version npm deps

    Provides styles for React Native components through hook or HOC based APIs. Built around the powerful Aesthetic core library.

    import React from 'react';
    import { Pressable, PressableProps } from 'react-native';
    import { createComponentStyles, useStyles } from '@aesthetic/react-native';
    
    export const styleSheet = createComponentStyles((theme) => ({
    	button: {
    		flex: 1,
    		flexWrap: 'nowrap',
    		alignItems: 'center',
    		width: 'auto',
    		padding: theme.tokens.spacing.df,
    	},
    
    	button_block: {
    		width: '100%',
    	},
    }));
    
    export interface ButtonProps extends PressableProps {
    	children: React.ReactNode;
    	block?: boolean;
    }
    
    export default function Button({ children, block = false, ...props }: ButtonProps) {
    	const sx = useStyles(styleSheet);
    
    	return (
    		<Pressable {...props} style={sx('button', block && 'button_block')}>
    			{children}
    		</Pressable>
    	);
    }

    Features

    • Hook and HOC based APIs for styling components, accessing themes, and handling directionality.
    • Element level style sheets and nested themes.
    • First-class directionality support (RTL, LTR).

    Requirements

    • React 17+
    • React Native 0.64+

    Installation

    yarn add @aesthetic/react-native react react-native
    

    Documentation

    https://aestheticsuite.dev/docs/react-native

    Install

    npm i @aesthetic/react-native

    DownloadsWeekly Downloads

    30

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    34.4 kB

    Total Files

    17

    Last publish

    Collaborators

    • milesj