Styjun

I am building an application with React Native and React Navigation, I have made all the settings and it is working, however, when the drawer is fired the image is updated multiple times causing spikes and failures to trigger buttons contained in it.

e.g.:

I am using:

react: 16.8.3, 
react-native: 0.59.1, 
react-native-ui-kitten: ^3.1.2, 
react-navigation: ^3.4.0 

I was using version 3 of RN and to try to solve I went back to version 2 but without success.

I put some warnings in the method that executes the image and saw that it is called whenever there is this update.

I already changed the image in different sizes and formats but it also did not help.

I already tested on cell phones and emulators but with no success.

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
 
));

Drawer setup:

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);

Routes setup:

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;