Name: react-native-copilot
Owner: OK GROW!
Description: Step-by-step walkthrough for your react native app
Created: 2017-10-06 17:32:03.0
Updated: 2018-05-25 05:56:50.0
Pushed: 2018-05-24 22:36:08.0
Size: 331
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Step-by-step walkthrough for your react native app
install --save @okgrow/react-native-copilot
Optional: If you want to have the smooth SVG animation, you should install and link react-native-svg
. If you are using Expo, you can skip this as Expo comes with react-native-svg
.
install --save react-native-svg
t-native link react-native-svg
Use the copilot()
higher order component for the screen component that you want to use copilot with:
rt { copilot } from '@okgrow/react-native-copilot';
s HomeScreen extends Component { /* ... */ }
rt default copilot()(HomeScreen);
Before defining walkthrough steps for your react elements, you must make them walkthroughable
. The easiest way to do that for built-in react native components, is using the walkthroughable
HOC. Then you must wrap the element with CopilotStep
.
rt { copilot, walkthroughable, CopilotStep } from '@okgrow/react-native-copilot';
t CopilotText = walkthroughable(Text);
s HomeScreen {
nder() {
return (
<View>
<CopilotStep text="This is a hello world example!" order={1} name="hello">
<CopilotText>Hello world!</CopilotText>
</CopilotStep>
</View>
);
Every CopilotStep
must have these props:
In order to start the tutorial, you can call the start
prop function in the root component that is injected by copilot
:
s HomeScreen extends Component {
ndleStartButtonPress() {
this.props.start();
nder() {
// ...
rt default copilot()(HomeScreen);
If you are looking for a working example, please check out this link.
The overlay in react-native copilot is the component that draws the dark transparent over the root component. React-native copilot comes with two overlay components: view
and svg
.
The view
overlay uses 4 rectangles drawn around the target element using the <View />
component. We don't recommend using animation with this overlay since it's sluggish on some devices specially on Android devices.
The svg
overlay uses an SVG path component for drawing the overlay. It offers a nice and smooth animation but it depends on react-native-svg
. If you are using expo, you don't need to install anything and the svg overlay works out of the box. If not, you need to install and this package:
install --save react-native-svg
t-native link react-native-svg
You can specify the overlay when applying the copilot
HOC:
lot({
erlay: 'svg', // or 'view'
imated true, // or false
ootComponent);
You can customize the tooltip by passing a component to the copilot
HOC maker. If you are looking for an example tooltip component, take a look at the default tooltip implementation.
t TooltipComponent = ({
FirstStep,
LastStep,
ndleNext,
ndlePrev,
ndleStop,
rrentStep,
> (
...
lot({
oltipComponent: TooltipComponent
ootComponent)
The components wrapped inside CopilotStep
, will receive a copilot
prop of type Object
which the outermost rendered element of the component or the element that you want the tooltip be shown around, must extend.
rt { copilot, CopilotStep } from '@okgrow/react-native-copilot';
t CustomComponent = ({ copilot }) => <View {...copilot}><Text>Hello world!</Text></View>;
s HomeScreen {
nder() {
return (
<View>
<CopilotStep text="This is a hello world example!" order={1} name="hello">
<CustomComponent />
</CopilotStep>
</View>
);
Use this.props.start()
in the root component in order to trigger the tutorial. You can either invoke it with a touch event or in componentDidMount
. Note that the component and all its descendants must be mounted before starting the tutorial since the CopilotStep
s need to be registered first.
Issues and Pull Requests are always welcome.
Please read OK GROW!'s global contribution guidelines.
If you are interested in becoming a maintainer, get in touch with us by sending an email or opening an issue. You should already have code merged into the project. Active contributors are encouraged to get in touch.
Please note that all interactions in @okgrow's repos should follow our Code of Conduct.
MIT © 2017 OK GROW!, https://www.okgrow.com.