amplifi-ui v0.0.89

Start

Tailwind based React Native components

This library is still on initial phase of development. Feel free to use it, but be aware that structural changes are still possible. If you want to use it, please, lock the imported version on your package.json file.

Key concepts of this library:

• Based on Tailwind CSS (through twrnc);
• Components can (and should) be extended and styled using twrnc styles, in a flexible way;
• Based on the KISS principle (Keep It Simple, Stupid);
• Makes props for accessibility mandatory;
• Simplifies hard tasks like, adding animations, easier;
• Tailwind CSS is doing great on the Web apps, we want to make the process of using Tailwind on the mobile as easy as on the web;
• Focus on reusability and flexibility;

If your project uses StartUI, please, let us know! We would love :heart: to have this information!

Notes

• This library was designed to work with Tailwind styles, through twrnc. For a complete documentation on how to use tailwinds using react native, please, check twrnc's documentation. Thank you, Jared!
• It's mandatory to have this packages installed on your project:
  • react;
  • react-native;
  • react-native-svg;
  • twrnc,
  • react-native-safe-area-context;

Components

BackgroundImage

Description:

This component creates a View with an image as background. Accepts jpeg and png files.

Samples

Try using Expo: https://snack.expo.dev/@paulorieck/startui---backgroundimage?platform=ios

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Card, Button, H2, BackgroundImage } from 'startui';

import Background from './assets/pexels-max-ravier-5589102.jpg';

import tw from './services/tw';

export default function App() {
  return (
    <BackgroundImage
      tw={tw}
      mask="bg-black/40"
      image={Background}
    >
      <View>
        <Card tw={tw} style={tw`mt-10 mx-4`}>
          <H2 tw={tw}>You see a Background Image with a Mask</H2>
        </Card>
      </View>
    </BackgroundImage>
  );
}

Props:

Button

Description:

This is a clickable component and can execute functions passed as an argument (onPress). Accepts icons and texts as parameters.

Samples

Try using Expo: https://snack.expo.dev/@paulorieck/startui---button?platform=ios

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Card, Button, H2 } from 'startui';

import RightIcon from './icons/arrow-right-white';

import tw from './services/tw';

export default function App() {
  return (
    <View style={tw`p-2 mt-10`}>
      <Card tw={tw} style={tw`bg-gray-100 mb-4`}>
        <H2 tw={tw} style={tw`pb-2`}>Button Vanilla</H2>
        <Button tw={tw} onPress={() => console.log('You clicked on me!')}>Click Me</Button>
      </Card>
      <Card tw={tw} style={tw`bg-gray-100 mb-4`}>
        <H2 tw={tw} style={tw`pb-2`}>Button Primary</H2>
        <Button tw={tw} type="primary" onPress={() => console.log('You clicked on me!')}>Click Me</Button>
      </Card>
      <Card tw={tw} style={tw`bg-gray-100 mb-4`}>
        <H2 tw={tw} style={tw`pb-2`}>Button Secondary</H2>
        <Button tw={tw} type="secondary" onPress={() => console.log('You clicked on me!')}>Click Me</Button>
      </Card>
      <Card tw={tw} style={tw`bg-gray-100 mb-4`}>
        <H2 tw={tw} style={tw`pb-2`}>Button With Icon on The Right</H2>
        <Button tw={tw} onPress={() => console.log('You clicked on me!')} iconRight={RightIcon}>Click Me</Button>
      </Card>
      <Card tw={tw} style={tw`bg-gray-100 mb-4`}>
        <H2 tw={tw} style={tw`pb-2`}>Button With Customized TailwindCSS</H2>
        <Button
          tw={tw}
          onPress={() => console.log('You clicked on me!')}
          style={tw`bg-green-700 rounded-full`}
          textStyle={tw`text-gray-100 font-bold text-2xl`}
        >
          Click Me
        </Button>
      </Card>
    </View>
  );
}

Props:

Card

Description:

This is a div that has a shadow around it and rounded corners.

Samples

Try using Expo: https://snack.expo.dev/@paulorieck/startui---card?platform=ios

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Card, Button, H2, BackgroundImage, Paragraph } from 'startui';

import Background from './assets/pexels-max-ravier-5589102.jpg';

import tw from './services/tw';

export default function App() {
  return (
    <BackgroundImage
      tw={tw}
      mask="bg-black/40"
      image={Background}
    >
      <View>
        <Card tw={tw} style={tw`mt-10 mx-4`}>
          <H2 tw={tw}>This is the vanilla Card element</H2>
          <Paragraph tw={tw}>Just some fake content to show how it looks like!</Paragraph>
          <Paragraph tw={tw}>Some more content!</Paragraph>
        </Card>
        <Card tw={tw} style={tw`mt-10 mx-4 border-2 border-dashed border-blue-400 bg-blue-100`}>
          <H2 tw={tw}>This is a customized Card element</H2>
          <Paragraph tw={tw}>Just some fake content to show how it looks like!</Paragraph>
          <Paragraph tw={tw}>Some more content!</Paragraph>
          <Paragraph tw={tw}>As you see, you are free to do a lot of different things!</Paragraph>
        </Card>
      </View>
    </BackgroundImage>
  );
}

Props:

Charts

VerticalBars

Description:

This component renders vertical bars charts

Samples

Try using Expo: https://snack.expo.dev/@paulorieck/startui---charts---vertical-bars?platform=ios

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import { Card, Button, H2, VerticalBars } from 'startui';
import {Data as VerticalBarsData} from 'startui/lib/esm/components/Charts/VerticalBars';

import tw from './services/tw';

const chartData = {
  values: {
    '6': {
      Sales: {amount: 200000, transactions: 20},
      Auths: {amount: 20000, transactions: 20},
      'Returns / Refunds': {amount: 20000, transactions: 20},
    }, // 290k
    '12': {
      Sales: {amount: 150000, transactions: 30},
      Auths: {amount: 100000, transactions: 30},
      'Returns / Refunds': {amount: 40000, transactions: 30},
    }, // 290k
    '18': {
      Sales: {amount: 160000, transactions: 40},
      Auths: {amount: 40000, transactions: 40},
      'Returns / Refunds': {amount: 60000, transactions: 40},
    }, // 260k
    '24': {
      Sales: {amount: 140000, transactions: 50},
      Auths: {amount: 50000, transactions: 50},
      'Returns / Refunds': {amount: 60000, transactions: 50},
    }, // 250k
  },
} as VerticalBarsData;

const windowWidth = Dimensions.get('window').width;

export default function App() {
  return (
    <View style={tw`flex-1 p-2 mt-10 bg-gray-400`}>
      <Card tw={tw} style={tw`bg-gray-100 mb-4 mt-8`}>
        <H2 tw={tw} style={tw`pb-2`}>Vertical Chart Sample</H2>
        <View style={tw`h-62`}>
          <VerticalBars
            tw={tw}
            style={tw`bg-white flex-1`}
            data={chartData}
            width={windowWidth - 84}
            height={210}
            scaleSize={400000}
            fontColor="#6B7280"
          />
        </View>
      </Card>
    </View>
  );
}

Props

CollapsibleModal

Description:

Samples

Props

Forms

Description:

Samples

Props

InputCurrency

Description:

Samples

Props

InputNumber

Description:

Samples

Props

InputPassword

Description:

Samples

Props

InputText

Description:

Samples

Props

H1

Description:

Samples

Props

HR

Description:

Samples

Props

Image

Description:

Samples

Props

Info

Description:

Samples

Props

Label

Description:

Samples

Props

LoadingRound

Description:

Samples

Props

ProgressSteps

Description:

Samples

Props

Spinner

Description:

Samples

Props

SwipeCarousel

Description:

Samples

Props

Amplifi Labs

This library is being developed by Amplifi Labs. To know more about our company, please, access our website.