How to change text dynamically

jacargentina commented 5 years ago

When changing the app I18n, an already mounted View doesnt reflect the text changing on the swipeout buttons.

For example:

      <FlatList
        data={filtered}
        keyExtractor={item => item.name}
        renderItem={({ item }) => {
          var swipeoutBtns = [
            {
              text: I18n.t('ui.rename'),
              type: 'primary',
              onPress: () => {
                listRename(item);
              }
            },
            {
              text: I18n.t('ui.delete'),
              type: Platform.OS == 'ios' ? 'delete' : 'default',
              backgroundColor: Platform.OS == 'android' ? '#e57373' : null,
              onPress: () => {
                listDelete(item);
              }
            }
          ];
          return (
            <Swipeout
              right={swipeoutBtns}
              backgroundColor="white"
              autoClose={true}>
              <ListItem
                avatar
                onPress={() => {
                  navigation.navigate('ListDetail', {
                    list: item
                  });
                }}>
                <Left>
                  <Icon name="bookmark" style={{ fontSize: 36 }} />
                </Left>
                <Body>
                  <Text style={{ fontSize: 26 }}>{item.name}</Text>
                  <Text note>{item.type}</Text>
                </Body>
              </ListItem>
            </Swipeout>
          );
        }}
      />

Text for "rename" and "delete" are not updated at all after changing the app's language; any option on how to make that work?

BernabeFelix commented 5 years ago

Swipeout is Just a View it should re-render if you change the props like any other component. The thing here is FlatList, you should probably use extraData with I18n.language or something like that to trigger a re-render

jacargentina commented 5 years ago

Thanks! 👍

dancormier / react-native-swipeout

How to change text dynamically #326