expo-dev-client-components

A package for sharing React Native components between different dev-client RN apps

API documentation

import { View, Spacer, Row, useExpoTheme, ChevronRightICon } from 'expo-dev-client-components';

function ExampleRow() {
  const theme = useExpoTheme();

  return (
    <View px="small" py="large">
      <Row align="center">
        <ChevronRightIcon />
        <Spacer.Horizontal size="tiny" />
        <Text size="large" style={{ color: theme.text.default }}>
          Enter URL manually
        </Text>
      </Row>
    </View>
  );
}

Documentation

create-primitive is a utility that generates a set of themed react-native components.

Features:

• theme-ability
• typesafety
• clear and flexible API

API

import { Text } from 'react-native';
import { create } from './create-primitives';

const Heading = create(Text, {
  base: {
    fontFamily: 'Helvetica',
  },

  variants: {
    size: {
      large: {
        fontSize: 28,
        lineHeight: 34,
      },
      medium: {
        fontSize: 22,
        lineHeight: 28,
      },
      small: {
        fontSize: 18,
        lineHeight: 22,
      },
    },
    color: {
      success: {
        color: 'green',
      },
      danger: {
        color: 'red',
      },
    },
  },
});

This above produces a Heading component that can be used like so:

function App() {
  return (
    <Heading size="medium" color="success">
      Hi
    </Heading>
  );
}

All of the variants are captured by typescript which makes using them a breeze.

Declarative Selectors

We can extend the Heading component above with selectors:

const Heading = create(RNText, {
  variants: {
    // ....
  },
  selectors: {
    // when device theme is 'light'...
    light: {
      color: {
        // ...any `Heading` with `color="success"`...
        success: {
          // ...will have these styles applied
          color: 'green',
        },
      },
    },
  },
});

You can also pass selectors to primitives for one-off instances where you need a specific style:

function App() {
  return (
    <View>
      <Heading
        selectors={{
          dark: { color: 'green' },
          light: { color: 'blue' },
        }}>
        Hi
      </Heading>
    </View>
  );
}

Flexibility

You can use any style library you'd like - for example using tailwind for a terser, readable configuration.

import tw from 'somewhere';
import { create } from './create-primitives';

const Heading = create(RNText, {
  size: {
    large: tw('text-4xl'),
    medium: tw('text-3xl'),
    small: tw('text-2xl'),
  },
  weight: {
    normal: tw('font-medium'),
    heavy: tw('font-semibold'),
  },
  color: {
    success: tw('text-green-500'),
    danger: tw('text-red-500'),
  },
});

Installation in managed Expo projects

There are no native dependencies exported and so this module should be compatible with any RN project

Installation in bare React Native projects

There are no native dependencies exported and so this module should be compatible with any RN project

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.