Top AI Repos — open-source AI, indexed and scored
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
🚩Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)
| Date | Stars |
|---|---|
| 2026-07-24 | 861 |
| 2026-07-25 | 861 |
| 2026-07-28 | 861 |
| 2026-07-30 | 861 |
| 2026-07-31 | 861 |
| 2026-08-06 | 861 |
Today
— stars today
This week
— stars this week
This month
— stars this month
Momentum
0.0
growth rate 0.00%/day
<h1 align="center">RN-TourGuide</h1>
<p align="center">
A flexible <strong>tourguide</strong> for your react native app!
<br/><small>🎉 Webable 🎉</small>
<br/><small>(a rewriting of react-native-copilot)</small>
</p>
<p align="center">
<img width="250" src="https://www.dropbox.com/s/9heua3qgd66125k/rn-tourguide.gif?dl=0&raw=1" alt="RN Tourguide" />
</p>
<p align="center">
<a href="https://xcarpentier.github.io/rn-tourguide/">
🎉DEMO WEB 🎉
</a>
</p>
<div align="center">
<p align="center">
<a href="https://www.npmjs.com/package/rn-tourguide">
<img alt="npm downloads" src="https://img.shields.io/npm/dm/rn-tourguide.svg"/>
</a>
<a href="https://www.npmjs.com/package/rn-tourguide">
<img src="https://img.shields.io/npm/v/rn-tourguide.svg" alt="NPM Version" />
</a>
<a href="http://reactnative.gallery/xcarpentier/rn-tourguide">
<img src="https://img.shields.io/badge/reactnative.gallery-%F0%9F%8E%AC-green.svg"/></a>
</a>
<a href="#hire-an-expert">
<img src="https://img.shields.io/badge/%F0%9F%92%AA-hire%20an%20expert-brightgreen"/>
</a>
</p>
</div>
## Installation
```
yarn add rn-tourguide
```
```
yarn add react-native-svg
react-native link react-native-svg
```
If you are using Expo:
```
expo install react-native-svg
```
## Usage
```tsx
import {
TourGuideProvider, // Main provider
TourGuideZone, // Main wrapper of highlight component
TourGuideZoneByPosition, // Component to use mask on overlay (ie, position absolute)
useTourGuideController, // hook to start, etc.
} from 'rn-tourguide'
// Add <TourGuideProvider/> at the root of you app!
function App() {
return (
// If you added a statusbar in Andoid set androidStatusBarVisible: true as well to avoid vertical position issues
<TourGuideProvider {...{ borderRadius: 16 }}>
<AppContent />
</TourGuideProvider>
)
}
const AppContent = () => {
const iconProps = { size: 40, color: '#888' }
// Use Hooks to control!
const {
canStart, // a boolean indicate if you can start tour guide
start, // a function to start the tourguide
stop, // a function to stopping it
eventEmitter, // an object for listening some events
} = useTourGuideController()
// Can start at mount 🎉
// you need to wait until everything is registered 😁
React.useEffect(() => {
if (canStart) {
// 👈 test if you can start otherwise nothing will happen
start()
}
}, [canStart]) // 👈 don't miss it!
const handleOnStart = () => console.log('start')
const handleOnStop = () => console.log('stop')
const handleOnStepChange = () => console.log(`stepChange`)
React.useEffect(() => {
eventEmitter.on('start', handleOnStart)
eventEmitter.on('stop', handleOnStop)
eventEmitter.on('stepChange', handleOnStepChange)
return () => {
eventEmitter.off('start', handleOnStart)
eventEmitter.off('stop', handleOnStop)
eventEmitter.off('stepChange', handleOnStepChange)
}
}, [])
return (
<View style={styles.container}>
{/*
Use TourGuideZone only to wrap your component
*/}
<TourGuideZone
zone={2}
text={'A react-native-copilot remastered! 🎉'}
borderRadius={16}
>
<Text style={styles.title}>
{'Welcome to the demo of\n"rn-tourguide"'}
</Text>
</TourGuideZone>
<View style={styles.middleView}>
<TouchableOpacity style={styles.button} onPress={() => start()}>
<Text style={styles.buttonText}>START THE TUTORIAL!</Text>
</TouchableOpacity>
<TourGuideZone zone={3} shape={'rectangle_and_keep'}>
<TouchableOpacity style={styles.button} onPress={() => start(4)}>
<Text style={styles.buttonText}>Step 4</Text>
</TouchableOpacity>
</TourGuideZone>
<TouchableOpacity style={styles.button} onPress={() => start(2)}>
<Text style={styles.buttonText}>Step 2</Text>
</TouchablExcerpt of 11,215 characters
Read on GitHub
143
120
28
9
6
5
4
3
3
2
2
2
Xavier Cazalot · France
2
2
Richard Littauer · @sustainers
2
2
1
1
1
1
Would you bet a product on this? Bounded 0–100 and slow moving.
matched fp:43d9193d039679ca, topic:tutorial, readme:tutorial
matched fp:43d9193d039679ca, topic:animation