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

Prop	Type	Optional	Default	Description
title	string	No		The text displayed on the button.
onPress	function	No		Callback function to execute when the button is pressed.
size	"small" | "large"	Yes	"small"	Predefined button sizes.
backgroundColour	string	Yes	Predefined colour	The background colour of the button.
textColour	string	Yes		The colour of the button text.
borderRadius	number	Yes	Predefined value	The border radius of the button.
borderWidth	number	Yes	Predefined value	The border width of the button.
textStyle	object	Yes		Custom style object for the button text.
width	number | null	Yes		Custom width for the button.
height	number | null	Yes		Custom height for the button.

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

Property	Type	Optional	Default	Description
value	any	No		The current value of the text input.
setter	Function	No		Function to update the value based on user input.
placeholder	string	Yes		Placeholder text displayed when the input is empty.
textStyle	Object	Yes		Custom style for the text within the input.
textSize	number	Yes		Size of the text within the input.
width	number	Yes		Custom width for the input field.
height	number	Yes		Custom height for the input field.
inputColour	string	Yes	defaultInputColour	Colour of the input text.
borderRadius	number	Yes	defaultBorderRadius	Border radius for the input field.
borderWidth	number	Yes	defaultBorderWidth	Border width for the input field.
backgroundColour	string	Yes	defaultTextFieldColour	Background colour of the input field.

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

Property	Type	Optional	Description
tabOneTitle	string	No	Title for the first tab.
tabTwoTitle	string	No	Title for the second tab.
tabOneContent	React.ReactNode	No	Content displayed when the first tab is active.
tabTwoContent	React.ReactNode	No	Content displayed when the second tab is active.
height	number	Yes	Optional height for the content container.
width	number	Yes	Optional width for the content container.

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

Property	Type	Optional	Description
visible	boolean	No	Controls the visibility of the modal.
message	string	No	The message or content displayed inside the modal.
onClose	function	No	Function to call when attempting to close the modal.
title	string	No	The title displayed at the top of the modal.
buttonTwoTitle	string	Yes	Title for an optional second button.
buttonTwoOnClick	function	Yes	Callback for the optional second button.

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

Property	Type	Optional	Description
imageSource	ImageSourcePropType	No	Source of the avatar image.
badgeCount	number | string	Yes	Content of the badge. Can be used for notification counts.
size	number	Yes	Custom size for the avatar's diameter.
badgeSize	number	Yes	Custom size for the badge's diameter.

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

Property	Type	Optional	Description
title	string	No	The title displayed on the accordion header.
children	React.ReactNode	No	The content to be shown when the accordion is expanded.
width	number	Yes	Optional width for the accordion, defaulting to the screen's width.

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

Property	Type	Optional	Description
showModal	boolean	No	Controls the visibility of the modal.
children	React.ReactNode	No	The content rendered within the modal.
containerStyle	object	Yes	Custom style for the modal's container.
contentStyle	object	Yes	Custom style for the modal's content.
borderWidth	number	Yes	Custom border width for the container.
borderRadius	number	Yes	Custom border radius for the container.
borderColor	string	Yes	Custom border colour for the container.

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

---