@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 feedtheme 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 dsilva@akalli.com.br.
Top comments (0)