Image in Drawer updating several times

Asked

Viewed 168 times

0

I’m building an application with React Native and React Navigation, I’ve made all the settings and it’s working, however, when Drawer is triggered the image is updated multiple times without causing Spikes and failures when pushing buttons and etc.

Example: inserir a descrição da imagem aqui

As can be seen in the gif above, the logo keeps blinking several times, I put a warn console. in the rendering method and every blink of the image this method is called rendering the image again.

I’ve rewritten Drawer twice, one for a normal component and one for a stateless, however, it did not help.

Code of the Drawer:

import React, { Component } from 'react';
import {
    TouchableHighlight,
    View,
    ScrollView,
    Image,
    Platform,
    StyleSheet,
} from 'react-native';

import {
    RkStyleSheet,
    RkText,
    RkTheme,
} from 'react-native-ui-kitten';

import Icon from 'react-native-vector-icons/Ionicons';

import Routes from '../../config/navigation/routes';

import logo from '../../assets/smallLogo.png';

export default function SideNavigation(props) {
    const onMenuItemPressed = item => {
        props.navigation.navigate(item.id);
    };

    const renderIcon = () => (<Image style={styles.image} source={logo}/>);

    const renderMenuItem = item => (
        <TouchableHighlight style={styles.container} key={item.id} underlayColor={RkTheme.current.colors.button.underlay} activeOpacity={1} onPress={() => onMenuItemPressed(item)}>
            <View style={styles.content}>
                <View style={styles.content}>
                    <RkText style={styles.icon} rkType='moon primary xlarge'><Icon name={item.icon} size={25}/></RkText>
                    <RkText rkType='regular'>{item.title}</RkText>
                </View>
                {/*<RkText rkType='awesome secondaryColor small'>{FontAwesome.chevronRight}</RkText>*/}
            </View>
        </TouchableHighlight>
    );

    const renderMenu = () => Routes.map(renderMenuItem);

    return (
        <View style={styles.root}>
            <ScrollView showsVerticalScrollIndicator={false}>
                <View style={[styles.container, styles.content]}>
                    {renderIcon()}
                </View>
                {renderMenu()}
            </ScrollView>
        </View>
    )
}

const styles = RkStyleSheet.create(theme => ({
    container: {
        height: 60,
        paddingHorizontal: 16,
        borderTopWidth: StyleSheet.hairlineWidth,
        borderColor: theme.colors.border.base,
    },
    root: {
        paddingTop: Platform.OS === 'ios' ? 20 : 0,
        backgroundColor: theme.colors.screen.base
    },
    content: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    icon: {
        marginRight: 13,
    },
    image:{
        resizeMode: 'contain',
        maxWidth: 125
    }
}));

Where Drawer is called:

import React, {Component} from 'react';
import { View, Text} from 'react-native';
import Login from './screens/login';
import PasswordRecovery from './screens/passwordRecovery';
import Home from './screens/home';

import SideNavigator from './components/sideMenu';

import { bootstrap } from './config/bootstrap';
import {
    createDrawerNavigator,
    createStackNavigator,
    createAppContainer
} from 'react-navigation';
import { withRkTheme } from 'react-native-ui-kitten';
import NavBar from './components/navBar';
import AppRoutes from './config/navigation/routesBuilder';
import Splash from './screens/splash';

bootstrap();

const renderHeader = (navigation, props) => {
    const ThemedNavigationBar = withRkTheme(NavBar);
    return (
        <ThemedNavigationBar navigation={navigation} headerProps={props} />
    );
};

const App = createStackNavigator({
    Splash: Splash,
    Login: Login,
    PasswordRecovery: PasswordRecovery,
    Main: createDrawerNavigator({
        ...AppRoutes
    },{
        contentComponent: props => {
            const SideNav = withRkTheme(SideNavigator);
            return <SideNav {...props}/> 
        }
    }),
},
{
    headerMode: 'none',
})

export default createAppContainer(App);

I believe there isn’t much there, but where the other routes are generated:

import React from 'react';
import _ from 'lodash';
import { createStackNavigator } from 'react-navigation';
import { withRkTheme } from 'react-native-ui-kitten';
import transition from './transitions';

import Routes from './routes';
import NavBar from '../../components/navBar';

const main = {};
const flatRoutes = {};

const routeMapping = (route) => ({
    screen: withRkTheme(route.screen),
    title: route.title,
});

(Routes).forEach(route => {
    flatRoutes[route.id] = routeMapping(route);
    main[route.id] = routeMapping(route);
    route.children.forEach(nestedRoute => {
        flatRoutes[nestedRoute.id] = routeMapping(nestedRoute);
    });
});

const renderHeader = (navigation, props) => {
    const ThemedNavigationBar = withRkTheme(NavBar);
    return (
        <ThemedNavigationBar navigation={navigation} headerProps={props} />
    );
};

const DrawerRoutes = Object.keys(main).reduce((routes, name) => {
    const rawRoutes = routes;
    rawRoutes[name] = {
        name,
        screen: createStackNavigator(flatRoutes, {
            initialRouteName: name,
            headerMode: 'screen',
            cardStyle: { backgroundColor: 'transparent' },
            transitionConfig: transition,
            defaultNavigationOptions: ({ navigation }) => ({
                gesturesEnabled: false,
                header: (props) => renderHeader(navigation, props),
            }),
        }),
    };
    return rawRoutes;
}, {});

const AppRoutes = DrawerRoutes;

How can I correct this setback? I have to take the project to Reactnavigation 2?

PS. I already searched the github and found only that Issue on the subject, but it does not deal with that in itself, only with animation, however, I believe it has involvement.

EDITION 1: I returned the version of React-navigation, however, unsuccessfully. The image remains the same.

ISSUE 2: Yes! I tested both in emulator and physical device!

I am using the following versions:
Act: 16.8.3,
React-Native: 0.59.1,
React-Native-Esture-Handler: 1.1.0,
React-Native-ui-Kitten: 3.1.2,
React-navigation: 3.4.0

  • Have you tested in the emulator and on a physical device? In both the same happens?

  • Yes! Both in debug and release!

  • Tried to place the image directly in Return instead of using the renderIcon function?

  • Yes, it continues in the same way, the problem is that it calls several times the component, as if it needs to update several times :/

  • Sends code from the Header

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.