Skip to main content

native

@morfeo/native package brings to React Native the morfeo's ecosystem

Installation

with npm:

npm install @morfeo/native

or yarn:

yarn add @morfeo/native

Usage

Just like @morfeo/react, the API of this package is the same as @morfeo/hooks, the main differences between @morfeo/react and @morfeo/native are related to how the parsers converts style objects to valid style for React Native, for example in @morfeo/native you cannot use any pseudo element/class, and also, shadows output is different (shadowOffset, shadowColor, shadowOpacity and shadowRadius instead of boxShadow)

import { View, ViewProps } from 'react-native';
import { useStyle, Style } from '@morfeo/native';

type Props = Omit<ViewProps, 'style'> & {
style?: Style;
};

const CustomView: React.FC<Props> = ({ ...props, style }) => {
const parsedStyle = useStyle(style);
return <View {...props} style={parsedStyle} />;
};

const App = () => {
return (
<CustomView
style={{
bg: 'primary',
px: 'm',
corner: 's',
shadow: 'strong',
}}
/>
);
};