Veja rodando
Cinco passos no app de exemplo: o escurecimento, o furo em volta de cada alvo, a rolagem até um que está fora da tela, o card virando para cima e o destaque no fim.
Três peças
Um provider que guarda o tour, targets que marcam os elementos, e steps que referenciam esses targets pelo id.
import { Cicerone } from '@salve-software/react-native-cicerone';
<Cicerone.Provider steps={STEPS} autoStart={shouldRun}>
<Cicerone.Target id="viewfinder">
<Viewfinder />
</Cicerone.Target>
</Cicerone.Provider>;
- Cicerone.Provider
Guarda o tour, mede cada passo e desenha o overlay por cima dos filhos.
- Cicerone.Target
Marca um elemento. O step com o mesmo id mede ele quando chega a vez.
- steps
Texto, padding e raio de cada passo. O resto tem valor padrão.
- autoStart
O portão. Vire para true quando você decidir que o tour deve rodar.
Sem código nativo
TypeScript puro. Nada nosso para linkar ou recompilar.
Pronto para a New Architecture
Mede com measureInWindow, não com o findNodeHandle depreciado.
Lida com scroll
Um alvo abaixo da dobra é rolado até a viewport e medido quando o scroll assenta.
Nosso card ou o seu
O card embutido funciona de cara, e renderCard troca ele sem perder o holofote.
A posição segue o alvo
O card fica do lado que tem espaço, e a seta desliza quando o clamp afasta os dois.
Funciona aninhado
O overlay usa a própria caixa, então um provider dentro de um sheet ainda acerta o alvo.