react-native-boxes v1.4.69

React Native Boxes

A simple to use react library that does all the UI heavy lifting for you so that you can focus on value and not code !

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"

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 (
        <ThemeContext.Provider value={theme} >
            <GestureHandlerRootView> 
                <WatchlistPage />
            </GestureHandlerRootView>
        </ThemeContext.Provider>
    )
}

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

Components

Themes

Dark colors and Light colors come out of the box.

Dark Colors

Light Colors

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

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

Layouts

VPage

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

Center

<Center>
    <Title>Watchlist</Title>
    <Caption>Coming soon  </Caption>
</Center>

HBox

Texts

Images

Avatars

• With icon
• With image url
• With text

<Avatar iconName='user' />
<Avatar iconUrl='https://avatars.githubusercontent.com/u/16799797?v=4' />
<Avatar iconText='SN' />
      

Icons

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

Buttons

<LoadingButton loading={loading} text='Loading Button' onPress={() => {
    setLoading((prev) => !prev)
  }} />

Bottombar

Expand

Toolbars

Simple Toolbar

Transparent Center Toolbar

Toolbar with buttons

Divider

Modals

Bottomsheet on mobile

  <BottomSheet title="Bottomsheet About Watchlists" visible={showDialog} onDismiss={() => setShowDialog(false)}>
    <TextView>
      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.
    </TextView>
    <HBox />
    <TextView>
      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.
    </TextView>
    <TertiaryButtonView text='Goto Watchlist' onPress={() => setShowDialog(false)} />
  </BottomSheet>
  

Bottomsheet on Desktop (web)

Web view

Opens a webview on native and a iframe on Web

<WebBrowserView url='https://www.google.com' title='Google'/>

Internationalization

Install your favorite js library.

import { I18n } from 'i18n-js';

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


export default function App(){
    const [locale, setLocale] = useState('en')
    I18nProvider.locale = locale
    const theme = new Theme('appname', colorScheme === 'dark' ? DarkColors : Colors);
    theme.i18n = I18nProvider
    
      
    return (
        <ThemeContext.Provider value={theme} >
        <Center>
              <Title>watchlist.hello</Title>
            </Center>
            <Center>
              <HBox>
                <TransparentButton text='English' onPress={() => {
                  setLocale('en')
                }} />
                <TransparentButton text='Hindi' onPress={() => {
                  setLocale('hi')
    
                }} />
              </HBox>
              <HBox>
                <TransparentButton text='Hinglish' onPress={() => {
                  setLocale('hinglish')
    
                }} />
                <TransparentButton text='Spanish' onPress={() => {
                  setLocale('es')
    
                }} />
              </HBox>
        </Center>
     </ThemeContext.Provider>
    )
 }

Analytics

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('appname', DarkColors);  
theme.onTrack = (action, view, text, extras) => {
    myTracker.track(`${action}-${text}-${text}`, extras)
}