Aug 13, 2021
0
Level 8
How to localize array based texts with react-native-localize
Hi everybody, I'm setting up localization in my project with react-native-localize, with normal strings I just use the normal i18n helper like this, plain and simple.
{I18n.t("filter")}
But what do I do for array based data, for example I have a Carousel which takes it's items from a data array like this:
const [ bookSliders, setBookSliders] = useState([
{ image:'/img/misc/sin-favoritos.jpg', id:2,title:'¡Salva una mesa vacia!',body:'Reservando una mesa con descuento durante las horas vacias ayudas a los restaurantes a conseguir la máxima ocupación en estos tiempos complicados.' },
{ image:'/img/misc/sin-pack.jpg', id:1, title:'Reserva desde la app',body:'Realiza tu pedido y paga facilmente desde la app , recuerda presentarte en el establecimiento entre las horas acordada.' },
<Carousel firstItem={0} onSnapToItem={slideIndex => { console.log(slideIndex); setActiveSlide(slideIndex) }} enableSnap data={bookSliders}
renderItem={({ item }) =>
<View style={{ backgroundColor:'white', width:370, borderWidth:0,height:340, flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
<Image style={{ width:140,height:140,marginBottom:10}} resizeMode="cover" source={{uri: env.BASE_URL+item.image }}/>
{/*<Image style={{ width:140, height:140,marginBottom:10 }} resizeMode="contain" source={require('@assets/images/sandia.png')}/>*/}
<Text style={{ fontSize:18, color:'black',marginBottom:10,fontFamily:'AirbnbCerealMedium',textAlign:'center' }}>{ item.title }</Text>
<Text style={{ width:'85%',fontSize:16, color:'rgb(125,125,125)',marginBottom:5 ,textAlign:'center',fontFamily:'AirbnbCerealBook'}}>{ item.body }</Text>
</View>}
sliderHeight={125} itemHeight={340} itemWidth={370} vertical={false} sliderWidth={340}/>
Notice how I use {item.title} and {item.body} to show the corresponding active slide, however how could I go about showing the correct strings with the i18n translate helper?
My localized json files look like this:
export default {
hello: "Hola",
filter:"Filtros",
map:"Mapa",
sort:"Ordenar",
list:"Lista",
};
Please or to participate in this conversation.