Framework

This document provides a comprehensive overview of the Akinon App Maker Framework used by the mobile app development platform. Akinon App Maker Framework is a software architecture that provides a set of components to simplify and speed up the development of applications. It provides a structure and guidelines for designing, building, and deploying software applications while customizing these applications tailored to specific business needs.

Key features of the Akinon App Maker framework are covered, including its modular design, extensibility, and support for various platforms such as iOS and Android through out this document. An insight into the framework's architecture, component hierarchy, and the role of reusable components in creating scalable and maintainable apps are also provided.

By the end of this document, a comprehensive understanding of the Akinon App Maker framework should be acquired by developers, equipping them with the knowledge needed to embark on their mobile app development journey with the platform.

Elements

Button

import { Button } from '@elements';

<Button text="Button Text" textProps={{ safelyTranslation: true }} />

Properties

Property	Description	Type	Default
className	The style used by the component	string,Array	‘forms.button.regular’
text	The text on the button	string	undefined
activeOpacity	The opacity value when the component is active	number	0.2
textClassName	The style used for button text	string,Array	‘forms.button.buttonText’
iconClassName	The style used for button icon	string,Array	‘’
textProps	The properties used by button text	TextProps	Default text props
onPress	The function to be called after pressing the button	function	undefined
validation	Validation messages	string,Array	[]
validationClassName	The style used for validation messages	string,Array	‘forms.button.buttonValidationText’
disabled	Disables the button component	boolean	false
disabledClassName	The style used when the button component is disabled	string,Array	‘forms.button.disabled’

CachedImage

Supported platforms: Android, iOS

Source: rn-framework-shop/core/elements/cachedImage

A drop-in replacement for expo-image's Image that adds theme-driven request headers, a loading spinner, an error fallback image, and container-size-driven aspect-ratio resizing. On Android it also detects stale cached responses (for example after a CDN redirect) and re-prefetches automatically.

Usage

Supported Image Formats

Format	Android	iOS
WebP	Yes	Yes
PNG / APNG	Yes	Yes
AVIF	Yes	Yes
HEIC	Yes	Yes
JPEG	Yes	Yes
GIF	Yes	Yes
SVG	Yes	Yes
ICO	Yes	Yes
ICNS	No	Yes
PSD (composite preview)	No	Yes

API

Components

CachedImage

Supported platforms: Android, iOS

Type: React.FC<CachedImageProps>

CachedImageProps

Combines every prop supported by expo-image's Image with the custom props below.

source

Supported platforms: Android, iOS

Type: CachedImageSource

The image source. See Types below for its shape.

containerSize

Supported platforms: Android, iOS

Type: number

The size of the container the image is resized against. Used together with resizeType to compute the rendered width/height from the loaded image's aspect ratio.

resizeType

Supported platforms: Android, iOS

Type: 'w' | 'h'

Determines whether containerSize is applied to the image's width ('w') or height ('h'); the other dimension is derived from the loaded image's aspect ratio.

className

Supported platforms: Android, iOS

Optional • Type: string[] | string • Default: ''

Class name(s) used to style the rendered image.

defaultStyle

Supported platforms: Android, iOS

Optional • Type: StyleProp<ViewStyle> • Default: null

Style object merged in when computing the image's final style, applied alongside className.

cachePolicy

Supported platforms: Android, iOS

Optional • Type: ImageProps['cachePolicy'] • Default: 'disk'

Overrides expo-image's own default. Also used as the cache policy when the element re-prefetches an image (see Notes).

transition

Supported platforms: iOS

Optional • Type: number • Default: 300

Fade-in transition duration in milliseconds. Forced to null on Android — see Notes.

showSpinner

Supported platforms: Android, iOS

Optional • Type: boolean • Default: true

Whether to display a loading spinner overlay while the image is loading.

spinnerColor

Supported platforms: Android, iOS

Optional • Type: string • Default: 'black'

Color of the spinner shown while showSpinner is true.

spinnerContainerColor

Supported platforms: Android, iOS

Optional • Type: string • Default: 'white'

Background color of the spinner's container overlay.

spinnerContainerClassName

Supported platforms: Android, iOS

Optional • Type: string[] | string • Default: ''

Class name(s) used to style the spinner's container overlay.

Inherited Props

• ImageProps (expo-image)

Types

CachedImageSource

Supported platforms: Android, iOS

Property	Type	Description
uri	string	The image URL. An empty string renders the error/fallback image immediately.
headers	Record<string, string>	Optional request headers, merged with the theme's images config (see Notes) and sent with the request.

Notes

• When source.uri is an empty string or the image fails to load, CachedImage renders the theme's $images.NO_IMAGE fallback instead of the requested image.
• Request headers are computed by merging, in order: a WebP accept header (only when the theme's images.WEBP_OPTIMIZATION is true), the theme's images.DEFAULT_REQUEST_HEADERS, and the per-call source.headers. Later sources win on conflicting keys.
• transition is only forwarded to the underlying image on iOS; it is forced to null on Android.
• allowDownscaling is always forced to false.
• If both containerSize and resizeType are omitted, the image is sized purely by className/defaultStyle; when neither yields a width/height and no aspectRatio is set, both dimensions default to '100%'.

CheckBox

Properties

Property	Description	Type	Default
onStatusChange	The function to be called after changing the CheckBox status	function	undefined
boxClickable	If false, the CheckBox is disabled	boolean	true
validation	Validation messages	string,Array	[]
validationClassName	The style to be used for validation messages	string,Array	'forms.checkBox.validationText’
defaultValue	Default value	boolean	false
modalTitle	The title of the modal page	string	ModalComponent.title
modalContent	The content of the modal page	React.Component	undefined
modalFooterVisible	Indicates whether the footer component on the displayed modal page is visible	boolean	ModalComponent.modalFooterVisible
modalApprove	The approval text on the modal page	string	ModalComponent.approveText
modalDisapprove	The disapproval text on the modal page	string	ModalComponent.disapproveText
value	The value of the CheckBox	boolean	false
isSelectable	If false, CheckBox is disabled.	boolean	true
circle	Renders the CheckBox component as a circle	boolean	false
content	The label content next to the CheckBox	(openModal: function) ⇒ React.Component	undefined

Container

Properties

Property	Description	Type	Default
className	The style used by the component	string, Array	‘’
bgImageName	The name of the component’s background image	string	undefined
bgImageSource	The source object of the component’s background image	object	undefined
children	The content to be displayed within the component	React.Component	undefined
defaultStyle	The default style object of the component	StyleProp (ViewStyle)	undefined
topBg	Changes the SafeArea background color within the component. It also changes the StatusBar background if the device is Android.	string	'#fff’
excludeEdges		Array	[]
barStyle	barStyle feature for the StatusBar	string	'dark-content’
statusBarTransparent	Makes the StatusBar background transparent if the device is Android	boolean	false

Content

Properties

Property	Description	Type	Default
children	The content to be displayed within the component	React.Component	undefined
className	The style used by the component	string, Array	‘’
scrollTopContainerClassName	The style used by the Scroll Top component	string, Array	‘’
scrollTopIconClassName	The style used by the icon within the Scroll Top component	string, Array	‘’
options	Component settings	object	ContentOptions
scrollEnable	If true, the content is displayed within a ScrollView.	boolean	true

ContentOptions

Datepicker

Properties

Property	Description	Type	Default
onChange	The function to be called when the value changes	function	undefined
placeholder	Placeholder	string	undefined
value	The value of the component	Date	undefined
maximumDate	The maximum value of the component	Date	undefined
validation	Validation messages	string, Array	[]
validationClassName	The style used by the validation messages	string, Array	'forms.checkBox.validationText’
iconName	The name of the icon to the right of the component	string	undefined
title	The title of the displayed Datepicker	string	undefined
iconVisible	Indicates whether the icon to the right of the component is visible	boolean	true
seperator	The character between day-month-year while formatting the value of the component	string	‘.’

HtmlContent

Properties

Property	Description	Type	Default
content	The HTML content to be displayed	string	undefined
onLinkPress	The function to be called after clicking the links within the HTML	function	undefined

Icon

Properties

Property	Description	Type	Default
name	The name of the icon	string	undefined
className	The style used by the component	string, Array	‘’
defaultStyle	The default style object of the component	StyleProp (ViewStyle)	undefined
onPress	The function to be called upon clicking the component	function	undefined
size	The size of the icon	number	12

IconButton

Properties

Property	Description	Type	Default
icon	The name of the icon	string	undefined
className	The style used by the component	string, Array	‘’
iconClassName	The style used by the icon	string, Array	‘’
onPress	The function to be called upon clicking the component	function	undefined
disabled	Indicates whether the button is active	boolean	false
badge	The component displayed within the button	React.Component	undefined

Image

Properties

Property	Description	Type	Default
source	The object that indicates image source	object	undefined
className	The style used by the component	string, Array	‘’
defaultStyle	The default style object of the component	StyleProp (ViewStyle)	undefined

Input

Properties

Property	Description	Type	Default
placeholder	Placeholder	string	undefined
containerClassName	The style used by the container that wraps the Input	string, Array	‘’
className	The style used by the component	string, Array	‘forms.input.regular’
disabledClassName	The style used when the component is inactive	string, Array	‘forms.input.disabled
validation	Validation messages	string, Array	[]
validationClassName	The style used by the validation messages	string, Array	'forms.input.inputValidationText’
label	The title seen above the Input	string	undefined
labelWrapperClassName	The style used by the container that wraps the title on the component	string, Array	undefined
labelClassName	The style used by the title on the component	string, Array	'forms.input.inputLabelText'
mask
maskOptions
maskType
value	The value of the component	string	undefined
editable	Indicates whether the component can be edited	boolean	true
fwRef
secureTextEntry	Displays the content of the component as the password field	boolean	false
secureTextIconClassName	The style used by the Show/Hide Password icon	string, Array	'forms.input.secureTextIcon'
secureTextIconWrapperClassName	The style used by the component that wraps the Show/Hide Password icon	string, Array	De'forms.input.secureTextIconWrapper'fault
passwordVisibleIcon	The name of the Show Password icon	string	‘eye’
passwordHideIcon	The name of the Hide Password icon	string	'eye-blocked’
options	The settings used by the component	object	options: {placeholderColor: ‘#FFF’,}

ListLazyLoader

Supported platforms: Android, iOS

Source: rn-framework-shop/core/elements/listLazyLoader

Renders a list backed by FlashList (via _dependencies) instead of the ScrollView used by @elements/LazyLoader, so only viewport-adjacent items exist in the JS tree and native view hierarchy — useful for feeds of heavy widgets (e.g. a home page made of many independent sections). Every item renders its real content immediately on mount — there is no ready/placeholder gating and no onRenderComplete render-completion signal; virtualization alone (FlashList unmounting off-screen cells) is what keeps this cheap.

Usage

API

Components

ListLazyLoader

Supported platforms: Android, iOS

Type: React.FC<ListLazyLoaderProps>

ListLazyLoaderProps

data

Supported platforms: Android, iOS

Type: Array<any>

Array of items to be rendered. Required.

renderItem

Supported platforms: Android, iOS

Type: (info: { item: any, index: number, extraData: any, target: 'Cell'|'StickyHeader'|'Measurement' }) => React.ReactElement

Render callback invoked for each item. The full FlashList v2 info object is forwarded untouched — including extraData and target, which is why passing extraData to ListLazyLoader reaches renderItem the same way it would with a raw FlashList.

onViewItems

Supported platforms: Android, iOS

Optional • Type: (items: Array) => void • Default: () => null

Real, viewability-based impression handler, batched by itemsPerView. Backed by useViewItemsTracking (core/elements/utils/useViewItemsTracking.js): incoming viewable items are deduped by key against a Set and queued; once itemsPerView items are pending, they're spliced off and passed to onViewItems as a batch.

itemsPerView

Supported platforms: Android, iOS

Optional • Type: number • Default: 2

Batch size for onViewItems.

onViewableItemsChanged

Supported platforms: Android, iOS

Optional • Type: (info: { viewableItems: Array }) => void

If passed, called after the loader's own internal impression-tracking handler (chained, not overriding) — the loader's onViewItems keeps working regardless of whether this is set.

className

Supported platforms: Android, iOS

Optional • Type: string or Array<string>

Class name(s) for styling the list's root element. Memoized (useMemo keyed on className) so the resulting style array keeps a stable identity across renders.

contentContainerClassName

Supported platforms: Android, iOS

Optional • Type: string or Array<string>

Class name(s) for styling the content container. Memoized the same way as className.

keyExtractor

Supported platforms: Android, iOS

Optional • Type: Function • Default: (_, index) => String(index)

Not a destructured prop — the default is a stable, module-level function assigned directly in JSX. Passing your own keyExtractor overrides it: it flows through restProps, which spreads after the default in JSX. This is intentional (a partner needing e.g. item.pk-based keys can override), not something enforced by an explicit prop definition.

Inherited Props

• FlashListProps — all other FlashList v2 props are forwarded as-is (e.g. drawDistance, getItemType, numColumns, testID).

Ref Methods

ref is proxied straight through to the underlying FlashList instance via useImperativeHandle(ref, () => listRef.current) — it is not a custom imperative API, so every method below comes directly from FlashList's FlashListRef. The most commonly used ones:

scrollToIndex(params)

Supported platforms: Android, iOS

Parameters: params: { index: number, animated?: boolean, viewPosition?: number, viewOffset?: number }

Returns: Promise<void>

Scrolls to the item at index. viewPosition controls where it lands in the viewport (0 = top/left, 0.5 = center, 1 = bottom/right).

scrollToOffset(params)

Supported platforms: Android, iOS

Parameters: params: { offset: number, animated?: boolean, skipFirstItemOffset?: boolean }

Returns: void

Scrolls to an exact pixel offset rather than an item index.

scrollToEnd(params?)

Supported platforms: Android, iOS

Parameters: params?: { animated?: boolean } (optional)

Returns: void

Scrolls to the end of the list.

scrollToTop(params?)

Supported platforms: Android, iOS

Parameters: params?: { animated?: boolean } (optional)

Returns: void

Scrolls to the top (or start) of the list.

scrollToItem(params)

Supported platforms: Android, iOS

Parameters: params: { item: T, animated?: boolean, viewPosition?: number, viewOffset?: number }

Returns: void

Same as scrollToIndex, but takes the item value itself instead of its index.

recomputeViewableItems()

Supported platforms: Android, iOS

Parameters: —

Returns: void

Forces a recalculation of which items are currently viewable. Call after an operation that changes visibility without a scroll event (e.g. programmatically changing item sizes).

Other FlashListRef methods

Supported platforms: Android, iOS

Also available via the same ref, forwarded as-is from FlashList: flashScrollIndicators(), getNativeScrollRef(), getScrollResponder(), getScrollableNode(), getFirstItemOffset(), getWindowSize(), getLayout(index), getAbsoluteLastScrollOffset(), getChildContainerDimensions(), recordInteraction(), computeVisibleIndices(), getFirstVisibleIndex(), prepareForLayoutAnimationRender(), clearLayoutCacheOnUpdate(). See FlashList's FlashListRef for full signatures.

Notes

• No ready/onRenderComplete, no initialNumToRender/visibilityThreshold, no cascadeLoad/itemsPerCascade. Every item renders its real content immediately on mount. If you need placeholder-until-ready or render-completion signaling, implement it in your own renderItem in src/, tailored to your actual data-change semantics.
• getItemType for mixed-type lists. Not a named prop — passed straight through via restProps to the native FlashList already. For lists mixing "vastly different" cell types (e.g. a home feed with several widget types), pass getItemType={(item) => item.widget_type} to separate FlashList's recycling pools per type and avoid unnecessary re-renders when a cell recycles into a different type. No framework code change is needed to use it.
• Cell recycling and local state: FlashList recycles the underlying native views across different data items as the user scrolls — a renderItem component's local state (useState, refs, uncontrolled inputs) can therefore "leak" from the item it was created for into a different item that gets recycled into the same view. Symptoms include stale scroll offsets, a TextInput's value/focus jumping to a different row, or toggle state appearing on the wrong item after fast scrolling.

  Mitigate by keying that local state to something that identifies the data item, not the cell slot, using FlashList.useRecyclingState — a drop-in useState replacement that resets automatically when the given dependency array changes:
• The _dependencies barrel exports FlashList's members under the name FlashList — a namespace object ({ FlashList, AnimatedFlashList, useRecyclingState, useLayoutState }).
• This component always virtualizes via FlashList — there's no non-virtualized mode. To skip impression tracking and the onViewableItemsChanged chaining behavior entirely, use the underlying FlashList from _dependencies directly.
• See Ref Methods above — ref exposes the underlying FlashList instance directly, not a custom imperative API.

Performance Notes

• Profile in release mode only. Dev mode's render buffer makes ListLazyLoader look slower than it is in production.
• Memoize what you pass in. Keep renderItem, extraData, and any inline objects/functions passed to ListLazyLoader referentially stable across renders — unmemoized props force unnecessary cell re-renders.
• Don't put a key prop on the component renderItem returns. It disables FlashList's cell recycling — use keyExtractor instead (see above).
• Wrap leaf components in React.memo. So a cell recycling into a different item doesn't re-render children whose own props didn't change.
• Use getItemType for mixed content types (see Notes above) to keep separate recycling pools per type.
• Pass recyclingKey to images in renderItem. @elements/CachedImage forwards recyclingKey straight through to expo-image — set it to something identifying the image's data (e.g. its uri) so a recycled cell blanks out instead of briefly showing the previous item's image. expo-image — recyclingKey
• Use useRecyclingState for other per-item local state. A drop-in useState replacement (from _dependencies's FlashList) that takes a dependency array and resets automatically when it changes — use it for any renderItem-local state (scroll position, toggles, etc.) that shouldn't leak across a recycled cell.

Picker

Properties

Property	Description	Type	Default
placeholder	Placeholder	string	undefined
selectedItem	The selected item	any	undefined
headerTitle	The title of the displayed modal	object	undefined
data	The data array with the options	Array	[]
label	The title on the picker	string	undefined
onSelect	The function to be called when an option is selected	function	undefined
threeDotText	The three-dot setting when options don’t fit the picker	boolean	undefined
visibleOnEmpty	No picker is shown if there are no options.	boolean	true
validation	Validation messages	string, Array	[]
validationClassName	The style to be used by the validation messages	Tystring, Arraype	'forms.picker.validationText',
iconName	The name of the icon to the right of the picker	string	undefined

RadioGroup

Properties

Property	Description	Type	Default
options	The options to be displayed	Array	[]
onSelect	The function to be called when an option is selected	function	undefined
value	The selected item	any	undefined
title	The title seen on RadioGroup	object	undefined
validation	Validation messages	string, Array	[]
validationClassName	The style to be used by the validation messages	string, Array	'forms.radioButton.validationText'

SafeArea

Properties

Property	Description	Type	Default
children	The component to be shown within the component	React.Component	undefined
className	The style used by the component	string	‘’
defaultStyle	The default style object of the component	StyleProp (ViewStyle)	undefined

ScrollView

Properties

Property	Description	Type	Default
children	The component to be shown within the component	React.Component	undefined
className	The style used by the component	string	‘’
defaultStyle	The default style object of the component	StyleProp (ViewStyle)	null
fwRef	The reference indicating the component	-	-

Spinner

Properties

Property	Description	Type	Default
color	The color of the Spinner	string	‘black’
containerClassName