CODEWITHSUNDEEP
reactjsreact-nativei18next
universe11
universe11

Reputation: 1053

How can I pass parameters with i18next?

I want to translate my colors but idk how I do it.

const Item = memo(({ color, index, lastIndex, translateName, style, activeColor, onPress }: IColorItem) => {
  return (
      <Text>{translateName}</Text>
  )
  // @ts-ignore
}, isEq);

const Colors = ({ colors, style, activeColor, onPress }: IColors) => {
  const { t } = useTranslation();
  const renderItem: ListRenderItem<ColorsType> = ({ item, index }) => (
    <Item
      color={item}
      translateName={t('colors.color', { color: item })}
      index={index}
      style={style}
      activeColor={activeColor}
      lastIndex={colors.length - 1}
      onPress={onPress}
    />
  )
  return (
    <View style={s.container}>
      <FlatList
        data={colors as ColorsType[]}
        renderItem={renderItem}
        style={s.flatList}
        keyExtractor={(item, i) => i.toString()}
        horizontal
        showsHorizontalScrollIndicator={false}
      />
    </View>
  )
}

transl.json

  "colors": {
     "color": "{{color, COLORS}}"
  },

Nothing works. How can I say "red" = ..., "blue" = ... ?

................................................................................................................................................

Upvotes: 22

Views: 31770

Answers (2)

Lucia Aldana
Lucia Aldana

Reputation: 774

You can see in the i18n documentation the interpolation: https://www.i18next.com/translation-function/interpolation

{
"key": "{{what}} is {{how}}"
}


i18next.t('key', { what: 'i18next', how: 'great' });

Upvotes: 52

enzou
enzou

Reputation: 316

you can use this way:

<Item
      color={item}
      translateName={t('colors.color', { color: 'blue' })}
      index={index}
      style={style}
      activeColor={activeColor}
      lastIndex={colors.length - 1}
      onPress={onPress}
    />

and in your json

  "colors": {
     "color": "my color is %{color}"
  },

the output should be: my color is blue

Upvotes: 1

Related Questions