Installation

Use NPM or Yarn to install as a development dependency:

# with NPM
npm install @edon-app/common

# with Yarn
yarn add @edon-app/common

Flat List Layers

wrapper around React Native’s FlatList for rendering items.

• It accepts all FlatList props except for children.
• Instead of using renderItem directly, it takes a children render function to display each item.

Native Styled

This module defines styled components based on React Native primitives and Tamagui.

• KeyboardAvoidingView

  • A styled version of KeyboardAvoidingView from React Native

• SafeAreaView

  • A styled SafeAreaView with Tamagui
  • Default background color: $color3, with flex properties to occupy full height

• ImageBackground

  • A styled ImageBackground with Tamagui
  • Similar flex defaults as SafeAreaView

• Col

  • A styled version of Stack with a media variant
  • media takes a numeric value and adjusts the width in percentage dynamically

Example

<SafeAreaView>
  <KeyboardAvoidingView>
    <Col media={50}>
      <Text>Half-width Column</Text>
    </Col>
  </KeyboardAvoidingView>
</SafeAreaView>

resolvers

Refer to resolver

SafeArea

The SafeArea component provides a safe rendering area for React Native applications.

It:

• Uses SafeAreaView to render the inner content.
• Displays a StatusBar with a customizable style (light-content or dark-content).
• Supports ImageBackground to wrap the content with a background image if needed.
• If imageBackground is provided, the content will be rendered inside an ImageBackground.
• Otherwise, it simply renders a Fragment containing the StatusBar and the content.

✅ Props

• barStyle → Status bar style (light-content or dark-content)
• style → Style props for the SafeAreaView
• imageBackground → Props for the background image

Example

<SafeArea
  barStyle="dark-content"
  style={{ flex: 1, backgroundColor: "white" }}
  imageBackground={{ source: require("./bg.png") }}
>
  <Text>Hello Safe Area</Text>
</SafeArea>