CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
developer
developer

Reputation: 229

Going back to previous page works but with no animation with react-native

I just started development in React Native on iOS simulator. I'm able to navigate from one page to the other, but when I press the back button to bring the user to the previous page, it works but without the default iOS transition style.

import React, {Component} from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import { Icon,Container, Header, Content, List, ListItem, Thumbnail, Text, Left, Body, Right, Button } from 'native-base';


class NewScreen extends Component{
  render() {
    return (
        <Container>
            <Header>
                <Left>
                    <Icon  name="arrow-back" onPress={() =>
                  this.props.navigation.goBack()}/>
                </Left>
            </Header>
            <Content>
            </Content>
        </Container>

Upvotes: 0

Views: 981

Answers (1)

D D Parmar
D D Parmar

Reputation: 137

You can use bellow code in your navigation options for left-to-right and right-to-left screen transition; for other slide transition styles you can search and better put as per requirement:

Router = StackNavigator({ Login: { screen: LoginScreen, },  Avatars: { screen: AvatarsScreen, } }, {
initialRouteName: 'Login',
headerMode: 'none',
transitionStyle: 'default',
navigationOptions: {
  headerTintColor: 'blue',
  gesturesEnabled: false,
  gesturesDirection: 'default',

},
transitionConfig: (sceneProps) => ({
  screenInterpolator: sceneProps => {
    if (sceneProps.scene.route.params != undefined && sceneProps.scene.route.params.footer == true) {
      //console.log("78 ", sceneProps);
    }
    else {
      const { layout, position, scene } = sceneProps;
      const { index } = scene;

      const translateX = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [layout.initWidth, 0, 0]
      });

      const opacity = position.interpolate({
        inputRange: [
          index - 1,
          index - 0.99,
          index,
          index + 0.99,
          index + 1
        ],
        outputRange: [0, 1, 1, 0.3, 0]
      });

      return { opacity, transform: [{ translateX }] };
    }
  }
}),

} )

Upvotes: 2

Related Questions