https://github.com/s-pro/react-native-framework
https://github.com/s-pro/react-native-framework
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/s-pro/react-native-framework
- Owner: S-PRO
- Created: 2016-03-28T13:14:24.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-10-01T04:31:06.000Z (over 9 years ago)
- Last Synced: 2025-04-22T00:28:16.766Z (about 1 year ago)
- Language: JavaScript
- Size: 523 KB
- Stars: 7
- Watchers: 8
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-framework
## How to install:
```shell
npm i react-native-ui-framework --save
```
***
## Icons Component
https://github.com/oblador/react-native-vector-icons
#### example:
```javascript
var Icon = require('react-native-vector-icons/FontAwesome');
...
render() {
return (
);
}
```
***
## Sidebar component
https://github.com/react-native-fellowship/react-native-side-menu
#### example:
```javascript
const SideMenu = require('react-native-side-menu');
class ContentView extends React.Component {
render() {
return (
Welcome to React Native!
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
);
}
}
class Application extends React.Component {
render() {
const menu = ;
return (
);
}
}
```
***
## ListItem component
####example:
```javascript
import ListItem from './src/ListItem';
...
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
...
this.state = {
dataSource: ds.cloneWithRows([{name:'Sample Text Item 1', icon:'tree'},
{name:'Sample Text Item 2', icon:'beer'},
{name:'Long Sample Text Item' +
'Long Sample Text Item' +
'Long Sample Text Item' +
'Long Sample Text Item ', icon:'rocket'}])};
...
render() {
return (
{
return (
{rowData.name}
Go
)}}
/>
);
}
```
#### API
* `textSize` - Size of text with `itemType={'text'}`
* `textColor` - Text of text with `itemType={'text'}`
* `noteColor` - Color of text with `itemType={'text'}`
* `backgroundColor` - Background color for row
* `borderColor` - Border color for row
* `Inner Items`:
* For each inner item You can set custom styles - property:
* `usersStyles={{color: '#f00'}}`
***
## ButtonBar component
####example:
```javascript
import ButtonBar from './src/ButtonBar'
import {ButtonAssertive, ButtonBalanced, ButtonCalm} from './src/Button';
class ReactNativeUI extends Component {
render() {
return (
Assertive
Balanced
Calm
Calm
Calm
Calm
Calm
Calm
Calm
);
}
}
```
***
## CheckBox component
####example:
```javascript
import CheckBox from './src/CheckBox'
class ReactNativeUI extends Component {
constructor(props) {
super(props);
this.state = {checked1: true,
checked2: true,
checked3: true};
}
changeChecked(obj) {
this.setState(obj);
}
render() {
return (
this.changeChecked({checked1: checked})}
>test checkbox 1
this.changeChecked({checked2: checked})}
>test checkbox 2
this.changeChecked({checked3: checked})}
>test checkbox 3
);
}
}
```
#### API
* `checked` - initial state of checkbox. Default: false
* `onPress` - function that will be invoked by pressing to checkbox with checked property as argument.
* `size` - Diameter of circle. Minimum: `15`, default: `17`
* `outerColor` - Color of outer circle. Default: `#387ef5`
* `markColor` - Color of check mark. Default: `#fff`
* `borderColor` - Color of border. Default: `#ddd`
* `labelPosition` - Label rendering position. Default: `right`, may be `right` or `left`
***
## Header component
#### example:
```javascript
import Header from 'react-native-framework';
export default class TestHeader extends Component{
render(){
return(
Welcome to React Native
)
}
}
const styles = StyleSheet.create({
header:{
backgroundColor:'#444'
}
});
```
#### API
* `styles` - custom user styles for View component
## Footer component
#### example:
```javascript
import Footer from 'react-native-framework';
export default class TestFooter extends Component{
render(){
return(
Welcome to React Native
)
}
}
const styles = StyleSheet.create({
footer:{
backgroundColor:'#444'
}
});
```
#### API
* `styles` - custom user styles for View component
## Form component
#### example:
```javascript
import { Form, FormInput} from '../src/Form'
export default class TestForm extends Component{
constructor(props){
super(props);
this.state = {
firstname:'John',
lastname:'Test',
email:'john@testmail.com'
}
}
render(){
return(
)
}
}
```
#### API:
* `FormInput` - custom TextInput wrapped in styles and highlight (validation in future)
## FormInput component
#### example:
```javascript
import { Form, FormInput } from 'react-native-framework';
class TestFormInput extends Component{
render(){
return(
)
}
}
```
#### API:
* `value` - value for component,
* `textChanged` - method to update value in parent component,
* `styles` - custom user styles for TextInput component,
* `highlight` - custom onFocus highlight style - borderColor, backgroundColor;
## NotificationBox component
#### example:
```javascript
import { SystemMessage, SuccessMessage, ErrorMessage} from '../src/NotificationBox';
export default class TestNotificationBox extends Component{
render(){
return(
)
}
}
```
#### API:
* `success` - bool value,
* `failure` - bool value,
* `message` - message to be displayed,
* `SuccessMessage` - custom component with set styles,
* `SystemMessage` - custom component with set styles,
* `ErrorMessage` - custom component with set styles,
## Select component
#### example:
```javascript
import Select from 'react-native-framework';
export default class TestSelect extends Component{
constructor(props){
super(props);
this.state = {
chosenItem:1,
listOfProps:[1,2,3,4,5,6,7,8,9]
};
}
update(){
console.log('updated')
}
render(){
return(
)
}
}
const styles = StyleSheet.create({
container:{
marginTop:50
}
});
```
#### API:
* `options` - list of options to display,
* `value` - current value,
* `update` - update callback;
## TabBar component:
#### example:
```javascript
import TabBar from 'react-native-framework';
export default class TestTabBar extends Component{
constructor(props){
super(props);
this.state = {
page:'FIRST'
};
}
onSelect(name){
this.setState({
page:name
});
}
render(){
return(
this.onSelect(el.props.name)}>
1
2
3
4
5
)
}
}
const styles = StyleSheet.create({
backgroundColor:'red'
});
```
#### API:
* `selected` - current selected value,
* `onSelect` - callback when changes selection,
* `selectedStyle` - selected tab styling,
* `locked` - disable certain tab
## Button component
#### example:
```javascript
import {ButtonStable,
ButtonAssertive,
ButtonBalanced,
ButtonCalm,
ButtonDark,
ButtonEnergized,
ButtonLight,
ButtonPositive,
ButtonRoyal} from '../src/Button/index'
export default class TestButton extends Component{
constructor(props){
super(props);
}
render(){
return(
Button Stable
Assertive
Balanced
Calm
Dark
Energized
Light
Positive
Royal
Button with only text
)
}
}
```
#### API:
* `underlayColor` - color when button pressed,
* `textStyles` - custom user styles for text inside button (only component styling),
* `highlightStyles` - custom user style for button container (only component styling);
## ImageSlider component
#### example:
```javascript
import ImageSlider from '../src/ImageSlider';
class TestImageSlider extends Component{
constructor(props){
super(props);
this.state = {
images: []
}
}
render(){
return(
)
}
}
```
#### API:
* `images` - array of image uri's to be display