first-born

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes

Prerequisites

This module can only be used in a React Native app. To use it, you will need a React Native app with it's dependencies installed. The following modules need to be added as a dev dependency as well.

• create-react-class
• react-native-vector-icons

Installing

To install first-born run the following command in the terminal;

npm install --save @99xt/first-born

You will additionally require to install the following modules as well.

npm install --save create-react-class react-native-vector-icons

Follow this guide to configure react-native-vector-icons for your project.

No other steps are required to configure first-born separately for each platform (Android/iOS).

Development Testing

To test the repo, first clone it;

git clone https://github.com/99xt/first-born.git

Move into the folder;

cd first-born

Install dependencies;

npm install

And run the test script;

npm run test

Usage

Import components like this;

import { Button } from "@99xt/first-born";

Utils

Colors

Atoms

Text

<Text>Hello</Text>

Android

iOS

You can use any Text property and the following:

Icon

The All Icon components (all font styles) from react-native-vector-icons is used.

<Icon name='heart'/>

Android

iOS

You can use any TouchableOpacity property and the following:

Badge

Only accepts Text and Icon atoms and react-native Image .

<Badge>
    <Text>+1</Text>
</Badge>
<Badge color="red">
    <Icon name="heart" />
</Badge>

Android

iOS

You can use any View property and the following:

Thumbnail

An Image component that displays either a square or circular image.

<Thumbnail source={require("path/to/image.png")}/>

You can use any Image property and the following:

Button

Only accepts Text and Icon atoms and react-native Image .

<Button onPress={this.handleButtonClick} block >
    <Text>Click Me</Text>
</Button>

Android

iOS

You can use any TouchableOpacity property and the following:

DatePicker

Renders a Text, that displays a date picker modal when the onPress method is triggered.

<DatePicker onDateChange={this.handleDateChange} />

Android

iOS

You can use any TextInput property and the following:

Input

<Input onChangeText={this.handleTextChange} placeholder="Name" />

Android

iOS

You can use any TextInput property and the following:

Picker

In Android, display a dropdown picker. In iOS, renders a Text, that displays a picker modal when the onPress method is triggered.

<Picker onValueChange={this.handleValueChange} selectedValue={this.state.pickerValue}>
    <Picker.Item value="1" label="1" />
    <Picker.Item value="2" label="2" />
    <Picker.Item value="3" label="3" />
</Picker>

Android

iOS

You can use any Picker property and the following:

TextArea

Renders a TextInput, that increases in height with the height of the text entered.

<TextArea onChangeText={this.handleTextChange} placeholder="Description" />

Android

iOS

You can use any TextInput property and the following:

Molecules

Form Elements

FormDatePicker

Uses the Atom DatePicker.

<FormDatePicker onDateChange={this.handleDateChange} label="Date" />

Android

iOS

Additional Props;

FormInput

Uses the Atom Input.

<FormInput onChangeText={this.handleTextChange} label="Name" />

Android

iOS

Additional Props;

FormPicker

Uses the Atom Picker.

<FormPicker onValueChange={this.handleValueChange} selectedValue={pickerValue} label="Number" data={pickerData} />

Android

iOS

Additional Props;

FormTextArea

Uses the Atom TextArea.

<FormTextArea onChangeText={this.handleTextChange} label="Description" />

Android

iOS

Additional Props;

Simple Notifications

<Notification ref={"alert"} />

To use the Notification Component and pass data to it, you will need to register a Notification manager in componentDidMount and unregister it in componentWillUnmount.

componentDidMount() {
    NotificationBarManager.registerMessageBar(this.refs.alert);
}

componentWillUnmount() {
    NotificationBarManager.unregisterMessageBar();
}

To trigger the Notification display, you will need to run the Notification manager method showAlert.

handleShowNotification = () => {
    NotificationBarManager.showAlert({
        message: 'Your alert message goes here', // required
        icon: { name: "alert" },
        // image: { source: require("./assets/images/accessibility.png") }, // image prop
    });
}

Android

iOS

The data that can be passed to the notification are;

SnackBars

<SnackBar ref={"alert"} />

To use the SnackBar Component and pass data to it, you will need to register a SnackBar manager in componentDidMount and unregister it in componentWillUnmount.

componentDidMount() {
    SnackManager.registerMessageBar(this.refs.alert);
}

componentWillUnmount() {
    SnackManager.unregisterMessageBar();
}

To trigger the SnackBar display, you will need to run the SnackBar manager method showAlert.

handleShowSnackBar = () => {
    SnackManager.showAlert({
        message: 'Your alert message goes here' // required
    });
}

Android

iOS

The data that can be passed to the SnackBar are;

The data to be passed to the action prop of a SnackBar;

ListItem

A List Item that displays a title (required), description and image. This molecule makes use of the Text Atom.

<ListItem title="Heading" description="Description" image={{ source: require("path/to/image.png")}} >
    <ListItem title="Heading" onPress={this.handleButtonClick} description="Description" /> //Nested List Item
</ListItem>

Android

iOS

You can use any TouchableOpacity property and the following:

ThinListItem

A List Item that displays a title (required), description and image. This molecule makes use of the Text Atom. Similar to the above molecule but smaller with a few added features

<ThinListItem title="Heading" description="Description" image={{ source: require("path/to/image.png") }} />

You can use any TouchableOpacity property and the following:

Floating Action Button

This molecule makes use of the Text and Icon Atoms.

One action

<FloatingButton onPress={this.handleAction} image={require("path/to/image.png")} />

Multiple actions

actions = [
    { text: 'Accessibility', image: require("path/to/image.png"), name: 'bt_accessibility', position: 2, onPress: () => this.handleAccessibility() },
    { text: 'Location', icon: "pin", name: 'bt_room', position: 1, onPress: () => this.handleLocation() },
    { text: 'Video', icon: "videocam", name: 'bt_videocam', position: 3, onPress: () => this.handleVideo() }
];

<FloatingButton actions={actions} />

Android

iOS

The props for the main FloatingButton are;

The props for the nested FloatingButtonItems, which is being sent through the actions prop are;

Card

A Card that displays a title (required), description and image.

<Card title="Heading" description="Description" image={{ source: require("path/to/image.png")}} />

Android

iOS

You can use any TouchableOpacity property and the following:

Organisms

Form

formElements = [
    { label: "Full Name", type: "text", onChangeText: (value) => this.handleTextChange(value), placeholder: "John Doe" },
    { label: "Email", type: "text", onChangeText: (value) => this.handleTextChange(value), placeholder: "[email protected]", isValid: (value) => this.checkInputValidity(value) },
    { label: "Type", type: "picker", onValueChange: (value) => this.handleValueChange(value), pickerData: this.pickerData },
    { label: "Date", type: "date", onDateChange: (value) => this.handleDateChange(value) },
    { label: "Address", type: "textarea", onChangeText: (value) => this.handleTextChange(value) },
];

<Form formElements={formElements} />

Android

iOS

The Form Component iterates through the formElements array, to render the fields according to the type of input specified in each object. The form object only has one extra prop;

But each type of input has corresponding proptypes to the molecules named below;

ListView

A vertical list of ListItem molecules

listData = [
    { title: "Heading 1", description: "Description 1", image: { source: require("path/to/image.png")} },
    { title: "Heading 2", description: "Description 2", image: { source: require("path/to/image.png")} },
    { title: "Heading 3", description: "Description 3", image: { source: require("path/to/image.png")} }
];

<ListView data={listData} />

You can also pass a custom renderItem method to the ListView, to render ListItems with other TouchableOpacity props, like onPress;

handleListItemClick = (title, description) => {
    Alert.alert(title, description);
}

<ListView data={listData} renderItem={({item}) => <ListItem {...item} onPress={() => handleListItemClick(item.title, item.description)} />} />

Android

iOS

You can use any FlatList property and the following:

The data to be sent to the ListView needs to contain the same fields as the props of ListItem component.

CardList

A vertical/horizontal List of Card molecules.

listData = [
    { title: "Heading 1", description: "Description 1", image: { source: require("path/to/image.png")} },
    { title: "Heading 2", description: "Description 2", image: { source: require("path/to/image.png")} },
    { title: "Heading 3", description: "Description 3", image: { source: require("path/to/image.png")} }
];

<CardList data={listData} />

You can also pass a custom renderItem method to the CardList, to render Cards with other TouchableOpacity props, like onPress;

handleListItemClick = (title, description) => {
    Alert.alert(title, description);
}

<CardList data={listData} renderItem={({item}) => <Card {...item} onPress={() => handleListItemClick(item.title, item.description)} />} />

Android

iOS

You can use any FlatList property and the following:

The data to be sent to the CardList needs to contain the same fields as the props of Card component.

NavBar

The Navigation Header makes use of the Text and Icon atom.

<NavBar>
    <NavBarLeft>
        <NavBarButton type="drawer" />
    </NavBarLeft>
    <NavBarBody>
        <Text>Title</Text>
    </NavBarBody>
    <NavBarRight>
        <NavBarButton onPress={this.handleFavourites} >
            <Icon name="heart" />
        </NavBarButton>
    </NavBarRight>
</NavBar>

Android

iOS

NavBar is the main container for the header. It makes use of the View property and the following:

NavBarBody is a container that displays its children in the center of the header. It only accepts the title of the page within a Text tag. It makes use of the View property and the following:

NavBarLeft displays its children on the left while, NavBarRight is displays its children on the right side of the header. All headers must contain these three tags, to render uniformly.

NavBarButton is the button element to be used within the NavBar. It will only accept the atoms Text, Icon and a react-native Image. It contains the same property as a TouchableOpacity. It also comes with an inbuilt type for common features, which are 'drawer', 'back' and 'search'.

TabBar

The Navigation Footer makes use of the Text and Icon atom.

<TabBar>
    <TabItem active>
        <Icon name="heart" />
        <Text>Favorites</Text>
    </TabItem>
    <TabItem>
        <Icon name="add" />
        <Text>Add New</Text>
    </TabItem>
    <TabItem>
        <Icon name="camera" />
        <Text>Camera</Text>
    </TabItem>
    <TabItem>
        <Icon name="settings" />
        <Text>Settings</Text>
    </TabItem>
</TabBar>

Android

iOS

TabBar is the main container for the footer navigation. It makes use of the View property and the following:

TabItem is the button element to be used within the TabBar. It will only accept the atoms Text, Icon and a react-native Image. It contains the same property as a TouchableOpacity. In addition, it contains the following properties as well;

PillBar

The Pill Navigation Bar.

pillScenes = [
    { scene: <Home /> },
    { scene: <CardList data={listData} /> },
    { scene: <ListView data={listData} /> },
    { scene: <View style={styles.innerContainer}><Form formElements={formElements} /></View> },
];

pillHeaders = [
    { title: 'Home', icon: "home" },
    { title: 'Card List', icon: "card" },
    { title: 'List View', icon: "list" },
    { title: 'Form', icon: "help" }
];

<PillView pillHeaders={pillHeaders} pillScenes={pillScenes} />

Android

iOS

The index of the pillHeader object, will be used to query the corresponding pillScene, during transition.

PillBar is the main container for the pill navigation. It makes use of the View property and the following:

This property color, will be passed down to child element PillItem as the activeColor prop mentioned below

PillItem is the button element to be used within the PillBar. It will only accept the atoms Text, Icon and a react-native Image. It contains the same property as a TouchableOpacity. In addition, it contains the following properties as well;

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning.

Authors

• Sameeha Rahman - Initial work - samsam-026
• Muditha Batagoda - Initial Design - mudithabatagoda

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details