{"id":20924165,"url":"https://github.com/s-pro/react-native-framework","last_synced_at":"2025-07-28T18:11:11.913Z","repository":{"id":57341076,"uuid":"54893225","full_name":"S-PRO/react-native-framework","owner":"S-PRO","description":null,"archived":false,"fork":false,"pushed_at":"2016-10-01T04:31:06.000Z","size":536,"stargazers_count":7,"open_issues_count":1,"forks_count":4,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-22T00:28:16.766Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/S-PRO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-28T13:14:24.000Z","updated_at":"2017-05-23T20:23:19.000Z","dependencies_parsed_at":"2022-09-08T02:35:46.617Z","dependency_job_id":null,"html_url":"https://github.com/S-PRO/react-native-framework","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-PRO%2Freact-native-framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-PRO%2Freact-native-framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-PRO%2Freact-native-framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/S-PRO%2Freact-native-framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/S-PRO","download_url":"https://codeload.github.com/S-PRO/react-native-framework/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253981694,"owners_count":21994318,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T20:19:51.550Z","updated_at":"2025-05-13T16:30:53.332Z","avatar_url":"https://github.com/S-PRO.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-framework\n\n## How to install:\n\n```shell\nnpm i react-native-ui-framework --save\n```\n\n***\n\n## Icons Component\nhttps://github.com/oblador/react-native-vector-icons\n\n#### example:\n\n```javascript\nvar Icon = require('react-native-vector-icons/FontAwesome');\n...\nrender() {\n    return (\n        \u003cView\u003e\n            \u003cIcon name=\"rocket\" size={30} color=\"#900\" /\u003e\n        \u003c/View\u003e\n    );\n}\n```\n\n***\n\n##  Sidebar component\nhttps://github.com/react-native-fellowship/react-native-side-menu\n\n\n#### example:\n\n```javascript\nconst SideMenu = require('react-native-side-menu');\n\nclass ContentView extends React.Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cText style={styles.welcome}\u003e\n          Welcome to React Native!\n        \u003c/Text\u003e\n        \u003cText style={styles.instructions}\u003e\n          To get started, edit index.ios.js\n        \u003c/Text\u003e\n        \u003cText style={styles.instructions}\u003e\n          Press Cmd+R to reload,{'\\n'}\n          Cmd+Control+Z for dev menu\n        \u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nclass Application extends React.Component {\n  render() {\n    const menu = \u003cMenu navigator={navigator}/\u003e;\n\n    return (\n      \u003cSideMenu menu={menu}\u003e\n        \u003cContentView/\u003e\n      \u003c/SideMenu\u003e\n    );\n  }\n}\n```\n\n***\n\n## ListItem component\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/ListItem/ListItem.png)\n\n####example:\n```javascript\nimport ListItem from './src/ListItem';\n\n...\nvar ds = new ListView.DataSource({rowHasChanged: (r1, r2) =\u003e r1 !== r2});\n...\nthis.state = {\n              dataSource: ds.cloneWithRows([{name:'Sample Text Item 1', icon:'tree'},\n                                            {name:'Sample Text Item 2', icon:'beer'},\n                                            {name:'Long Sample Text Item' +\n                                                  'Long Sample Text Item' +\n                                                  'Long Sample Text Item' +\n                                                  'Long Sample Text Item ', icon:'rocket'}])};\n\n...\n\n\nrender() {\n    return (\n        \u003cListView style={{marginTop: 70, flexDirection: 'column'}} dataSource={this.state.dataSource}\n                  renderRow={(rowData) =\u003e {\n                   return (\u003cListItem\u003e\n                              \u003cIcon itemType={'icon'} name={rowData.icon}/\u003e\n                              \u003cText usersStyles={{color: '#f00'}} itemType={'text'}\u003e{rowData.name}\u003c/Text\u003e\n                              \u003cButtonRoyal itemType={'button'}\u003eGo\u003c/ButtonRoyal\u003e\n                           \u003c/ListItem\u003e)}}\n        /\u003e\n    );\n}\n```\n#### API\n\n* `textSize` - Size of text with `itemType={'text'}`\n* `textColor` - Text of text with `itemType={'text'}`\n* `noteColor` - Color of text with `itemType={'text'}`\n* `backgroundColor` - Background color for row\n* `borderColor` - Border color for row\n* `Inner Items`:\n    * For each inner item You can set custom styles - property:\n        * `usersStyles={{color: '#f00'}}`\n\n***\n\n## ButtonBar component\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/ButtonBar/ButtonBar.png)\n####example:\n```javascript\nimport ButtonBar from './src/ButtonBar'\n\nimport {ButtonAssertive, ButtonBalanced, ButtonCalm} from './src/Button';\n\nclass ReactNativeUI extends Component {\n    render() {\n        return (\n            \u003cView\u003e\n                \u003cButtonBar\u003e\n                    \u003cButtonAssertive\u003eAssertive\u003c/ButtonAssertive\u003e\n                    \u003cButtonBalanced\u003eBalanced\u003c/ButtonBalanced\u003e\n                    \u003cButtonCalm\u003eCalm\u003c/ButtonCalm\u003e\n                    \u003cButtonCalm\u003eCalm\u003c/ButtonCalm\u003e\n                \u003c/ButtonBar\u003e\n                \u003cButtonBar\u003e\n                    \u003cButtonCalm\u003eCalm\u003c/ButtonCalm\u003e\n                    \u003cButtonCalm\u003eCalm\u003c/ButtonCalm\u003e\n                    \u003cButtonCalm\u003eCalm\u003c/ButtonCalm\u003e\n                \u003c/ButtonBar\u003e\n                \u003cButtonBar\u003e\n                    \u003cButtonCalm\u003eCalm\u003c/ButtonCalm\u003e\n                    \u003cButtonCalm\u003eCalm\u003c/ButtonCalm\u003e\n                \u003c/ButtonBar\u003e\n\n            \u003c/View\u003e\n        );\n    }\n}\n```\n\n***\n\n## CheckBox component\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/CheckBox/CheckBox.png)\n####example:\n```javascript\nimport CheckBox from './src/CheckBox'\n\nclass ReactNativeUI extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {checked1: true,\n                      checked2: true,\n                      checked3: true};\n    }\n\n    changeChecked(obj) {\n        this.setState(obj);\n    }\n    render() {\n        return (\n            \u003cView\u003e\n                \u003cCheckBox\n                    icon={'./check_mark.png'}\n                    checked={this.state.checked1}\n                    onToggle={(checked) =\u003e this.changeChecked({checked1: checked})}\n                \u003etest checkbox 1\u003c/CheckBox\u003e\n                \u003cCheckBox\n                    checked={this.state.checked2}\n                    onToggle={(checked) =\u003e this.changeChecked({checked2: checked})}\n                \u003etest checkbox 2\u003c/CheckBox\u003e\n                \u003cCheckBox\n                    checked={this.state.checked3}\n                    onToggle={(checked) =\u003e this.changeChecked({checked3: checked})}\n                \u003etest checkbox 3\u003c/CheckBox\u003e\n            \u003c/View\u003e\n        );\n    }\n}\n```\n#### API\n\n* `checked` - initial state of checkbox. Default: false\n* `onPress` - function that will be invoked by pressing to checkbox with checked property as argument.\n* `size` - Diameter of circle. Minimum: `15`, default: `17`\n* `outerColor` - Color of outer circle. Default: `#387ef5`\n* `markColor` - Color of check mark. Default: `#fff`\n* `borderColor` - Color of border. Default: `#ddd`\n* `labelPosition` - Label rendering position. Default: `right`, may be `right` or `left`\n\n***\n\n## Header component\n\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/Header/Header.png)\n\n#### example:\n\n```javascript\nimport Header from 'react-native-framework';\n\nexport default class TestHeader extends Component{\n    render(){\n        return(\n            \u003cView\u003e\n                \u003cHeader styles={styles.header}\u003e\n                    \u003cText\u003eWelcome to React Native\u003c/Text\u003e\n                \u003c/Header\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n\nconst styles = StyleSheet.create({\n    header:{\n        backgroundColor:'#444'\n    }\n});\n```\n\n#### API\n\n* `styles` - custom user styles for View component\n    \n\n## Footer component\n\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/Footer/Footer.png)\n\n#### example:\n\n```javascript\nimport Footer from 'react-native-framework';\n\nexport default class TestFooter extends Component{\n    render(){\n        return(\n            \u003cView\u003e\n                \u003cFooter styles={styles.footer}\u003e\n                    \u003cText\u003eWelcome to React Native\u003c/Text\u003e\n                \u003c/Footer\u003e\n\n            \u003c/View\u003e\n        )\n    }\n}\n\nconst styles = StyleSheet.create({\n    footer:{\n        backgroundColor:'#444'\n    }\n});\n```\n\n#### API\n\n* `styles` - custom user styles for View component\n\n\n## Form component\n\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/Form/form.png)\n\n#### example:\n\n```javascript\nimport { Form, FormInput} from '../src/Form'\n\nexport default class TestForm extends Component{\n    constructor(props){\n        super(props);\n        this.state = {\n            firstname:'John',\n            lastname:'Test',\n            email:'john@testmail.com'\n        }\n    }\n    render(){\n        return(\n            \u003cView style={{marginTop:100, marginLeft:10, marginRight:10}}\u003e\n                \u003cForm ref=\"form\"\u003e\n                    \u003cFormInput\n                        required={true}\n                        value={this.state.firstname}\n                        textChanged={this.textChanged.bind(this)}\n                        key=\"firstname\"/\u003e\n                    \u003cFormInput\n                        required={true}\n                        value={this.state.lastname}\n                        textChanged={this.textChanged.bind(this)}\n                        key=\"lastname\"/\u003e\n                    \u003cFormInput\n                        required={true}\n                        value={this.state.email}\n                        textChanged={this.textChanged.bind(this)}\n                        key=\"email\"/\u003e\n\n                \u003c/Form\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n```\n\n#### API:\n* `FormInput` - custom TextInput wrapped in styles and highlight (validation in future)\n    \n    \n## FormInput component\n\n\n#### example:\n\n```javascript\nimport { Form, FormInput } from 'react-native-framework';\n\nclass TestFormInput extends Component{\n    render(){\n        return(\n            \u003cView\u003e\n                \u003cForm\u003e\n                    \u003cFormInput\n                        required={true}\n                        value={this.state.lastname}\n                        textChanged={this.textChanged.bind(this)}\n                        key=\"lastname\"/\u003e\n                \u003c/Form\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n\n```\n\n#### API:\n* `value` - value for component,\n* `textChanged` - method to update value in parent component,\n* `styles` - custom user styles for TextInput component,\n* `highlight` - custom onFocus highlight style - borderColor, backgroundColor;\n    \n## NotificationBox component\n\n\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/NotificationBox/NotificationBox.png)\n\n#### example:\n\n```javascript\nimport { SystemMessage, SuccessMessage, ErrorMessage} from '../src/NotificationBox';\n\nexport default class TestNotificationBox extends Component{\n    render(){\n        return(\n            \u003cView style={{marginTop:100, marginLeft:10, marginRight:10}}\u003e\n                \u003cSystemMessage message=\"System message box\"/\u003e\n                \u003cSuccessMessage message=\"Success message box\"/\u003e\n                \u003cErrorMessage message=\"Error message box\"/\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n```\n\n#### API:\n* `success` - bool value,\n* `failure` - bool value,\n* `message` - message to be displayed,\n* `SuccessMessage` - custom component with set styles,\n* `SystemMessage` - custom component with set styles,\n* `ErrorMessage` - custom component with set styles,\n    \n    \n## Select component\n\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/Select/select.png)\n\n#### example:\n\n```javascript\nimport Select from 'react-native-framework';\n\nexport default class TestSelect extends Component{\n    constructor(props){\n        super(props);\n        this.state = {\n            chosenItem:1,\n            listOfProps:[1,2,3,4,5,6,7,8,9]\n        };\n    }\n    update(){\n        console.log('updated')\n    }\n    render(){\n        return(\n            \u003cView style={styles.container}\u003e\n                \u003cSelect value={this.state.chosenItem} update={this.update.bind(this)} options={this.state.listOfProps} /\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n\nconst styles = StyleSheet.create({\n    container:{\n        marginTop:50\n    }\n});\n```\n\n#### API:\n* `options` - list of options to display,\n* `value` - current value,\n* `update` - update callback;\n\n\n## TabBar component:\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/TabBar/Tabbar%201.png)\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/TabBar/Tabbar2.png)\n\n#### example:\n\n```javascript\nimport TabBar from 'react-native-framework';\n\n\nexport default class TestTabBar extends Component{\n    constructor(props){\n        super(props);\n        this.state = {\n            page:'FIRST'\n        };\n    }\n\n    onSelect(name){\n        this.setState({\n            page:name\n        });\n    }\n\n    render(){\n        return(\n            \u003cView\u003e\n                \u003cTabBar selected={this.state.page} style={{backgroundColor:'white'}}\n                        selectedStyle={{color:'red'}} onSelect={el=\u003ethis.onSelect(el.props.name)}\u003e\n                    \u003cText name=\"FIRST\"\u003e1\u003c/Text\u003e\n                    \u003cText name=\"SECOND\"\u003e2\u003c/Text\u003e\n                    \u003cText name=\"THIRD\"\u003e3\u003c/Text\u003e\n                    \u003cText name=\"FOURTH\"\u003e4\u003c/Text\u003e\n                    \u003cText name=\"FIFTH\"\u003e5\u003c/Text\u003e\n                \u003c/TabBar\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n\nconst styles = StyleSheet.create({\n    backgroundColor:'red'\n});\n\n```\n\n#### API:\n* `selected` - current selected value,\n* `onSelect` - callback when changes selection,\n* `selectedStyle` - selected tab styling,\n* `locked` - disable certain tab\n    \n    \n## Button component\n\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/Button/Button.png)\n\n#### example:\n```javascript\nimport {ButtonStable,\n    ButtonAssertive,\n    ButtonBalanced,\n    ButtonCalm,\n    ButtonDark,\n    ButtonEnergized,\n    ButtonLight,\n    ButtonPositive,\n    ButtonRoyal} from '../src/Button/index'\n\n\nexport default class TestButton extends Component{\n    constructor(props){\n        super(props);\n    }\n\n    render(){\n        return(\n            \u003cView\u003e\n                \u003cButtonStable\u003eButton Stable\u003c/ButtonStable\u003e\n                \u003cButtonAssertive\u003eAssertive\u003c/ButtonAssertive\u003e\n                \u003cButtonBalanced\u003eBalanced\u003c/ButtonBalanced\u003e\n                \u003cButtonCalm\u003eCalm\u003c/ButtonCalm\u003e\n                \u003cButtonDark\u003eDark\u003c/ButtonDark\u003e\n                \u003cButtonEnergized\u003eEnergized\u003c/ButtonEnergized\u003e\n                \u003cButtonLight\u003eLight\u003c/ButtonLight\u003e\n                \u003cButtonPositive\u003ePositive\u003c/ButtonPositive\u003e\n                \u003cButtonRoyal\u003eRoyal\u003c/ButtonRoyal\u003e\n                \u003cButton highlightStyles={{backgroundColor:'grey'}}\u003eButton with only text\u003c/Button\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n```\n\n#### API:\n* `underlayColor` - color when button pressed,\n* `textStyles` - custom user styles for text inside button (only \u003cText\u003e component styling),\n* `highlightStyles` - custom user style for button container (only \u003cTouchableHighlight\u003e component styling);\n\n\n## ImageSlider component\n\n![Alt](https://github.com/S-PRO/react-native-framework/blob/develop/src/ImageSlider/ImageSlider.png)\n\n#### example:\n```javascript\nimport ImageSlider from '../src/ImageSlider';\n\nclass TestImageSlider extends Component{\n    constructor(props){\n        super(props);\n        this.state = {\n            images: []\n        }\n    }\n    render(){\n        return(\n            \u003cView style={{marginTop:200}}\u003e\n                \u003cImageSlider images={this.state.images} /\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n```\n\n#### API:\n* `images` - array of image uri's to be display     \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-pro%2Freact-native-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs-pro%2Freact-native-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-pro%2Freact-native-framework/lists"}