React Navigation Scroll View like transition? - reactjs

Question

I want to do something like:
Is this possible?
The default is like this:
Thanks.

Answer 1

I believe the two effects you are showing are the same. The only difference is that the desired one has navigation bar at the top which has an animation that looks like the bar is standing still while the text on it changed. It you add a navigation bar to your example you would see that they are the same.
Update
The following code achieve the visual effect. Note that I used a TabNavigator instead of a StackNavigator:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
const InitialScreen = (props) =>
<View style={[styles.container, { backgroundColor: 'gray' }]}>
<TouchableOpacity onPress={() => props.navigation.navigate('Final')}>
<Text>Initial Screen</Text>
</TouchableOpacity>
</View>;
const FinalScreen = (props) =>
<View style={[styles.container, { backgroundColor: 'pink' }]}>
<TouchableOpacity onPress={() => props.navigation.navigate('Initial')}>
<Text>Final Screen</Text>
</TouchableOpacity>
</View>;
const App = TabNavigator({
Initial: { screen: InitialScreen },
Final: { screen: FinalScreen },
}, {
animationEnabled: true,
navigationOptions: {
tabBarVisible: false,
},
});
AppRegistry.registerComponent('testTransition', () => App);
Put it in your index.ios.js to try it out and play around with it :P