BottomNavigation is slow on Android

[darmie]

Environment

System:
OS: macOS 10.14.4
CPU: (4) x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
Memory: 61.50 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.11.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 16, 19, 23, 25, 26, 27, 28
Build Tools: 26.0.1, 26.0.2, 27.0.3, 28.0.2, 28.0.3, 29.0.1
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: ^16.8.3 => 16.8.6
react-native: ^0.60.3 => 0.60.3
npmGlobalPackages:
react-native-cli: 2.0.1
react-native: 0.58.4

Description

When I implemented the BottomNavigation with the SceneMap function, It's fast on iOS but transition between views lags on android. It was created exactly as the example in the doc https://callstack.github.io/react-native-paper/bottom-navigation.html#usage

Reproducible Demo

state = {
		index: 0,
		routes: [
			{ key: 'home', title: 'Casting Calls' },
			{ key: 'applications', title: 'My Applications' },
			{ key: 'messages', title: 'Messages' },
			{ key: 'profile', title: 'Profile' },
		],
	};
_renderScene = BottomNavigation.SceneMap({
		home: Home,
		applications: Applications,
		messages: Messages,
		profile: Profile
});

	render() {
		const { routes, index } = this.state
		return (
			<View style={{flex: 1, backgroundColor: "#fff"}}>
			<BottomNavigation
                                 navigationState={this.state}
				onIndexChange={this._handleIndexChange.bind(this)}
				renderScene={this._renderScene}
				renderIcon={({ route, focused }) => {
					switch (route.key) {
						case 'home': {
							if (focused) {
								return (
									<View style={style.active}>
										<Icon style={style.iconActive} name="notifications" />
									</View>
								)
							}
							return <Icon style={{ color: "#fff" }} name="notifications" />
						}
						case 'applications': {
							if (focused) {
								return (
									<View style={style.active}>
										<Icon style={style.iconActive} name="page" />
									</View>
								)
							}
							return <Icon style={{ color: "#fff" }} name="page" />
						}
						case 'messages': {
							if (focused) {
								return (
									<View style={style.active}>
										<Icon style={style.iconActive} name="social-wall" />
									</View>
								)
							}
							return <Icon style={{ color: "#fff" }} name="social-wall" />
						}
						case 'profile': {
							if (focused) {
								return (
									<View style={style.active}>
										<Icon style={style.iconActive} name="user-profile" />
									</View>
								)
							}
							return <Icon style={{ color: "#fff" }} name="user-profile" />
						}
						default: return <View />
					}
				}}
			/>
			</View>
		)
	}

Video

Touch feed back takes up to ~2secs

[jayu]

Can you put your example on snack? Maybe too heavy tabs cause performance issues?

[uplamartya]

any update regarding this issue?

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.