Comments (10)
A not-so-practical workaround to avoid this animation issue would then be to somehow pass the tab navigator's width and height before mount
We don't need that. The one frame delay is only for things like indicator which absolutely need the width before rendering. Tab view knows how to handle the layout before measurement is done, so that there is no delay. There were some missing styles in the scrollview based pager that iOS uses, which prevented it from working properly. I just pushed an update with fixed styles.
When testing, please also use react-native-debugger to make sure the embedded chrome debugger doesnt hide the issue
Debuggers often change the behaviour. So it's better not to use any debuggers while testing an issue.
from react-navigation.
This is still an issue on latest master as of this post. When testing, please also use react-native-debugger
to make sure the embedded chrome debugger doesnt hide the issue.
To reproduce, use a TabNavigator
as follows:
export const TestTabAnim = TabNavigator({
splash: {
screen: () => (<View style={{ flex: 1, backgroundColor: 'red' }}><Text>Tab 1</Text></View>)
},
login: {
screen: () => (<View style={{ flex: 1, backgroundColor: 'blue' }}><Text>Tab 1</Text></View>)
},
home: {
screen: () => (<View style={{ flex: 1, backgroundColor: 'purple' }}><Text>Tab 1</Text></View>)
}
})
I have tracked down the root cause, and it lies within the react-native-tab-view
dependency. More specifically, when an AnimatedTabView
tries to mount initially, it has no knowledge of the actual dimensions it should render in, and thus has no idea of what to animate to. In order to circumvent this, the TabViewTransitioner
component in react-native-tab-view
seems to use onLayout
to immediately change the animation target to the actual width and height of the view (https://github.com/react-native-community/react-native-tab-view/blob/master/src/TabViewTransitioner.js#L110). This causes a "one frame delay in rendering"
, which is also what you notice visually.
A not-so-practical workaround to avoid this animation issue would then be to somehow pass the tab navigator's width and height before mount. I tested this hypothesis by directly passing a hardcoded initialLayout={{ height: <height>, width: <width> }}
prop to the AnimatedTabView
from TabView
in react-native-navigation
(ie here: https://github.com/react-community/react-navigation/blob/master/src/views/TabView/TabView.js#L184). This resolves the issue albeit not in a very practical way :-).
@satya164 Seems like you are 'the man to talk to' re react-native-tab-view
-- any further insights? Thanks!
from react-navigation.
I think you need to set flex: 1
on your view.
from react-navigation.
Thanks @satya164 , but now it becomes this:
I added "flex: 1"
class HomeScreen extends React.Component {
render() {
return <View style={{flex: 1, flexDirection:'row', backgroundColor: 'red', height: 300,
justifyContent:'flex-end', paddingTop: 30}}>
<Text>Hello, Navigation!</Text>
</View>
}
}
btw, StackNavigator and DrawerNavigator don't have this issue. It's only TabNavigator.
from react-navigation.
So seems it only happens when you've flexDirection: row
. For example, the following works fine,
class HomeScreen extends React.Component {
render() {
return (
<View>
<View
style={{
flexDirection: 'row',
backgroundColor: 'red',
height: 300,
justifyContent: 'flex-end',
paddingTop: 30,
}}
>
<Text>Hello, Navigation!</Text>
</View>
</View>
);
}
}
from react-navigation.
hmm ... I ran your code snippet, but it still doesn't work.
The version that I'm using is "react-navigation": "^1.0.0-beta.1".
Let me dig more ...
from react-navigation.
@wenbinf hmm. I just tested this on simulator and couldn't reproduce the issue anymore.
from react-navigation.
For the record, this was the environment that I tested
- node v7.2.1
- iOS Simulator: iPhone 6 + iOS 8.4 / iOS 10, iPhone 7 + iOS 10.2
- real iphone 6 + iOS 10.2
- "react-navigation": "^1.0.0-beta.1"
- "react-native": "0.40.0",
Just in case someone on the Internet encounters the same problem :)
from react-navigation.
Thanks!
from react-navigation.
npm install --save react-community/react-navigation
node_modules/react-native/packager/packager.sh --reset-cache
Then it works!
Thanks a lot! @satya164
from react-navigation.
Related Issues (20)
- Tab Navigator inside Stack Navigator Cause Re-Render when do redux action HOT 3
- How to change the pressColor of a drawer menu item? HOT 5
- Title overlaps when the title length increases HOT 5
- `useLinkProps` not generating correct link in browser HOT 4
- **人请看:作为一名资深5年的RN告诉你这个烂库别用,尤其是新手 HOT 2
- In Android 14, app gets restarted when navigating from portrait to landscape screen HOT 2
- React Navigator URLs specified in linking are being ignored when matching urls HOT 9
- Navigate to Screen with Scrollview and back to current screen with ScrollView, cause scroll stuck (not smooth) HOT 3
- react-native-drawer-layout: right drawer stuck in open position. Won't close. HOT 7
- Stack header accessibility issue: tab order HOT 2
- Error using setParams and setOptions, rollback to version @react-navigation/[email protected] is mandatory HOT 11
- Error from useBottomTabBarHeight() limits its usage. HOT 5
- Regression in material top tabs scrolling behavior in RN 0.73 HOT 2
- Drawer headerRight button also opens in the headerLeft. HOT 2
- React native bottom tab bar pushing itself up when opening keyboard HOT 3
- ReactNavigation doesn't build on ReactNative 0.73.5 on iOS (on Android everything is ok) HOT 1
- React native tabview stuck on iOS while switching tabs HOT 3
- Screen presentation type "modal" flickers when opening datepicker on iPhone SE (2022)
- Header focus issue on AndroidTV HOT 1
- 'createDrawerNavigator' is crashing the app
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-navigation.