@idimma/rn-widget NPM

Idimma React Native Widgets

react native components

Installation

npm install @idimma/rn-widget

Usage

import { View } from '@idimma/rn-widget';

<View
  flex={1}
  bg="#F2F5F7"
  p={10}
  m={5}
  br={8}
  bw={1}
  bc="#CCCCCC"
>
  {/* Your content here */}
</View>

import { Text } from '@idimma/rn-widget';

<Text
  color="#2BAEDF"
  //You can use any color as prop black, red, pink ...etc
  fs={16}
  fw="bold"
  center //Align Text to center
>
  Hello, World!
</Text>

import { Image } from '@idimma/rn-widget';

<Image
  source={require('./path/to/image.png')}
  resizeMode="cover" //or
  w={200}
  h={200}
  radius={10}
/>;

Components and Props

View Component

Prop	Type	Description
`flex`	`boolean` \| `number`	Flex grow factor
`bg`	`string`	Background color
`p`	`number`	Padding for all sides
`m`	`number`	Margin for all sides
`radius`	`number`	Border radius
`bw`	`number`	Border width
`bc`	`string`	Border color

Other View Props

Text Component

Prop	Type	Description
`color`	`string`	Text color See list of colors
`fs`	`number`	Font size
`fw`	`'normal'` \| `'bold'` \| `number`	Font weight
`align`	`'auto'` \| `'left'` \| `'right'` \| `'center'`	Text alignment

Other Text Props

Image Component

Prop	Type	Description
`source`	`ImageSourcePropType`	Source of the image (usually requires a path or URL)
`resizeMode`	`'cover'` \| `'contain'` \| `'stretch'`	Resize mode for the image
`style`	`ImageStyle`	Custom styles for the image (e.g., width, height)