https://github.com/tobua/naxos
React Native UI Library
https://github.com/tobua/naxos
library react-native ui ui-components
Last synced: 3 months ago
JSON representation
React Native UI Library
- Host: GitHub
- URL: https://github.com/tobua/naxos
- Owner: tobua
- Created: 2021-10-10T17:04:04.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-10T13:42:52.000Z (over 1 year ago)
- Last Synced: 2025-02-15T09:37:24.148Z (3 months ago)
- Topics: library, react-native, ui, ui-components
- Language: TypeScript
- Homepage: https://npmjs.com/naxos
- Size: 952 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# naxos
[](https://npmjs.com/naxos)
[](https://codesandbox.io/s/naxos-web-ypb2ny)
React Native UI components library.
- NavBar, TabBar
- Button, Text, Input, Dropdown, Content
- Icon, Avatar
- Intro, Tabs, AbsoluteButton
## Installation
```
npm i naxos
```
## Usage
```jsx
import React from 'react'
import { AppRegistry, SafeAreaView, ScrollView } from 'react-native'
import { NavBar, TabBar, Text, Content } from 'naxos'
const App = () => (
React Native UI Library
Home
Profile
)
AppRegistry.registerComponent('naxos', () => App)
```
## Components
### `NavBar`
```jsx
import { NavBar, Button, Text, Avatar } from 'naxos'
const Navigation = (
Back
naxos
)
```
The `key` property is required on the root child to indicate the desired position. It can also be placed on a `Fragment` or a `View` wrapping multiple other elements.
### `TabBar`
```jsx
import { TabBar } from 'naxos'
const Tab = ({ label, active }) => (
{label}
)
const tabBar = (
console.log(key)}>
)
```
### `Button`
By default the button will appear as text in the `Color.interact` color to indicate a possible action.
```jsx
const textButton = alert('clicked')} />
const customButton = (
alert('clicked')}>
Custom button content
)
```
### `Text`
```jsx
const regularText = Regular text.
const largeText = Hello title.
const boldText = Bold and important text.
```
### `Input`
```jsx
import { Input } from 'naxos'
const regularInput =
```
### `Dropdown`
```jsx
import { Dropdown } from 'naxos'
const simpleDropdown = (
alert(option)} />
)
```
### `Content`
Wraps content with `Space.medium` to the side and `Space.small` for top and bottom.
```jsx
import { Content, Button } from 'naxos'
const WrappedButton = (
alert('Hello World')} />
)
```
### `Icon`
```jsx
import { Icon } from 'naxos'
const backPointer =
const hamburgerMenu =
```
### `Avatar`
```jsx
import { Avatar } from 'naxos'
import profileImage from './some-image.png'
const smallAvatar =
const customImage =
```
### `Intro`
```jsx
import { Intro, Text } from 'naxos'
const Slides = (
setDone(true)}>
First Slide
Second Slide
)
```
### `Tabs`
```jsx
import { Tabs } from 'naxos'
const tabs = (
Home Content
Profile Content
About Content
)
```
### `AbsoluteButton`
```jsx
import { AbsoluteButton } from 'naxos'
const Slides = (
)
```
## Style
The plugin includes helper values for `Color`, `Space` and `Font` that are shared with the build in components and can also be configured as shown in the next paragraph.
The default styles used by the built-in components can be inspected and extended to allow for significant customization.
```jsx
import { Color, Space, Font, Button } from 'naxos'
const buttonStyles = Button.createStyles()
buttonStyles.wrapper.padding = Space.small
buttonStyles.wrapper.backgroundColor = Color.highlight
buttonStyles.wrapper.borderRadius = Space.tiny
export const CustomizedButton = ({ label, ...props }) => (
{label}
)
```
## Configuration
```jsx
import { AppRegistry } from 'react-native'
import { configure } from 'naxos'
import { App } from './App'
configure({
Color: {
interact: '#009695',
highlight: '#7e0ce1',
},
Space: {
medium: 25,
},
Font: {
bold: {
fontWeight: 700,
},
},
})
AppRegistry.registerComponent('app', () => App)
```