Introducing @akalli/components smart components for React Native with CSS style like

@akalli/components is a framework for React Native, of smart components and form validations. You can consider it to be a child of chakra-ui/native-base ideas with styled-components.

Enough talk, just an example can make this clear lol :).

import { Text, View } from "@akalli/components";export const Component = memo((props: IPropsHeader) => {  return (    <View _style={styles.view}>      <Text _style={styles.text}>My text here</Text>      <Text _style="color: blue;">Inline styles support too!</Text>    </View>  );});const styles = {  view: `    height: 100px;    background-color: red;    width: 100%;  `,  text: `    color: white;    font-size: 24px;  `,};

You can put your style inline or call it from a const or object. Under the hood, all is converted to styled-components.

Installation

npm install @akalli/components styled-components react-native-svg yup

Usage

The special props associated to this component lib are identified with _. Every time you see a prop with _ it means is one of our library, anything else is just the same as react-native. Of course thanks to typescript you can just press _ in a component to see what reserves to use.

Components

Special Views

• View - The same as View in RN.
• HSection and VSection - are views but with orientation designated and also more semantic.
• ScrollView - The same as ScrollView in RN.
• Center, HCenter and VCenter - Views with different centralizing style.
• Show - A view with a condition logic, good to make more obvious and semantic conditional rendering, it includes _fallback prop to the false case.

Lists

• FlatList - The same as FlatList.
• SectionList - The same as SectionList.

Input

• TextInput - The same as TextInput in RN.
• Input - An input that works with a validation hook useMyForm(that has integration with yup).

Others

• Header - An easier way to implement a header with an icon.

Theming and variants

const initialTheme = {  colors: {},  fontSizes: {},  variants: {    viewBgRed:`      background-color: red;    `  }}<MyThemeProvider theme={initialTheme}>  <View _variant='viewBgRed'>   <Text>Hey coders!</Text>  </View></MyThemeProvider>

Hooks

• useMyStyle - This hook is used to dynamic styles. It allows you to style dynamically without causing a re-rendering.

// This will only be called again when lang changes. const changeLangButtonStyle = useMyStyle(styles.changeLangButton(lang), [    lang,  ]);

• useMyStyledComponent - With this you can create your own components using our philosophy.

• useMyTheme - This allows you to access our theme. To be used it needs to wrap your app with our MyThemeProvider and feed theme prop.

• useMyForm - This hook is used for form validation and has integration with yup.
  

const schema = yup.object().shape({  name: yup    .string()    .min(5, "put at least 5 letters")    .required("Name is required"),  email: yup.string().email("Not valid email").required("Email is required"),}); const { register, handleSubmitForm } = useMyForm({ schema });  <Input          _variant="inputForm"          _register={register}          _key="name" // This key must be the same as yup schema          _label="Name"          _placeholder="Seu nome"          _customStyles={styles.inputDataClient}          _colors={{            main: "#7a7a7a",            error: "#f5427b",          }}        />       ...

const styles = {   inputDataClient: {    label: `      font-size: 20px;       text-align: left;    `,    input: `      font-size: 18px;       padding-left: 15px;       height: 40px;      border-radius: 8px;      color: #A7A7A8;    `,    container: `      margin-top: 20px;       align-items: flex-start;    `,  },}

This project independent but also is part of much larger expo template package with easy installation in npx.

Meet: @akalli/create-akalli-app

It is all open source at GitHub. Checkout, and if any doubts or troubles you can create an issue or reach me at my e-mail [email protected].