TOTVS React Native Framework

0.0.85 verified Fri May 01 auth: no javascript

A React Native UI component library for TOTVS applications, providing pre-built customizable components (buttons, pickers, text inputs, etc.) following TOTVS design guidelines. Current version 0.0.85, with infrequent releases. It has heavy peer dependency requirements and is tightly coupled to TOTVS ecosystem. Alternatives: general RN UI libraries like NativeBase or React Native Elements, but tailored for TOTVS branding.

Common errors

error Module not found: Can't resolve 'react-native-svg' ↓

cause Missing peer dependency react-native-svg.

fix

npm install react-native-svg --save

error null is not an object (evaluating 'RNSVGPathElement') ↓

cause Incorrect linking of react-native-svg (pre RN 0.60) or missing auto-linking (RN >= 0.60).

fix

For RN < 0.60: react-native link react-native-svg; for RN >= 0.60: ensure pod install or rebuild.

error Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object. ↓

cause Trying to import a component incorrectly (e.g., default import vs named import).

fix

Use named imports: import { Button } from 'totvs-react-native-framework'

error Cannot find module 'mobx-react' ↓

cause MobX peer dependencies not installed.

fix

npm install mobx mobx-react --save

Warnings

gotcha All peer dependencies must be installed manually; failing to do so causes build failures. ↓

fix Install peer deps: npm install react react-native react-native-svg react-native-vector-icons lottie-react-native victory-native react-native-datepicker mobx react-native-fingerprint-scanner mobx-react react-native-picker

deprecated react-native-datepicker (peer dep) is unmaintained; may cause issues on newer RN versions. ↓

fix Consider replacing with @react-native-community/datetimepicker if feasible for your project.

gotcha Library relies on MobX for state management; not compatible with Redux or other state solutions out of the box. ↓

fix Use MobX with mobx-react to integrate with the framework components.

gotcha Component import paths are not documented; all components must be imported from the main package entry via named exports. ↓

fix Use import { ComponentName } from 'totvs-react-native-framework'

Install

npm install totvs-react-native-framework

yarn add totvs-react-native-framework

pnpm add totvs-react-native-framework

Imports

default

wrong

const TotvsFramework = require('totvs-react-native-framework')

correct

import TotvsFramework from 'totvs-react-native-framework'

Default export provides the main framework object with components.

Button

wrong

import Button from 'totvs-react-native-framework/Button'

correct

import { Button } from 'totvs-react-native-framework'

Named export available since v0.x.

PickerSelect

wrong

import PickerSelect from 'totvs-react-native-framework'

correct

import { PickerSelect } from 'totvs-react-native-framework'

Named export; must use destructured import.

TextInputTotvs

wrong

import TextInputTotvs from 'totvs-react-native-framework'

correct

import { TextInputTotvs } from 'totvs-react-native-framework'

Named export; component name may change in future versions.

MobX

wrong

import MobXProvider from 'totvs-react-native-framework/MobX'

correct

import { MobX } from 'totvs-react-native-framework'

Named export for MobX integration utils.

Quickstart

Demonstrates importing the framework and using three core components (Button, PickerSelect, TextInputTotvs) in a React Native app.

import TotvsFramework from 'totvs-react-native-framework';
import { Button, PickerSelect, TextInputTotvs } from 'totvs-react-native-framework';

// Initialize framework (optional)
// TotvsFramework.init({ ... });

const App = () => (
  <>
    <Button title="Click" onPress={() => alert('Pressed')} />
    <PickerSelect
      items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
      onValueChange={(value) => console.log(value)}
      placeholder={{ label: 'Select...', value: null }}
    />
    <TextInputTotvs
      placeholder="Enter text"
      onChangeText={(text) => console.log(text)}
    />
  </>
);

export default App;