React Native Boxes

A simple-to-use React Native UI SDK that does all the UI heavy lifting for you —
so you can focus on value, not boilerplate code! Built using barebone react-native and Expo components with almost no third-party dependencies.

alt="collage" width="512px">

Out-of-the box comes with:
- Themes
- Layouts (Cards, Vertical, Horizontal, Centered etc.)
- Texts (Title, Subtitle, Text, Caption etc.)
- Buttons (Simple, Transparent, Loading etc.)
- Images and Icons (Icons, Avatars, Images etc.)
- Font (Specify Regular, Styled and Bold fonts)
- Bars (Toolbars, Bottom nav bars etc.)
- Modals (Dialogboxes, Selection bottomsheet, Horizontal selection etc.)
- Expand box (Animated)
- Lists (Simple data list)
- Webview (In app web browser)
- Internationalization (I18n)
- Analytics (Clicks, Impression tracking)

Install

``
npm install react-native-boxes
`

Dependencies

Make sure you have following dependencies installed. The versions can be any satisfying version but must not have any breaking changes.

`
"@expo/vector-icons": "^13.0.0",
"react": "^18.2.0",
"@react-native-async-storage/async-storage": "1.23.1",
"react-native": "^0.73.6",
"react-native-safe-area-context": "^4.9.0",
"react-native-gesture-handler":"~2.14.0",
"expo-web-browser": "^13.0.3"
`

Usage


At the root of your app you must add a theme context and thats it! You are good to go.
`
import { Colors, DarkColors, Theme } from 'react-native-boxes';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App(){
const colorScheme = 'dark'
const theme = new Theme('my-app', colorScheme === 'dark' ? DarkColors : Colors);
return (





)
}
`
Optional: If you are also gonna use bottomsheets, Add GestureHandlerRootView

Components

$3

Dark colors and Light colors come out of the box.

Dark Colors

!image

Light Colors

!image

Customizing theme

import { Colors, Theme } from 'react-native-boxes';
...

const MyColors = Object.assign(Colors, {
accent: '#086CFE',
accentLight: '#337DFF',
text: '#444444',
caption: '#A9A9A9',
heading: '#222222',
background: '#E6E6E6',
forground: '#fff',
transparent: 'transparent',
semitransparent: '#111a1a1c',
info: '#2196F3',
success: '#4CAF50',
successBackground: '#388E3C',
warning: '#FFA726',
critical: '#F44336',
invert: {
text: '#fff',
caption: '#fff',
heading: '#fff',
background: '#1a1a1c'
}
})
const theme = new Theme('my-app', MyColors);
return (



)

You can also customize sizes, dimensions etc, but it is not recommended.

Customizing other theme options

const theme = new Theme(
name = '',
colors ,
dimens ,
fonts ,
styles ,
)

$3

Load the below font names. Different components use different font families.
`
loadAsync({
'Regular': require('./assets/fonts/Regular.ttf'), // Used in all general texts
'Bold': require('./assets/fonts/Bold.ttf'), // Used in Buttons and Headings
'Styled': require('./assets/fonts/Styled.ttf'), // Used in special places
})
`

$3

$3

Your root tag for pages. Consists of vertical alignment and some basic padding.

!image

Code sample

#### Center
!image

Code sample

Coming soon

#### VBox
!image

Code sample

Coming soon

#### HBox
!image

Code sample

$3

!image

Code sample

Icons are from Fontawesome
https://icons.expo.fyi/Index



This is a text with a simple example from a watchlist screen. You can add stocks to your watchlist and see their performance. You can also add alerts to get notified when a stock reaches a certain price.

This is a subtitle for watchlist

This is a title text that explains what a watchlist is.


A watchlist is a list of stocks that you are interested in.


This is a another title text that explains what a watchlist is.


A watchlist is a list of stocks that you are interested in.


This is a caption. All investments are subject to market risk. Please do your own research before investing in any stock. This app is for educational purposes only.

$3

#### Avatars

!image

- With icon
- With image url
- With text

Code sample

#### Icons
Support for Fontawesome icon names from https://icons.expo.fyi/

!image

Code sample

$3

Simple button code sample

!image

Transparent button code sample

!image

Loading button code sample

const [loading, setLoading] = useState(false)

{
setLoading((prev) => !prev)
}} />

!ezgif-451f0321da765b

$3

!image

Code sample

Icons are from Fontawesome
https://icons.expo.fyi/Index

export default function AppBottomBar() {
const theme = useContext(ThemeContext)
const router = useRouter()
const [selectedId, setSelectedId] = React.useState('watchlist')
return (
selectedId={selectedId}
options={[
{
id: 'watchlist',
icon: 'bookmark',
title: 'Watchlist'
},
{
id: 'orders',
icon: 'file-text',
title: 'Orders'
},
{
id: 'positions',
icon: 'briefcase',
title: 'Positions'
},
{
id: 'settings',
icon: 'gears',
title: 'Settings'
}
]}
onSelect={(selectedId) => {
console.log('selected', selectedId)
setSelectedId(selectedId)
router.push('/explore')
}} />
)
}

$3

!Recording 2025-03-01 201906

Code sample

INFY
TCS

$3

$3

!image

Code sample

$3

!image

Code sample

$3

!image

Code sample

homeIcon={"arrow-left"}
title="Watchlist"
options={[{
id: 'search',
icon: 'search',
onClick: () => {
console.log('Search clicked')
}
}]}
/>

$3

!image

Code sample

INFY
TCS

$3

#### Bottomsheet on mobile

!mobile sheet

Code sample

setShowDialog(false)}>

This is a simple dialog that can be used to show more information to the user. It is a bottom sheet that can host any content.



Watchlists are a great way to keep track of your favorite stocks. You can add stocks to your watchlist and see their performance. You can also add alerts to get notified when a stock reaches a certain price.

setShowDialog(false)} />

#### Bottomsheet on Desktop (web)

!desktop sheet

$3

Opens a webview on native and a iframe on Web

Code sample

$3

Install your favorite js library.

!locale

Code sample

import { I18n } from 'i18n-js';

const I18nProvider = new I18n({
en: {
watchlist: {
hello: 'Hello!'
},
home:{
title:'Hello %{name} !'
}
},
hi: {
watchlist: {
hello: 'नमस्ते !'
}
},
hinglish: {
watchlist: {
hello: 'Namaste !'
}
},
es: {
watchlist: {
hello: 'Hola!'
}
}
});
I18nProvider.locale = 'hi'
I18nProvider.missingBehavior = "guess";

export default function App(){
const [locale, setLocale] = useState('en')
I18nProvider.locale = locale
const theme = new Theme('dark', colorScheme === 'dark' ? DarkColors : Colors);
theme.i18n = I18nProvider


return (

{
setLocale('en')
}} />
{
setLocale('hi')

}} />


{
setLocale('hinglish')

}} />
{
setLocale('es')

}} />



)
}

For Skipping localization, you can add create custom middleware like below and wrap your string with {{YOUR STRING}}, this will directly output your string.
`
let tOriginal = I18nProvider.t.bind(I18nProvider)
I18nProvider.t = (scope, options) => {
if (scope == undefined)
return ''
if (typeof scope == 'string') {
if (scope.startsWith("{{") && scope.endsWith("}}")) {
return scope.replace("{{", "").replace("}}", "")
}
}
return tOriginal(scope, options)
}
`

`
{{This String will not be localized. Nope}}} />
`

For using placeholders in your locales,

`
{{ ${theme.i18n.t('home.title',{ name: 'Shivesh Navin' })} }} />
`




$3


If you wanna track the users clicks and impressions on each component, just add a onTrack hook to your theme.

`
action : TrackingActionType = click | view | navigate
view : TrackingViewType = button | dropdown...
text : The text related to the component if present
extra : Depending on component, some contextual info. For e.g. the WebView impression gives {url, title} extra
`

const theme = new Theme('dark', DarkColors);
theme.onTrack = (action, view, text, extras) => {
myTracker.track(${action}-${text}-${text}`, extras)
}