b-steel

b-steel

Member Since 1 year ago

Oakland, CA

Experience Points
0
follower
Lessons Completed
0
follow
Best Reply Awards
21
repos

12 contributions in the last year

Pinned
⚡ 🚩Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)
⚡ First project through TOP
⚡ The open curriculum for learning web development
Activity
Dec
7
1 month ago
Activity icon
issue

b-steel issue comment xcarpentier/rn-tourguide

b-steel
b-steel

How to use multiple tours inside the same app?

So I have 5 Tabs in my App. I want to have different tours for each tab, how can I achieve this? I think since the Provider wraps the entire app, the controllers will act globally and there is no way to segregate TourGuideZone into different groups?

I realized that we can pass an integer to start() method and it will start the tour from that step on, but I am facing problem he ending a particular tour.

For example on Tab1 I just want tour zones 1 to 5. Tour Zone 6 is on a different screen. So how do I make the Tour guide stop at Zone number 5 in Tab 1?

b-steel
b-steel

@VickyStash I think it's probably because I didn't build the library or push it to npm. Pretty sure that what you get from npm is the 'lib/ folder, but that's not included in version control, so if you reference my branch you'll import whatever the main file is for the expo project (in your case it's XXX/node_modules/rn-tourguide/node_modules/expo/AppEntry.js).

Pretty sure you could build the 'lib/ folder yourself with npm run build or something similar and then just reference that folder instead package.json - local paths or you could just copy the whole src/ folder into your project and then just keep it there (would probably have to update a few deps for that)

I'm not really sure how node_modules stuff gets resolved, but I suppose you could maybe fork my branch and then edit the "main" section of package.json and get it working that way somehow.

Nov
28
1 month ago
Activity icon
issue

b-steel issue react-navigation/react-navigation

b-steel
b-steel

Header padding in @react-navigation/native-stack

Current behavior

If the default back button is hidden by passing {headerBackVisible: false, headerLeft: () => <HeaderBackButton/>} where the HeaderBackButton component is imported from @react-navigation/elements there is some padding to the left of the back button that is not there when using the default back button.

This issue is not the case when using the stack navigator from @react-navigatin/stack Simulator Screen Shot - iPhone SE (1st generation) - 2021-10-15 at 15 59 33 Simulator Screen Shot - iPhone SE (1st generation) - 2021-10-15 at 15 59 36

Expected behavior

Inserting HeaderBackButton for headerLeft should be identical to the default back button (visually)

Reproduction

https://github.com/b-steel/react-navigation-header-demo

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native 6.0.6
@react-navigation/stack 6.0.11
@react-navigation/native-stack 6.2.4
react-native-screens 3.4.0
react-native-gesture-handler 1.10.2
react-native https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz
expo 42.0.1
node 14.17.1
npm or yarn 1.22.15
Activity icon
issue

b-steel issue comment react-navigation/react-navigation

b-steel
b-steel

Header padding in @react-navigation/native-stack

Current behavior

If the default back button is hidden by passing {headerBackVisible: false, headerLeft: () => <HeaderBackButton/>} where the HeaderBackButton component is imported from @react-navigation/elements there is some padding to the left of the back button that is not there when using the default back button.

This issue is not the case when using the stack navigator from @react-navigatin/stack Simulator Screen Shot - iPhone SE (1st generation) - 2021-10-15 at 15 59 33 Simulator Screen Shot - iPhone SE (1st generation) - 2021-10-15 at 15 59 36

Expected behavior

Inserting HeaderBackButton for headerLeft should be identical to the default back button (visually)

Reproduction

https://github.com/b-steel/react-navigation-header-demo

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native 6.0.6
@react-navigation/stack 6.0.11
@react-navigation/native-stack 6.2.4
react-native-screens 3.4.0
react-native-gesture-handler 1.10.2
react-native https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz
expo 42.0.1
node 14.17.1
npm or yarn 1.22.15
b-steel
b-steel

@BologaMarius Thanks for all the info, much appreciated. I should have thought of passing a custom header everywhere to solve the issue.

Nov
21
2 months ago
Activity icon
created branch
createdAt 2 months ago
Activity icon
created repository
createdAt 2 months ago
Oct
27
2 months ago
push

b-steel push b-steel/rn-tourguide

b-steel
b-steel

Bugfix

Change stop function. It did set the tourKey back to '_default' but this resulted in the 'stop' event not being emitted for the current tour.

Now the stop function leaves the current tourKey value unchanged. It will change whenever another tour calls the start function or it's useTourController hook fires.

commit sha: 9c57bfaa022ca086945d9c00b7c38a2cdba01bda

push time in 2 months ago