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.