- Why?
- What you can achieve
- How to use
- How to run the example
- API documentation
- Pitfalls
- Accessibility support
- Contributing
Spatial navigation is a hard problem on a TV app. Many solutions exist. React Native TV even has a core solution for it. But most existing solutions are not 100% cross-platform.
If you want to develop a TV app for AndroidTV + tvOS + web TV devices, then this package will be helpful.
The library is based on LRUD, which is a UI-agnostic lib that represents spatial navigation. The library is a React wrapper around the core logic of LRUD.
One of the goals of the lib is to have a simple and declarative API. No need for hooks or dark shenanigans. You just simply declare components.
Here's the kind of code you'll be able to achieve:
/**
* A simple component that shows a rabbit program
* We plug it to the Spatial Navigation easily using a FocusableView
*/
const Rabbit = ({ onSelect }) => (
<SpatialNavigationFocusableView onSelect={onSelect}>
{({ isFocused }) => <RabbitLayout isFocused={isFocused} />}
</SpatialNavigationFocusableView>
);
/**
* We can have as many nodes as we want. We group our rabbits in a horizontal spatial navigation view
* to spatially describe a row layout
* (it includes a spatial navigation node AND the horizontal styling for it)
*
* We also want to scroll horizontally, so we add a horizontal scrollview.
*/
const RabbitRow = () => (
<SpatialNavigationScrollView horizontal>
<SpatialNavigationView direction="horizontal">
{/* assuming you have rabbits data */}
{rabbits.map((_, index) => (
<Rabbit onSelect={() => console.log('selected rabbit ', index)} />
))}
</SpatialNavigationView>
</SpatialNavigationScrollView>
);
/**
* Now I simply add a page with a Root node and a vertical scroll view to scroll through my rows.
*/
const Page = () => (
<SpatialNavigationRoot>
<SpatialNavigationScrollView>
<RabbitRow />
<RabbitRow />
<RabbitRow />
<RabbitRow />
<RabbitRow />
<RabbitRow />
</SpatialNavigationScrollView>
</SpatialNavigationRoot>
);You should follow the tutorial.
If you want to run the example app in packages/example, take a look at the README
You can have a look at the documentation.
You should have a look at the pitfalls and troubleshooting.
Read the state of accessibility.
- Increment the package.json in
./packages/lib/package.json. - Commit the change
git commit -m "chore: bump version" - Add a tag matching the version
git tag vx.x.x && git push --tags - Generate the changelog and commit it
yarn changelog && git add CHANGELOG.md && git commit "chore: update changelog" - Then publish the package:
cd packages/lib
yarn publish:package
