{"id":26495,"library":"totvs-react-native-framework","title":"TOTVS React Native Framework","description":"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.","status":"active","version":"0.0.85","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","react-native","totvs-framework"],"install":[{"cmd":"npm install totvs-react-native-framework","lang":"bash","label":"npm"},{"cmd":"yarn add totvs-react-native-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add totvs-react-native-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - required by React Native","package":"react","optional":false},{"reason":"peer dependency - core framework","package":"react-native","optional":false},{"reason":"peer dependency - used for vector graphics","package":"react-native-svg","optional":false},{"reason":"peer dependency - icon library","package":"react-native-vector-icons","optional":false},{"reason":"peer dependency - animations","package":"lottie-react-native","optional":false},{"reason":"peer dependency - charts","package":"victory-native","optional":false},{"reason":"peer dependency - date picker component","package":"react-native-datepicker","optional":false},{"reason":"peer dependency - state management","package":"mobx","optional":false},{"reason":"peer dependency - biometric authentication","package":"react-native-fingerprint-scanner","optional":false},{"reason":"peer dependency - MobX React bindings","package":"mobx-react","optional":false},{"reason":"peer dependency - picker component","package":"react-native-picker","optional":false}],"imports":[{"note":"Default export provides the main framework object with components.","wrong":"const TotvsFramework = require('totvs-react-native-framework')","symbol":"default","correct":"import TotvsFramework from 'totvs-react-native-framework'"},{"note":"Named export available since v0.x.","wrong":"import Button from 'totvs-react-native-framework/Button'","symbol":"Button","correct":"import { Button } from 'totvs-react-native-framework'"},{"note":"Named export; must use destructured import.","wrong":"import PickerSelect from 'totvs-react-native-framework'","symbol":"PickerSelect","correct":"import { PickerSelect } from 'totvs-react-native-framework'"},{"note":"Named export; component name may change in future versions.","wrong":"import TextInputTotvs from 'totvs-react-native-framework'","symbol":"TextInputTotvs","correct":"import { TextInputTotvs } from 'totvs-react-native-framework'"},{"note":"Named export for MobX integration utils.","wrong":"import MobXProvider from 'totvs-react-native-framework/MobX'","symbol":"MobX","correct":"import { MobX } from 'totvs-react-native-framework'"}],"quickstart":{"code":"import TotvsFramework from 'totvs-react-native-framework';\nimport { Button, PickerSelect, TextInputTotvs } from 'totvs-react-native-framework';\n\n// Initialize framework (optional)\n// TotvsFramework.init({ ... });\n\nconst App = () => (\n  <>\n    <Button title=\"Click\" onPress={() => alert('Pressed')} />\n    <PickerSelect\n      items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}\n      onValueChange={(value) => console.log(value)}\n      placeholder={{ label: 'Select...', value: null }}\n    />\n    <TextInputTotvs\n      placeholder=\"Enter text\"\n      onChangeText={(text) => console.log(text)}\n    />\n  </>\n);\n\nexport default App;","lang":"typescript","description":"Demonstrates importing the framework and using three core components (Button, PickerSelect, TextInputTotvs) in a React Native app."},"warnings":[{"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","message":"All peer dependencies must be installed manually; failing to do so causes build failures.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Consider replacing with @react-native-community/datetimepicker if feasible for your project.","message":"react-native-datepicker (peer dep) is unmaintained; may cause issues on newer RN versions.","severity":"deprecated","affected_versions":">=0.0.1"},{"fix":"Use MobX with mobx-react to integrate with the framework components.","message":"Library relies on MobX for state management; not compatible with Redux or other state solutions out of the box.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Use import { ComponentName } from 'totvs-react-native-framework'","message":"Component import paths are not documented; all components must be imported from the main package entry via named exports.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"npm install react-native-svg --save","cause":"Missing peer dependency react-native-svg.","error":"Module not found: Can't resolve 'react-native-svg'"},{"fix":"For RN < 0.60: react-native link react-native-svg; for RN >= 0.60: ensure pod install or rebuild.","cause":"Incorrect linking of react-native-svg (pre RN 0.60) or missing auto-linking (RN >= 0.60).","error":"null is not an object (evaluating 'RNSVGPathElement')"},{"fix":"Use named imports: import { Button } from 'totvs-react-native-framework'","cause":"Trying to import a component incorrectly (e.g., default import vs named import).","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object."},{"fix":"npm install mobx mobx-react --save","cause":"MobX peer dependencies not installed.","error":"Cannot find module 'mobx-react'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}