diff --git a/README.md b/README.md
index 7f0df7d..19d06a7 100755
--- a/README.md
+++ b/README.md
@@ -182,44 +182,48 @@ in [Editable Complex Components](#editable-complex-components).
```jsx
-state = {
- loading: true,
- users: [],
-}
-
-async componentWillMount() {
- const response = await fetch('https://randomuser.me/api/?results=5000')
- const data = await response.json()
-
- this.setState({
- loading: false,
- users: data.results.map(a => ({
- name: `${a.name.first} ${a.name.last}`,
- id: a.registered,
- })),
- })
-}
+() => {
+ const [loading, setLoading] = useState(true);
+ const [users, setUsers] = useState([]);
+
+ useEffect(() => {
+ const getUsers = async () => {
+ const response = await fetch('https://randomuser.me/api/?results=5000');
+ const data = await response.json();
+
+ setLoading(false);
+ setUsers(
+ data.results.map(a => ({
+ name: `${a.name.first} ${a.name.last}`,
+ id: a.registered,
+ }))
+ );
+ };
+
+ getUsers();
+ }, []);
-render() {
return (
- {this.state.loading ? 'Fetching' : 'Fetched'} 5000 users
+ {loading ? 'Fetching' : 'Fetched'} 5000 users
- {this.state.loading && }
+ {loading && }
- {this.state.users.map(a => - {a.name}
)}
+ {users.map(a => (
+ - {a.name}
+ ))}
- )
-}
+ );
+};
```
### App-bundled JSON with filter and selected value checkmarked
@@ -256,7 +260,7 @@ render() {
- Item 1
@@ -279,59 +283,84 @@ render() {
```jsx
-state = {
- loading: true,
- users: [],
- refreshing: false,
- amount: 10,
+function reducer(state, action) {
+ switch (action.type) {
+ case 'getUsers':
+ return { ...state, loading: false, users: action.payload };
+ case 'startRefresh':
+ return { ...state, refreshing: true };
+ case 'endRefresh':
+ return {
+ ...state,
+ refreshing: false,
+ amount: state.amount + 10,
+ users: [...state.users, ...action.payload],
+ };
+ default:
+ return state;
+ }
}
-async componentWillMount() {
- const users = await this.fetchUsers()
+() => {
+ const [{ loading, amount, refreshing, users }, dispatch] = useReducer(
+ reducer,
+ {
+ loading: true,
+ users: [],
+ refreshing: false,
+ amount: 10,
+ }
+ );
- this.setState({
- loading: false,
- users,
- })
-}
+ useEffect(() => {
+ const getUsers = async () => {
+ const data = await fetchUsers();
+ dispatch({ type: 'getUsers', payload: data });
+ };
-fetchUsers = async () => {
- const response = await fetch('https://randomuser.me/api/?results=10')
- const data = await response.json()
+ getUsers();
+ }, []);
- return data.results.map(a => ({
- name: `${a.name.first} ${a.name.last}`,
- id: a.registered,
- }))
-}
+ const fetchUsers = async () => {
+ const response = await fetch('https://randomuser.me/api/?results=10');
+ const data = await response.json();
-fetchMore = () => {
- this.setState({ refreshing: true }, async () => {
- const users = await this.fetchUsers()
- this.setState({ users: [...users, ...this.state.users], refreshing: false, amount: this.state.amount + 10 })
- })
-}
+ return data.results.map(a => ({
+ name: `${a.name.first} ${a.name.last}`,
+ id: a.login.uuid,
+ }));
+ };
+
+ const fetchMore = async () => {
+ dispatch({ type: 'startRefresh' });
+ const data = await fetchUsers();
+ dispatch({ type: 'endRefresh', payload: data });
+ };
-render() {
return (
- {this.state.loading ? 'Fetching' : 'Fetched'} {this.state.amount} users
+ {loading ? 'Fetching' : 'Fetched'} {amount} users
- {this.state.loading && }
+ {loading && }
- {this.state.users.map(a => - {a.name}
)}
+
+ {users.map(a => (
+ - {a.name}
+ ))}
+
- )
+ );
+};
}
```
@@ -395,14 +424,14 @@ An `image` prop can be a string pointing to the name of an asset in your "Asset
Catalog". In this case an `imageWidth` prop is recommended.
```jsx
-- {a.name}
- ))}
-
-
-
- );
- }
-}
+const Example4 = () => {
+ const [loading, setLoading] = useState(true);
+ const [users, setUsers] = useState([]);
+
+ useEffect(() => {
+ const getUsers = async () => {
+ const response = await fetch('https://randomuser.me/api/?results=5000');
+ const data = await response.json();
+
+ setLoading(false);
+ setUsers(
+ data.results.map(a => ({
+ name: `${a.name.first} ${a.name.last}`,
+ id: a.registered,
+ }))
+ );
+ };
+
+ getUsers();
+ }, []);
+
+ return (
+
+
+ {loading ? 'Fetching' : 'Fetched'} 5000 users
+
+
+ {loading && }
+
+
+
+ {users.map(a => (
+ - {a.name}
+ ))}
+
+
+
+ );
+};
export default Example4;
diff --git a/example/src/screens/Example6.js b/example/src/screens/Example6.js
index ba5793b..e5de288 100644
--- a/example/src/screens/Example6.js
+++ b/example/src/screens/Example6.js
@@ -6,53 +6,53 @@ import TableView from 'react-native-tableview';
const { Item, Section, Consts } = TableView;
-class Example6 extends React.Component {
- static navigationOptions = ({ navigation }) => ({
+const Example6 = ({ navigation }) => {
+ return (
+
+ alert(JSON.stringify(event))}
+ onChange={event => alert(`CHANGED:${JSON.stringify(event)}`)}
+ >
+
+ - Item 1
+ - Item 2
+ - Item 3
+ - Item 4
+
+
+ alert(JSON.stringify(event))}
+ onChange={event => alert(`CHANGED:${JSON.stringify(event)}`)}
+ >
+
+ - Item 1
+ - Item 2
+ - Item 3
+ - Item 4
+
+
+
+ );
+};
+
+Example6.navigationOptions = ({ navigation }) => {
+ const editing = navigation.getParam('editing');
+
+ return {
headerRight: (