@avi99/aui v0.1.5

@avi99/aui

A minimal ui library for react native

1.Installation

npm install @avi99/aui

2. Example

See exaple from here

3.Usage

import { Button } from '@avi99/aui';

const MyButton = () => {
    return (
        <Button 
            mode='flat' 
            onPress={() => console.log("clicked")} 
            style={{ width: 80 }} 
            title="Click Me!" 
        />
    )
}

4.Components

Button

import { Button } from '@avi99/aui';

export fuction App(){
    return (
        <Button 
            mode='flat' 
            onPress={() => console.log("clicked")} 
            title="Click Me!" 
        />
    )
}

Loader

import { Loader } from '@avi99/aui';

export fuction App(){
    return (
        <Loader 
           name='3-dots-blinking' 
           color={'#1C1678'} 
        />
    )
}

Switch

import { Switch } from '@avi99/aui';

export fuction App(){
    return (
        <Switch
           onChange={(state: Boolean) => setValue(state)} 
           value={value} 
        />
    )
}

Seperator

import { Seperator } from '@avi99/aui';

export fuction App(){
    return (
        <Seperator/>
    )
}

Progress Bar

import { ProgressBar } from '@avi99/aui';

export fuction App(){
    const [progress, setProgress] = React.useState<number>(0);
    return (
        <ProgressBar color={'purple'} value={progress} />
    )
}

OTP Input

import { OtpInput} from '@avi99/aui';

export fuction App(){
   return(
      <OtpInput length={5} onChange={(otp:String) => console.log(otp)} onComplete={(otp:String)=>console.log(otp)} />
   )
}

TextInput

import { TextInput } from '@avi99/aui';

export fuction App(){
   return(
      <TextInput 
         onChange={(text:String)=>console.log(text)} 
         placeholder={'Enter password'} 
         secured
      ></TextInput>
   )
}

Bottomsheet

current version does not support pan gestures yet.

import { BottomSheet,type SheetRef,Button } from '@avi99/aui';

export fuction App(){
    const sheetRef = React.useRef<SheetRef>(null);
    const openSheet = () => {
      sheetRef.current?.open()
    }
    const closeSheet = () => {
      sheetRef.current?.close()
    }
  
    return(
     <BottomSheet height={'90%'} ref={sheetRef} backdropColor={'red'} onClose={closeSheet}>
         <View style={{ height: '100%', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Button onPress={closeSheet} title={'close sheet'} mode='flat' />
         </View>
      </BottomSheet>


    )
}

methods

Portal

import { Portal,PortalProvider } from '@avi99/aui';

export function AppWrapper(){
     return(
        <PortalProvider>
            </App>
        </PortalProvider>
     )
}

function App(){
    const sheetRef = React.useRef<SheetRef>(null);
    const openSheet = () => {
      sheetRef.current?.open()
    }
    const closeSheet = () => {
      sheetRef.current?.close()
    }
  
    return(
     <Portal name="bottomsheet">
       <BottomSheet height={'90%'} ref={sheetRef} backdropColor={'red'} onClose={closeSheet}>
         <View style={{ height: '100%', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           <Button onPress={closeSheet} title={'close sheet'} mode='flat' />
         </View>
       </BottomSheet>
     </Portal>
    )
}

IconButton

import { IconButton } from '@avi99/aui';

export function App(){
   return(
     <IconButton onPress={() => console.log("pressed")} title={"Home"} icon='home' ripple={true} width={80} />
   )


}

License

MIT

Made with create-react-native-library