🎉 Introducing @akalli/components smart components for React Native with CSS style like
Published: 2022-08-24 21:28:36

---
title: 🎉 Introducing @akalli/components smart components for React Native with CSS style like
published: true
description: @akalli/components smart components for React Native with CSS style like on top of styled-components
tags: 
# cover_image: https://miro.medium.com/max/318/1*7jRD5QhgARucFKvRHFxpOg.png
# Use a ratio of 100:42 for best results.
---

[@akalli/components](https://github.com/akallidreams/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 :).

```tsx
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](https://www.npmjs.com/package/yup)).


#### Others


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


### Theming and variants


```tsx
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.

```tsx
// 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.

```tsx
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",
          }}
        />
       ...
```
```tsx
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](https://github.com/akallidreams/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 dsilva@akalli.com.br.