0

I want to do something like:

Transition

Is this possible?

The default is like this:

NotDesired

Thanks.

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

2 Comments

Check my edit for how I achieve the same visual effect.
awesome! hah. So simple! Thanks a tonne :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.