sevenapps-react-native-components v0.1.6

sevenapps-react-native-components

This library provides a set of React Native components ready to use in your projects.

Components

• Button
• Card
• Input
• CustomAlert
• Loading
• Icon
• CustomView
• Modal
• InitPage

Button

This component is a Button component.

import { Button } from 'sevenapps-react-native-components';

<Button text="Close" 
    textColor='white' 
    iconColor='white' 
    loadingColor='white' 
    buttonType="filled"
    onPress={() => {setShowModal(false)}} 
/>

Card

This component is a Card component.

import { Card } from 'sevenapps-react-native-components';

<Card />

Input

This component is a Input component.

import { Input } from 'sevenapps-react-native-components';

<Input 
    value={value} 
    setValue={setValue} 
    editable={true}  />

CustomAlert

This component is a CustomAlert component.

import { CustomAlert } from 'sevenapps-react-native-components';

<CustomAlert 
    showAlert={showAlert}
    setShowAlert={setShowAlert}
    title="Se ha guardado correctamente" 
    body={
    <Text>Se va a borrar el siguiente archivo</Text>
    } 
/>

Modal

This component is a Modal component.

<Modal 
    show={showModal}
    title="¿Estás Seguro?" 
    body={
        <Text>Body</Text>
    } 
    footer={
        <>
            <Button text="Open" onPress={() => {setShowModal(false)}} textColor='white' iconColor='white' loadingColor='white' buttonStyle="filled" iconName='tree'/>
            <Button text="Close" onPress={() => {}} />
        </>
    }/>

InitPage

This component is a InitPage component.

 <InitPage 
      overlayColor={"rgba(0, 0, 0, 0.5)"}
      top={
        <Text style={{ 
          fontSize: 50,
          fontWeight: 'light', 
          color: '#fff'}}>
          Planning your travel
      </Text>
      }
      body={
        <Text style={{ 
          fontSize: 20,
          fontWeight: 'light', 
          color: '#fff',
          backgroundColor: 'rgba(201, 17, 17, 0.5)'}}>
          Planning your travel
      </Text>
      }
      footer={
        <Button
          text="Get Started" 
          onPress={() => console.log('pressed')} 
          baseColor="#62795b" 
          textColor='#fff'
          />
      }
      imagePath={{
        uri: 'https://images.pexels.com/photos/586687/pexels-photo-586687.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
      }}
      
    />

Installation

You can install this library using npm or yarn:

npm install sevenapps-react-native-components

Usage

import { Button } from 'sevenapps-react-native-components';

<Button text="Close" 
    textColor='white' 
    iconColor='white' 
    loadingColor='white' 
    buttonType="filled"
    onPress={() => {setShowModal(false)}} 
/>