ui

Contains various react-native ui components.

Input

Input

<Input />

Display error message

// string literal
<Input
  error="Plane error message"
/>

// validator function that returns error message.
const validator = (value: string) => {
  if (value === 'boo')
    return '`boo` cannot be entered.';
  return null;
};
<Input
  error={validator}
/>

built-in validator

<Input
  error={withError(validateName, 'Incorrect name')}
/>

Utility Components

Portal

<View>
  <WarpTo name="teleport_here">
    <Text>
      Henlo World!
    </Text>
  </WarpTo>
</View>
<Portal name="teleport_here" />

will be rendered as:

<View>
  <></>
</View>
<Portal name="teleport_here">
  <Text>
    Henlo World!
  </Text>
</Portal>

Debounce

<Debounce
  property="visible"
  duration={1000}
>
  <Modal visible={visible}>
    <Text>
      Henlo World!
    </Text>
  </Modal>
</Debounce>

predicate
Only true -> false transitions will be debounced.
false -> true is immediate.

<Debounce
  property="visible"
  duration={1000}
  predicate={x => !x}
>
</Debounce>