https://github.com/slavahatnuke/ireactivity-native-simple-list-example
https://github.com/slavahatnuke/ireactivity-native-simple-list-example
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/slavahatnuke/ireactivity-native-simple-list-example
- Owner: slavahatnuke
- Created: 2017-04-08T00:35:20.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-10T13:20:58.000Z (about 8 years ago)
- Last Synced: 2025-01-28T23:31:16.746Z (4 months ago)
- Language: Objective-C
- Size: 129 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## iReactivity simple react native example
The main idea:
```javascript
import React, {Component} from 'react';
// native
import {
AppRegistry,
Text,
View,
Button
} from 'react-native';
// iReactivity binding functions
import {Provider, connect} from 'ireactivity';
const uid = () => Math.random().toString(35).slice(2, 8).toUpperCase();
// store, it's just an object.
const store = {
todos: [
{title: 'Todo #1', id: uid()},
{title: 'Todo #2', id: uid()}
]
};
const TodoView = ({todo, onRemove}) =>
{todo.title}
onRemove(todo)}
title={`[x]`}
color="#FF0000"
/>
;
const Todo = connect(TodoView, {
onRemove: (store) => (todo) => {
console.log('remove', todo.id);
store.todos = store.todos.filter((aTodo) => todo !== aTodo)
}
});
const TodosView = ({todos}) =>
{todos.map((todo) => )}
;
const Todos = connect(TodosView, {
todos: (store) => store.todos
});
const TodoPlusView = ({onClick}) =>
const TodoPlus = connect(TodoPlusView, {
onClick: (store) => () => {
let id = uid();
store.todos = [...store.todos, {title: `Todo #${id}`, id: id}]
}
});
const App = () =>
;
const AppRunner = () => ;
AppRegistry.registerComponent('ireactivityNativeSimpleListExample', () => AppRunner);
```
## How to start
- `npm install`
- `npm start`
## iReactivity
[https://www.npmjs.com/package/ireactivity](https://www.npmjs.com/package/ireactivity) - Simple React binding