This example shows how to use Hooks to create a counter in React Native. It also shows how to use ref to call setSelected() on a Native Base Accordion component (which seems to be undocumented).
import React, { useState, useRef, useCallback } from "react";
import { StyleSheet, Text, Button } from "react-native";
import { Accordion, Container, Content, Header } from "native-base";
function useCounter(initialValue, ms, selectRow) {
const [count, setCount] = useState(initialValue);
const intervalRef = useRef(null);
const start = useCallback(() => {
if (intervalRef.current !== null) {
return;
}
selectRow(count);
intervalRef.current = setInterval(() => {
setCount((c) => {
const newC = c < 2 ? c + 1 : 0;
selectRow(newC);
return newC;
});
}, ms);
}, []);
const stop = useCallback(() => {
if (intervalRef.current === null) {
return;
}
clearInterval(intervalRef.current);
intervalRef.current = null;
}, []);
const reset = useCallback(() => {
setCount(0);
selectRow(-1);
}, []);
return { count, start, stop, reset };
}
export default function App() {
const { count, start, stop, reset } = useCounter(0, 1000, (row) =>
_accordion.setSelected(row)
);
return (
<Container>
<Header />
<Content padder>
<Text>count => {count}</Text>
<Button onPress={start} title="start" />
<Button onPress={stop} title="stop" />
<Button onPress={reset} title="reset" />
<Accordion
ref={(c) => (_accordion = c)}
dataArray={[
{ title: "a", content: "A" },
{ title: "b", content: "B" },
{ title: "c", content: "C" },
]}
expanded={count}
></Accordion>
</Content>
</Container>
);
}
The counter code is from https://medium.com/@sdolidze/the-iceberg-of-react-hooks-af0b588f43fb, which explains how to use Hooks properly for this sort of thing.