📱 How to Create New React Native Components

Most of the React Native components in Spor should already exist in the React version. The React implementation serves as a reference, so you don’t need to invent names, abstraction levels, or prop structures from scratch.

• Same component names and props should be used across web and mobile.
• If the component does not exist in React, check with the Spor team or Team Kanaler before you start building.

We follow three key naming conventions:

• variant – Defines different visual styles unrelated to color (e.g., solid, outline, primary, secondary, ghost).
• colorScheme – Defines color-related variations (e.g., teal, orange, light, dark).
• size – Defines size variations. Always use t-shirt sizing (sm, md, lg, xl, 2xl). If only two sizes exist, use sm and lg.

All Spor-related code lives in app/spor/ inside the salgsapp-react-native repository.

1️⃣ Create a new folder inside app/spor/ that groups related components (e.g., button, card, layout).

• Always use singular names (button, not buttons).

2️⃣ Inside that folder, create an index.tsx file to export the component.

• Then, export this new index.tsx file in app/spor/index.tsx so others can import your component like this:

import { Button } from "app/spor";

A component should be as simple as possible. If it becomes too complex, break it into smaller subcomponents that can be composed together.

For example, a Modal component might be split into:

• Modal
• ModalOverlay
• ModalContent
• ModalHeader
• ModalBody
• ModalFooter

You could then create a SimpleModal that works for most cases, while still allowing developers to use the parts individually for more flexibility.

All components should support spacing props (e.g., margin, sometimes padding).

📌 Use SpacingProps from app/spor:

type ExampleComponentProps = SpacingProps & { children: React.ReactNode };

export const ExampleComponent = (props: ExampleComponentProps) => {
  return <Box {...props}> {/* Your component code here */} </Box>;
};

🔹 These spacing props should typically be spread onto the outermost <Box /> (imported from app/spor).

We use a customized styling system based on Restyle.

1️⃣ Create a theme.tsx file inside the component folder. 2️⃣ Use our style helpers to define styles.

Here’s a complete example:

// Component structure (e.g., outer container + text component)
type Structure = {
  container: BoxStyle;
  text: TextStyle;
};

// Component props (e.g., variants and sizes)
type Args = {
  variant: "solid" | "outline";
  size: "sm" | "md" | "lg";
};

const { createGetStyles, createStyleConfig } = createStyleHelpers<Structure, Args>();

// Base styles
const baseStyles = createStyleConfig(() => ({
  container: { backgroundColor: "darkTeal" },
  text: { color: "white" },
}));

// Variant styles
const variantStyles = createStyleConfig(({ variant }) => {
  switch (variant) {
    case "outline":
      return { container: { borderWidth: 1, borderColor: "primaryGreen", borderStyle: "solid" } };
    default:
      return {};
  }
});

// Combine styles
export const getStyles = createGetStyles(baseStyles, variantStyles);

const ExampleComponent = ({ children, variant, size }: ExampleComponentProps) => {
  const styles = getStyles({ variant, size });
  
  return (
    <Box {...styles.container}>
      <Text {...styles.text}>{children}</Text>
    </Box>
  );
};

🔹 If you need to extract individual styles, use useRestyleStyle:

const AnotherExampleComponent = () => {
  const styles = getStyles();
  const iconStyles = useRestyleStyle(styles.icon);
  
  return <Svg style={iconStyles}>...</Svg>;
};

📌 Use named exports only—no default exports.

Example:

export { Button } from "./button";

Check out app/spor/utils/ before writing new utility functions—many helpful hooks and helpers already exist!

This guide is a starting point for building React Native components in Spor. If you see areas for improvement, feel free to contribute! No suggestion is too small. 🚀