CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Jonovono
Jonovono

Reputation: 2085

React Navigation Scroll View like transition?

I want to do something like:

Transition

Is this possible?

The default is like this:

NotDesired

Thanks.

Upvotes: 0

Views: 576

Answers (1)

hyb175
hyb175

Reputation: 1291

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

Upvotes: 1

Related Questions