Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Gabotronix's avatar

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",
  };
0 likes
0 replies

Please or to participate in this conversation.