Native UI is a react native UI library that comes with themed components built on top of default react native components. All components have been tested to work on Android, IOS and Web (React Native Web).
npm install react-native-native-ui- [x] High Performant 📈
- [x] Vast Components 💯
- [x] Minimal Dependencies 🛠️
- [x] Cross Platform 📱
- [x] Blazingly Fast 🚀
npm install react-native-native-ui
- Install dependencies
npm install react-native-vector-icons@10.2.0 @hookstate/core
- Wrap your App with the UI Context Provider
import { UIProvider } from 'react-native-native-ui';function App({ children, ...props })
{
return
{children}
}
- Start using the various components
!Alt text
import { View, VStack, Button, HStack, Icon, Input, Text,
Card, Colors, Divider, UIProvider, useMessage, Select, Radio } from 'react-native-native-ui';function App()
{
const { showMessage } = useMessage();
return (
Heading
Key text
Subtitle
placeholder='username'
error='Invalid username!'
/>
rightElement={
onPress={()=>{
showMessage({ title: 'Test', duration: 2000, status: 'error' });
showMessage({ title: 'Test 2', duration: 2000 });
}}
/>
{}} />
)
}
Components
$3
- Box
- View
- HStack
- VStack
- Card
- Modal
- Divider$3
- Text
- Button
- Icon (Uses react-native-vector-icons)
- IconButton
- Checkbox
- Radio
- Input
- Image$3
- Select
- Avatar
- OverlaySpinner
- Accordion$3
This library also comes with a built-in notification management system and can be utilized with hook.
This system uses a message queue and shows notifications one after another using Toasts (can be modified to use custom render method)
`
import { useMessage } from 'react-native-native-ui';function Component(props)
{
const { showMessage } = useMessage();
useEffect(() => {
showMessage({ title: 'Message title', text: 'Message body', status: 'error', duration: 2000 });
}, []);
}
$3
This project uses the following color scheme to perform all styling:
- 3 main colors (primary, secondary, tertiary)
- 3 colors of statuses (success, warning, error)
- 5 shades of white to black (white, light, grey, dark, black)To override the colors simply import the Colors variable in your index file and edit the values as follows:
import { Colors } from 'react-native-native-ui';Colors.primary = 'blue';
Colors.secondary = 'red';
Colors.tertiary = 'purple';
$3
In your App file import and define the overrides to each individual component as follows
`
import { extendTheme } from 'native-ui';extendTheme({
Button: {
style: {
borderRadius: 25
},
variants: {
'ghost': {
paddingVertical: 20
}
}
},
Input: {
style: {
color: 'black',
}
}
});