react-native-tableview

Checkmark can also be applied by adding the selected prop on the Item.

`jsx

`

$3

For a full list of props on all components check out
the typescript definitions file.

$3

#### scrollTo()

Scrolls to a set of coordinates on the tableview.

`ts
/**
* @param x Horizontal pixels to scroll
* @param y Vertical pixels to scroll
* @param animated With animation or not
*/
scrollTo(x: number, y: number, animated: boolean): void;
`

#### scrollToIndex()

Scroll to an item in a section

`ts
/**
* @param params scroll params
* @param params.index index of the cell
* @param params.section index of the section @default 0
* @param params.animated scroll with animation @default true
*/
scrollToIndex(params: { index: number, section?: number, animated?: boolean }): void;
`

$3

Items in the list can be either TableView.Item or TableView.Cell. An Item
is simply text. A Cell can be any complex component. However, only Items can
be edited or moved. There are also issues with Cells re-rendering on data
changes (#19) that can be avoided by using Items. If you want to be able to
re-render, edit or move a complex component, use reactModuleForCell, described
in Editable Complex Components.

Examples

$3

!demo-3

`jsx
() => {
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 && }

style={{ flex: 1 }}
tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}
>


`jsx
// list spanish provinces and add 'All states' item at the beginning

const country = 'ES';

return (

Showing States in Spain
style={{ flex: 1 }}
json="states"
selectedValue="ES53"
filter={country=='${country}'}
tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}
onPress={event => alert(JSON.stringify(event))}
/>

);
`

$3

!editing example

`jsx
render() {
return (

style={{ flex: 1 }}
editing={navigation.getParam('editing')}
>


`jsx
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;
}
}

() => {
const [{ loading, amount, refreshing, users }, dispatch] = useReducer(
reducer,
{
loading: true,
users: [],
refreshing: false,
amount: 10,
}
);

useEffect(() => {
const getUsers = async () => {
const data = await fetchUsers();
dispatch({ type: 'getUsers', payload: data });
};

getUsers();
}, []);

const fetchUsers = async () => {
const response = await fetch('https://randomuser.me/api/?results=10');
const data = await response.json();

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 });
};

return (


{loading ? 'Fetching' : 'Fetched'} {amount} users


{loading && }

style={{ flex: 1 }}
tableViewCellStyle={TableView.Consts.CellStyle.Subtitle}
canRefresh
refreshing={refreshing}
onRefresh={fetchMore}
>


- tableViewCellStyle
- tableViewCellEditingStyle
- separatorStyle
- contentInset
- contentOffset
- scrollIndicatorInsets
- cellLayoutMargins
- cellSeparatorInset

Colors:

- textColor
- tintColor
- selectedTextColor
- detailTextColor
- separatorColor
- headerTextColor
- headerBackgroundColor
- footerTextColor

Base font:

- fontSize
- fontWeight
- fontStyle
- fontFamily

"Subtitle" font:

- detailFontSize
- detailFontWeight
- detailFontStyle
- detailFontFamily

Header font:

- headerFontSize
- headerFontWeight
- headerFontStyle
- headerFontFamily

Footer font:

- footerFontSize
- footerFontWeight
- footerFontStyle
- footerFontFamily

Images / Icons

An Item component takes an image and an optional imageWidth prop.

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

`

Alternatively, you can require the image from your local app code. In this case
an imageWidth is unnecessary.

`jsx

`

$3

Only Items can be edited or moved. However you can create a complex component
that is referenced by an Item using reactModuleForCell. You will need to do
several things to set this up.

1. Write your view component.
2. Pass the name of your view component as a prop in your
component.
3. Create a list of s in your TableView, passing props intended for your
view component.
4. Register your view component as an App root view.

$3

For example,

`jsx
//Should be pure... setState on top-level component doesn't seem to work

class TableViewExampleCell extends React.Component {
render() {
var style = { borderColor: '#aaaaaa', borderWidth: 1, borderRadius: 3 };

// Fill the full native table cell height.
style.flex = 1;

// All Item props get passed to this cell inside this.props.data. Use them to control the rendering, for example background color:
if (this.props.data.backgroundColor !== undefined) {
style.backgroundColor = this.props.data.backgroundColor;
}

return (


section:{this.props.section},row:{this.props.row},label:
{this.props.data.label}

message:{this.props.data.message}

);
}
}
`

For more examples, see examples/TableViewDemo.

#### Pass component as prop.

`jsx

`

#### Create list of items, passing props

`jsx


Note that the props you pass must be primitive types: they cannot be objects.
Also, note that the props become properties of the data prop in your
reactModuleForCell component. That is, you pass label="foo" and in your
component you pick it up as this.props.data.label.

#### Register your component.

Each cell you render becomes a reuseable root view or App.

`js
var { AppRegistry } = React;

...

AppRegistry.registerComponent('TableViewExample', () => TableViewExample);
`

When debugging, you will see the message:

`
Running application "TableViewExample" with appParams: { / params / }. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
``

multiple times. While slightly annoying, this does not seem to affect
performance. You may also see message
Unbalanced calls start/end for tag 5.