32penkin
commented
5 years ago Hello @NBoychev ! Thanks for your report. I've tested the issue and I believe that there is some mistake in your code. Below you can check a similar working example:
-
GIF:
-
Code:
- Container:
import React from 'react'; import { NavigationScreenConfig, NavigationScreenProps, } from 'react-navigation'; import { connect } from 'react-redux'; import { TestComp } from './test.component'; import { TopNavigationElement } from '@src/core/navigation/options'; import { OrderListHeader, OrderListHeaderProps, } from '@src/components/orders'; import { GlobalState } from '../../store'; import { setOrdersFilterCriteria } from '../../actions';
- Container:
interface StateProps { filterCriteria: string; setOrdersFilterCriteria: (criteria: string) => void; }
type ComponentProps = NavigationScreenProps & StateProps;
const mapStateToProps = (state: GlobalState) => ({ filterCriteria: state.orders.filterCriteria, });
const mapDispatchToProps = (dispatch: Function) => ({ setOrdersFilterCriteria: (criteria: string) => dispatch(setOrdersFilterCriteria(criteria)), });
@connect(mapStateToProps, mapDispatchToProps)
export class TestContainer extends React.Component
static navigationOptions: NavigationScreenConfig
const renderHeader = (headerProps: NavigationScreenProps) => {
return (
<OrderListHeader
{...headerProps}
{...ordersHeaderConfig}
/>
);
};
return {
...navigation,
...screenProps,
header: (headerProps: NavigationScreenProps): TopNavigationElement => {
return renderHeader(headerProps);
},
};};
public componentWillMount(): void { this.setNavigationParams(); }
private setNavigationParams = (): void => { this.props.navigation.setParams({ onBack: this.onBackPress, onMenuItemPress: this.onSearchOptionSelect, }); };
private onBackPress = (): void => { this.props.navigation.goBack(null); };
private onSearchOptionSelect = (option: string): void => { this.props.setOrdersFilterCriteria(option); };
public render(): React.ReactNode { const { filterCriteria } = this.props;
return (
<TestComp
propFromRedux={filterCriteria}
/>
);} }
2. Component:import React from 'react'; import { ThemedComponentProps, ThemeType, withStyles, } from '@kitten/theme'; import { Tab, TabView, Text, } from '@kitten/ui'; import { ReduxWaitingTest } from './reduxWaitingTest.component';
interface State { selectedIndex: number; }
interface ComponentProps { propFromRedux: string; }
export type TestComponentProps = ThemedComponentProps & ComponentProps;
class TestComponent extends React.Component<TestComponentProps, State> {
public state: State = { selectedIndex: 0, };
private handleTabSelect = (selectedIndex: number): void => { this.setState({ selectedIndex }); };
public render(): React.ReactNode { const { propFromRedux } = this.props;
return (
<TabView
selectedIndex={this.state.selectedIndex}
onSelect={this.handleTabSelect}>
<Tab title='Tab 1'>
<Text>Tab1</Text>
</Tab>
<Tab title='Tab 2'>
<Text>Tab2</Text>
</Tab>
<Tab title='Tab 3'>
<ReduxWaitingTest propFromRedux={propFromRedux}/>
</Tab>
</TabView>
);} }
export const TestComp = withStyles(TestComponent, (theme: ThemeType) => ({}));
3. Inner Component:import React from 'react'; import { ThemedComponentProps, ThemeType, withStyles, } from '@kitten/theme'; import { Text } from '@kitten/ui';
interface ComponentProps { propFromRedux: string; }
export type ReduxWaitingTestComponentProps = ThemedComponentProps & ComponentProps;
class ReduxWaitingTestComponent extends React.Component
public render(): React.ReactNode { const { propFromRedux } = this.props; const value: string = propFromRedux ? propFromRedux : 'Select option';
return (
<Text>{value}</Text>
);} }
export const ReduxWaitingTest = withStyles(ReduxWaitingTestComponent, (theme: ThemeType) => ({}));
NBoychev
artyorsh
linhtc
Issue type
I'm submitting a ...
Issue description
Current behavior: When a component prop inside
<Tab />is updated via the redux store, the component doesn't re-render.Expected behavior: The component should re-render when the prop changes.
Steps to reproduce: Add component inside a
<Tab />Related code:
The
MyCustomComponentwon't re-render whenpropFromReduxchange its value. To make sure that the problem is not inMyCustomComponent, I've moved it outside the<TabView />and when thepropFromReduxchanged, the component re-rendered.Other information:
OS, device, package version