Installing

Install dependencies

  yarn add @tarikfp/react-native-ui-kit

or

  npm install @tarikfp/react-native-ui-kit

Components

Button

A button is component that the user can press to trigger an action.

Properties

Inherits TouchableOpacity and the following:

| Prop | Type | Description | | --------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | | size | string | Size of the button. Can be one of the following: large, medium, small, xsmall | | loading | boolean | Whether button is in loading state. Loading indicator will be shown next to the label in case of true. | | labelStyle | StyleProp<TextStyle> | Button label style. | | label | string | Label of the button. | | backgroundColor | string | Background color of the button. | | startIcon | IconProps | Props of the icon which will be displayed start of the button. | | endIcon | IconProps | Props of the icon which will be displayed end of the button. | | loadingProps | ActivityIndicatorProps | Props of the loading indicator. |

Usage

import { Button } from "@tarikfp/react-native-ui-kit";

return (
  <Button
    size="xsmall"
    backgroundColor="royalblue"
    label="Start recording"
    startIcon={{
      name: "microphone",
      type: "FontAwesome",
      color: "white",
    }}
  />
);

Avatar

Avatars represent a user and can contain photos, icons, or even text.

Avatar Icon

Avatar with icon. This component uses react-native-vector-icons under the hood.

| Prop | Type | Description | | --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------- | | size | number | Size of the avatar. Default 32 | | backgroundColor | string | Background color of the avatar. | | style | StyleProp<ViewStyle> | Style of the avatar. | | name | string | Name of the icon. | | type | string | Type of the icon. See available icon types | | color | string | Color of the icon. | | iconProps | IconProps | Props of the icon. |

Avatar Icon usage

import { Avatar } from "@tarikfp/react-native-ui-kit";

return (
  <Avatar.Icon color="dodgerblue" size={65} name="react" type="Fontisto" />
);

Avatar Image

Inheirts Image props and the following.

| Prop | Type | Description | | --------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------- | | size | number | Size of the avatar. Default 32 | | source | ImageSourcePropType | The image source (either a remote URL or a local file resource). | | backgroundColor | string | Background color of the avatar. | | style | StyleProp<ViewStyle> | Style of the image wrapper. | | imageStyle | StyleProp<ImageStyle> | Style of the image. |

Avatar Image usage

import { Avatar } from "@tarikfp/react-native-ui-kit";

return (
  <Avatar.Image
    size={65}
    source={{ uri: "https://reactnative.dev/img/logo-og.png" }}
  />
);

Avatar Text

Avatar with text component.

| Prop | Type | Description | | --------------------- | ---------------------- | ---------------------------------- | | size | number | Size of the avatar. Default 32 | | label | string | Text to display on avatar. | | backgroundColor | string | Background color of the avatar. | | labelColor | string | Color of the avatar label. | | style | StyleProp<ViewStyle> | Style of the avatar label wrapper. | | labelStyle | StyleProp<TextStyle> | Style of the label. |

Avatar Text usage

import { Avatar } from "@tarikfp/react-native-ui-kit";

return <Avatar.Text backgroundColor="darkorange" size={65} label="TP" />;

Header

Headers are the components that display information and actions for the current screen.

Properties

Inherits View and the following:

| Prop | Type | Description | | --------------------- | ---------------------- | ----------------------------------------------------------------------- | | height | number | Height of the header component. Defaults to 56. | | hasShadow | boolean | Whether header has the shadow style applied or not. Defaults to false | | backgroundColor | string | Background color of the header. | | style | StyleProp<ViewStyle> | Style of the header. |

Usage

import { Header } from "@tarikfp/react-native-ui-kit";

return (
  <Header>
    <Header.Title label="Home screen" />
    <Header.Image
      source={{
        uri: "https://reactnative.dev/img/logo-og.png",
      }}
    />
    <Header.Icon
      alignment="end"
      name="arrow-right"
      type="MaterialCommunityIcons"
    />
  </Header>
);

Header Icon

Header icon element. This component uses react-native-vector-icons under the hood.

Properties

Inherits IconProps and the following:

| Prop | Type | Description | | ------------------ | ---------------------- | ---------------------------------------------------------------------------- | | style | StyleProp<TextStyle> | Style of the icon. | | wrapperStyle | StyleProp<ViewStyle> | Style of the icon wrapper. | | alignment | string | Alignment of the icon component. Can be one of the following: start, end |

Header Icon usage

import { Header } from "@tarikfp/react-native-ui-kit";

return (
  <Header height={72}>
    <Header.Icon name="arrow-left" type="MaterialCommunityIcons" />
  </Header>
);

Header Image

Header image element.

Properties

Inherits Image props and the following:

| Prop | Type | Description | | ----------- | ---------------------- | ------------------- | | style | StyleProp<ViewStyle> | Style of the image. |

Header Image usage

import { Header } from "@tarikfp/react-native-ui-kit";

return (
  <Header>
    <Header.Image
      source={{
        uri: "https://reactnative.dev/img/logo-og.png",
      }}
    />
  </Header>
);

Header Title

Header title element.

Properties

Inherits Text props and the following:

| Prop | Type | Description | | ------------------- | ---------------------- | --------------------------- | | title | string | Title text. | | subtitle | string | Subtitle text. | | subtitleStyle | StyleProp<TextStyle> | Style of the subtitle text. | | style | StyleProp<TextStyle> | Style of the title text. | | wrapperStyle | StyleProp<ViewStyle> | Style of the wrapper view. |

Header Title usage

import { Header } from "@tarikfp/react-native-ui-kit";

return (
  <Header>
    <Header.Title title="Home screen" />
  </Header>
);

Text Input

Text Input is a component for inputting text into the app via a keyboard.

Properties

Inherits TextInput and the following:

| Prop | Type | Description | | --------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | isPassword | boolean | Whether the text input is password type. Toggling secureTextEntry with icon will be shown at the end of input in case of true | | backgroundColor | string | Background color of text input. | | inputStyle | StyleProp<TextStyle> | Style of the input. | | wrapperStyle | StyleProp<ViewStyle> | Style of the text input wrapper. | | label | string | Label to display above input. | | errorMessage | string | Error message text to display below input. | | errorMessageIconProps | IconProps | Error message icon props. | | startIcon | IconProps | Props of the icon which will be displayed start of the input. | | endIcon | IconProps | Props of the icon which will be displayed end of the input. | | renderStartElement | () => React.ReactNode | Callback function that returns React element(s) to be displayed on the start of the input. Overrides startIcon prop. | | renderEndElement | () => React.ReactNode | Callback function that returns React element(s) to be displayed on the end of the input. Overrides endIcon prop. | | renderInput | () => React.ReactNode | Callback function that returns React element(s) which will replace the default input. | | endText | string | Text which will be displayed on the end of the input. | | endTextStyle | StyleProp<TextStyle> | End text style. | | loading | boolean | Indicates whether input is in loading state. Loading indicator will be displayed at the end of the input. | | loadingProps | boolean | Indicates whether input is in loading state. Loading indicator will be displayed at the end of the input. | | renderLoading | () => React.ReactNode | Renders loading section of the input. | | renderPasswordIcon | () => React.ReactNode | Renders custom password icon while overriding default one. isPassword must be set to true. | | disabled | boolean | Whether all interactions are disabled in the input. | | hideDefaultEndIcons | boolean | Hides default end icons for password and text type input. Defaults to false (Close icon for text and eye icon for password input) | | height | number | Height of the input. Defaults to 56 | | borderRadius | number | Border radius of the input. Defaults to 8 | | borderColor | string | Border color of the input. Defaults to 8 | | labelStyle | StyleProp<TextStyle> | Input text style. | | errorColor | string | Color of the error which will be applied to the input border, error icon and text. | | renderErrorSection | () => React.ReactNode | Callback function that returns React element(s) to be displayed on the error section of the input. |

Usage

import { TextInput } from "@tarikfp/react-native-ui-kit";

return (
  <TextInput
    wrapperStyle={{ marginBottom: 16 }}
    label="E-Mail"
    labelStyle={{ color: "#FFFFFF" }}
    endText="Special one"
    endTextStyle={{ color: "grey" }}
    placeholder="Type your email"
    placeholderTextColor="grey"
    startIcon={{ type: "MaterialCommunityIcons", name: "email" }}
    value={email}
    onChangeText={setEmail}
  />
);

// Display custom password icon

return (
  <TextInput
    isPassword
    renderPasswordIcon={({ isSecureTextEntry, toggleSecureTextEntry }) =>
      isSecureTextEntry ? (
        <Icon onPress={toggleSecureTextEntry} name="eye" type="Feather" />
      ) : (
        <Icon onPress={toggleSecureTextEntry} name="eye-off" type="Feather" />
      )
    }
  />
);

// Display custom loading section

return (
  <TextInput
    loading
    renderLoading={(containerStyle) => (
      // inject computed container style
      <View style={[containerStyle, myStyle]}>
        <Text>Loading...</Text>
      </View>
    )}
  />
);

// Display custom start element

return (
  <TextInput
    renderStartElement={() => (
      <View>
        <Image
          style={{ width: 30, height: 30 }}
          source={{
            uri: "customImageUrl",
          }}
        />
      </View>
    )}
  />
);

List Item

List items are used to display rows of information, they are extremely flexible and can contain almost anything.

Properties

Inherits TouchableOpacityProps and the following:

| Prop | Type | Description | | --------------------- | ---------------------- | -------------------------------------------------------------------------- | | height | number | Height of the list item component. Defaults to 56. | | hasShadow | boolean | Whether list item has the shadow style applied or not. Defaults to false | | backgroundColor | string | Background color of the list item. | | style | StyleProp<ViewStyle> | Style of the list item. |

Usage

import { ListItem } from "@tarikfp/react-native-ui-kit";

return (
  <ListItem style={{ marginTop: 50 }} hasShadow height={150}>
    <ListItem.Title
      title="React Native"
      style={{ fontSize: 32, lineHeight: 55, fontWeight: "500" }}
      subtitle="Flexible list item..."
      subtitleStyle={{ fontWeight: "300", color: "grey" }}
    />
    <ListItem.Button
      alignment="end"
      backgroundColor="royalblue"
      size="xsmall"
      label="List item button"
    />
  </ListItem>
);

List Item Icon

List Item icon element. This component uses react-native-vector-icons under the hood.

Properties

Inherits IconProps and the following:

| Prop | Type | Description | | ------------------ | ---------------------- | ---------------------------------------------------------------------------- | | style | StyleProp<ViewStyle> | Style of the icon. | | wrapperStyle | StyleProp<ViewStyle> | Style of the icon wrapper. | | alignment | string | Alignment of the icon component. Can be one of the following: start, end |

List Item Icon usage

import { ListItem } from "@tarikfp/react-native-ui-kit";

return (
  <ListItem>
    <ListItem.Icon
      name="lightbulb"
      type="MaterialCommunityIcons"
      color="orange"
    />
  </ListItem>
);

List Item Image

List Item image element.

Properties

Inherits Image props and the following:

| Prop | Type | Description | | ----------- | ---------------------- | ------------------- | | style | StyleProp<ViewStyle> | Style of the image. |

List Item Image usage

import { ListItem } from "@tarikfp/react-native-ui-kit";

return (
  <ListItem>
    <ListItem.Image
      style={{ width: 50, height: 50 }}
      source={{
        uri: "https://reactnative.dev/img/logo-og.png",
      }}
    />
  </ListItem>
);

List Item Title

List Item title element.

Properties

Inherits Text props and the following:

| Prop | Type | Description | | ------------------- | ---------------------- | --------------------------- | | title | string | Title text. | | subtitle | string | Subtitle text. | | subtitleStyle | StyleProp<TextStyle> | Style of the subtitle text. | | style | StyleProp<TextStyle> | Style of the title text. | | wrapperStyle | StyleProp<ViewStyle> | Style of the wrapper view. |

List Item Title usage

import { ListItem } from "@tarikfp/react-native-ui-kit";

return (
  <ListItem>
    <ListItem.Title
      title="Find new ideas!"
      subtitle="Subscribe here..."
      subtitleStyle={{ fontWeight: "300", color: "grey" }}
    />
  </ListItem>
);

List Item Button

List Item button element.

Properties

Inherits Button props and the following:

| Prop | Type | Description | | ------------------ | ---------------------- | ---------------------------------------------------------------------------- | | wrapperStyle | StyleProp<ViewStyle> | Style of the button wrapper. | | alignment | string | Alignment of the icon component. Can be one of the following: start, end |

List Item Button usage

import { ListItem } from "@tarikfp/react-native-ui-kit";

return (
  <ListItem hasShadow height={150}>
    <ListItem.Button
      alignment="end"
      backgroundColor="royalblue"
      size="xsmall"
      label="List item button"
    />
  </ListItem>
);

License

MIT