React Native Motif

Have fun creating UI for React Native.

npm install react-native-motif

// src/components/title.tsx

import { Text } from 'react-native'
import { VariantProps, styled } from 'react-native-motif'

const title = styled({
  base: {
    textAlign: 'center',
  },
  variants: {
    color: {
      red: {
        color: 'red',
      },
      yellow: {
        color: 'yellow',
      },
    },
    fontSize: {
      sm: {
        fontSize: 15,
      },
      md: {
        fontSize: 18,
      },
    },
  },
})

export type Props = {
  children: string | string[]
} & VariantProps<typeof title>

export function Title(props: Props) {
  return (
    <Text
      style={[
        title.base,
        variant(title.color, props.color),
        variant(title.fontSize, props.fontSize),
      ]}
    >
      {props.children}
    </Text>
  )
}

// src/app.tsx

import { View } from 'react-native'
import { style } from 'react-native-motif'
import { Title } from './components/title'

export function App() {
  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Title
        color="primary"
        fontSize="md"
      >
        Hello world
      </Title>
    </View>
  )
}