transition progress

[aleedmanath]

Is there a way to get the transition progress for native stack?

react-native-screens for example has a useTransitionProgress progress hook to use with Animated API.

use-case: I'm not using default IOS header look and would like to experiment with alternative.

[grahammendick]

Hey, no there isn't. Could you let me know what you're trying to do, please? Would be great to understand why you're not using the default iOS header.

Also, if you're hiding the NavigationBar, you can still keep the swipe back in iOS if you set the backTitle

<NavigationBar hidden backTitle="something" />

[aleedmanath]

I'm experimenting with custom styling, to see what approach I want to take with navigation.

The TitleBar content didn't seem to customizable, e.g. changing fontSize of its nested text wouldn't show it.

I'm seeing I can just put a custom view inside the NavigationBar. But I wouldn't be able to animate it's styling on navigation.

    <NavigationBar backTitle="">
        <View style={{ height: 44, marginLeft: 30, justifyContent: 'center', alignItems: 'center' }}>
               <Text style={{ fontSize: 24 }}>Header</Text>
        </View>
    </NavigationBar>

[aleedmanath]

Ah I figured out I have to put a View inside the Navigation Bar to fix overflow issue that was happening with text. Is there a way the TitleBar text non-centered?

I'll see how far I can go with these native provided options.

[grahammendick]

Yea, the TitleBar content is fully customisable. For example, here's a non-centered title

<TitleBar style={{width: '100%'}}>
  <View style={{flex: 1, flexDirection: 'row'}}>
    <Text style={{fontSize: 12}}>Hello</Text>
  </View>
</TitleBar>

[aleedmanath]

Yea you're right, this worked.

    <TitleBar style={{  backgroundColor: 'green', width: '100%' }}>
       <Text style={{ fontSize: 36 }}>
          Navigation
       </Text>
      </TitleBar>

There's still some padding but I can always marginLeft if need be.

[aleedmanath]

In general, what I want is default IOS navigation feel without the default IOS look.

Right now I'm just testing to see what's possible and what approach to take.

It's evident with exposed components I can customize a decent amount.

For this issue question would be – if I hit a scenario that requires more customization, would such a hook be useful to have or at that point drop down to native and create custom component. I imagine you're drawing line between what to use Javascript logic for.

[grahammendick]

I really want to understand a usecase in depth before I can decide what to add to the Navigation router. The philosophy behind the Navigation router is that it's 100% native. There isn't any UI logic in the Navigation router (it doesn't contain a single View component). Instead it uses the underlying native apis. A useTransitionProgress hook is in line with that vision, so no problem there. But I'd need to understand more about what you're after before I could commit to building anything.

[aleedmanath]

Right now I'm just exploring the router and my original block has been resolved.

I'll go ahead and close this and when I'm further along if there's a need will reopen. Thanks again for your help.

[afkcodes]

@grahammendick i am also looking for something that would tell if the navigation transition is complete, in my case i am making an api call using react query when the data comes back in the screen the screen lags which has a list of image when the image is also rendering and also the transition is still in progress.

[grahammendick]

@afkcodes Could you post a video so I can understand what you mean, please?

[afkcodes]

sure @grahammendick Here, i had it in my phone :https://drive.google.com/file/d/12qtYQoD2HfBD6Lckjl0L78iCH2AjDcHp/view

Please download the video size went a bit big, here the whole screen is a scrollview, with images being mapped and displayed. If you can see sometimes when the images start to load while screen is transitioning the lags appear

[grahammendick]

@afkcodes Thanks for the video. I don't see any lag? Do you mean the images say 'loading'?

[afkcodes]

if you see the video when i navigate to the other screen there is a jerk.

[grahammendick]

What animation are you using for the transition?

[grahammendick]

I can't see a lag. It just looks like the animation you're using is non-linear. Why not use a linear animation - one that moves at a constant speed throughout the transition? That way it would be easier to see if there was any lag

[afkcodes]

sure will do that.