eclipse-mobile-components v1.1.5

eclipse-mobile-components

Eclipse Mobile Components are crafted for developers who prioritise quick prototyping without compromising on usability. Our components offer a minimalistic yet detailed approach, providing an alternative to the out-of-the-box React Native components which may not always meet the rapid development needs. Perfect for those looking to swiftly bring their app ideas to life, specifically made for JS/TS Expo on iOS and Android platforms.

PrimaryButton

A customisable button component, offering flexibility in size, colour, and styling.

Props

Usage Example

import { PrimaryButton } from "eclipse-mobile-components";

<PrimaryButton
  title="Press Me"
  onPress={() => alert("Button Pressed")}
  size="large"
  backgroundColour="#007bff"
  textColour="#ffffff"
/>;

Visual Example

TextField Component

A customisable text input component, offering a wide range of styling options.

Properties

Usage Example

import React, { useState } from "react";
import { TextField } from "eclipse-mobile-components";

const MyComponent = () => {
  const [text, setText] = useState("");

  return (
    <TextField
      value={text}
      setter={setText}
      placeholder="Enter something..."
      textSize={16}
      backgroundColour="#fff"
      inputColour="#333"
    />
  );
};

Visual Example

TabSystem Component

The TabSystem offers a flexible and interactive means to display content in a tabulated format.

Properties

Usage Example

import React from "react";
import { TabSystem } from "eclipse-mobile-components";
const App = () => (
  <TabSystem
    tabOneTitle="Tab 1"
    tabTwoTitle="Tab 2"
    tabOneContent={<Text>Content for Tab 1</Text>}
    tabTwoContent={<Text>Content for Tab 2</Text>}
    height={300}
  />
);
export default App;

Visual Example

CustomWarning Component

A modal component designed for displaying warnings or messages with customisable options.

Properties

Visual Example

import { CustomWarning } from "eclipse-mobile-components";
import { useState } from "react";

export default function App() {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <CustomWarning
      visible={modalVisible}
      title="Warning"
      buttonOneTitle="Button A"
      message="This is a detailed warning message."
      onClose={() => setModalVisible(false)}
      buttonTwoTitle="Button B"
      buttonTwoOnClick={() => console.log("Second action taken")}
    />
  );
}

Visual Example

CustomAvatar Component

A customisable avatar component with an optional badge indicator.

Properties

Usage Example

import React from "react";
import { CustomAvatar } from "eclipse-mobile-components";

const UserProfile = () => (
  <CustomAvatar
    imageSource={{
      uri: "https://images.pexels.com/photos/428361/pexels-photo-428361.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    }}
    badgeCount="9+"
    size={100}
    badgeSize={25}
  />
);

Visual Example

AccordionSection Component

A versatile accordion component, allowing content to be expanded and collapsed.

Properties

Usage Example

import React from "react";
import { AccordionSection } from "eclipse-mobile-components";

const App = () => {
  return (
    <AccordionSection title="Section Title">
      <Text>Content goes here.</Text>
    </AccordionSection>
  );
};

Visual Example

CustomModal Component

A flexible modal component, enabling customised presentation layers.

Properties

Usage Example

import React from "react";
import { CustomModal } from "eclipse-mobile-components";

const App = () => (
  <CustomModal
    showModal={true}
    borderWidth={2}
    borderRadius={10}
    borderColor="grey"
    containerStyle={{ backgroundColor: "rgba(0,0,0,0.5)" }}
    contentStyle={{ backgroundColor: "white" }}
  >
    <View style={{ width: 300, height: 100 }}>
      <Text>Modal Content Goes Here</Text>
    </View>
  </CustomModal>
);

Visual Example