What am I trying to achieve
Currently, I am trying to implement localization within our current React-Native project.
To do this, I choose the following package: React-Localization
Our project makes usage of React-Native in combination with TypeScript.
What is the problem
I have written a function to set the language from "en" to "nl".
Then I have two pages:
Home (contains the function to change the language & has a Text element)
Settings (has a Text element)
Only the text on the Home page gets updated. The text element on the Settings page is not getting translated. Also my header and bottom navigation are not translated.
What code am I using
To switch the language
switchLanguage() {
if (translationStrings.getLanguage().toLowerCase() == 'nl') {
translationStrings.setLanguage('en');
} else {
translationStrings.setLanguage('nl');
}
this.setState({});
}
Translations
export const translationStrings = new LocalizedStrings({
en: {
tempTest: "English test one",
tempTest2: "English test two"
},
nl: {
tempTest: "Dutch test een",
tempTest2: "Dutch test twee"
}
});
Examples of the elements that I am trying to translate.
// This is on the home page so it works.
<Text>
{translationStrings.tempTest}
</Text>
// This is on the settings page and it does not work.
<Text>
{translationStrings.tempTest2}
</Text>
Also, the header and bottom navigation is not updating/getting translated.
Could someone give me some insight into what I am exactly doing wrong?
It feels like I should give the application a sign that everything has been translated and that it should reload or something.
So for the other pages, I have used React Redux to translate the content.
I managed to get my bottom navigator translated by doing the following changes for the navigation options.
Old ->
Settings: {
screen: Settings,
navigationOptions: {
tabBarLabel: i18next.t('Settings')
},
},
New -->
Settings: {
screen: Settings,
navigationOptions: ({ navigation, navigationOptions }) => ({
tabBarLabel: i18next.t('Settings')
}),
},
Related
I'm using React Navigation 6.
I want to define a screen with two tabs like so:
<RootTabs.Navigator
initialRouteName='Manage'
>
<RootTabs.Screen name='Manage' component={Placeholder} />
<RootTabs.Screen name='Sell' component={Sell} />
</RootTabs.Navigator>
If I explicitly define a linking config like the following:
const globalLinking: LinkingOptions<any> = {
prefixes: ['https://foo.bar', 'foo://'],
config: {
screens: {
Root: {
path: '',
screens: {
Manage: 'Manage',
Sell: 'Sell',
},
},
},
},
};
Then I can navigate to my "Manage" tab by going to localhost:8080/Manage. If I don't include this above configuration in my Root navigator, I can not.
Is there some way to tell React Navigation to go about enabling deeplinking to these routes without explicitly defining them; instead trusting RNav to implicitly construct these links from the names given to the screens?
TIA
I am writing a react application. A core requirement is that the application be completely dynamic and configurable, including choosing layouts, sections and fields, validation etc.
I have two UI. One is the config UI where the user can select the layout, sections, fields like what type of html component etc. Once this is saved, I get data as JSON where I need to draw the UI. This is my second UI. My concern is how do I structure the components to render the UI with the JSON data. The fields & sections will be same but the layout will be different based on what is been selected in the config UI. Below is the rough JSON schema.
{
title: "Test title",
layout: [
{
name: "layout-a"
},
sectionA: {
name: "breadcrumbs"
field: [
{
name: "test",
value: "test",
type: "text"
}
]
},
sectionB: {
name: "actions"
field: [
{
name: "Create",
value: "Create",
type: "button"
}
]
}
]
}
I was thinking of having a layout component which renders all the children from the JSON. Component looks like below
const Layout = ({ children }) => {
return (
<div>
<div className="container">
<div className="content">{children}</div>
</div>
</div>
);
};
and top level component where we read the config json and based on the layout render the component
<Layout>
{viewToShow === "layoutA" && <LayoutA data={config.sections} />}
{viewToShow === "layoutB" && <LayoutB data={config.sections} />}
</Layout>
My question is how do I construct the LayoutA, B or C component so that these sections and fields are rendered differently on the UI?
I think your question leaves a lot of unspecified points for us to offer you a proper solution. My advice is to investigate better what the project real needs are and its main goals, then lay out each piece (component) thoroughly checking what should be "configurable" and to which extent, before coming up with any implementation.
Taking your example "as is", my first thought is to wrap your App component into a Context provider, similar to what we'd do to manage themes.
export const layouts = {
layoutA: {
background: '#fff',
sectionWidth: '100%',
},
layoutB: {
background: '#000',
sectionWidth: '50%',
},
};
export const LayoutContext = React.createContext({
layout: layouts.layoutA, // default layout
toggleLayout: () => {},
})
You could then further populate the layouts object with metadata from a database. Supposing changes do not originate from the UI (think Webflow or Wix Editor), you could use a CMS to update the metadata and propagate the changes.
An example usage would be:
function LayoutTogglerButton() {
return (
<LayoutContext.Consumer>
{({ layout, toggleLayout }) => (
<button
onClick={toggleLayout}
style={{ backgroundColor: layout.background }}>
Toggle Layout
</button>
)}
</LayoutContext.Consumer>
)
}
Again, there are a lot of unspecified points on your request for us to be more specific. The request for "an application to be completely dynamic and configurable, including choosing layouts, sections and fields, validation etc" could mean many things.
Examples of more specific questions: How to create dynamic forms in React with functional components? How to create drag and drop dashboard widgets with React? How to live update/customise themes with styled-components?
Perhaps you could be more specific? Cheers
I am researching a possibility to do something similar. An off the bat approach would look somewhat like this: https://codesandbox.io/s/still-sun-cecudh?file=/src/App.js
Then of course, where this the layout object will be generated and where the parsing will take place will dependent on your use case. I am going with context for layout object generation and a dedicated component for object tree traversal.
I have been looking for the answer for a long time but couldn't find any solution.
Let's say my website's default language setting is English and when a user hovers over the Map it shows the country's name. I would like to make it when the user changes the website language to french and hovers over the Map the country name shows in the French language, Is there any way to do it?
Code is below
<VectorMap
map={'world_mill'}
series={{
regions: [
{
values: upcaseKeys(totalVisitors),
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
},
],
}}
selectedRegion={[]}
showTooltip={true}
/>
so when I change the website from English to French the word China should be shown in French.
You can do that by using onRegionTipShow method which is provided in <VectorMap />. Just simply create a function which will take the name of country by:
const translateCountryName = (e, el) => {
const countryName = el.html();
el.html(t(`country:${countryName}`));
};
Where t('country:${countryName}') is NextJS i18n/Internationalization
Now you can use this function in your VectorMap component:
<VectorMap
map={'world_mill'}
series={{
regions: [
{
values: upcaseKeys(totalVisitors),
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
},
],
}}
selectedRegion={[]}
showTooltip={true}
//ur function is below
onRegionTipShow={translateCountryName}
/>
I'm trying to build a custom panel option editor in web app called Grafana, but am running into an error I suspect is no more than a React syntax issue.
195:15 error Component definition is missing display name react/display-name
export const optionsBuilder = (builder: PanelOptionsEditorBuilder<SVGOptions>) => {
return builder
.addBooleanSwitch({
category: ['SVG Document'],
path: 'svgAutoComplete',
name: 'Enable SVG AutoComplete',
description: 'Enable editor autocompletion, optional as it can be buggy on large documents',
})
.addCustomEditor({
category: ['SVG Document'],
path: 'svgSource',
name: 'SVG Document',
description: `Editor for SVG Document, while small tweaks can be made here, we recommend using a dedicated
Graphical SVG Editor and simply pasting the resulting XML here`,
id: 'svgSource',
defaultValue: props_defaults.svgNode,
editor: (props) => {
const grafanaTheme = config.theme.name;
return (
<MonacoEditor
language="xml"
theme={grafanaTheme === 'Grafana Light' ? 'vs-light' : 'vs-dark'}
value={props.value}
onChange={props.onChange}
/>
);
},
})
};
To use a custom panel option editor, use the addCustomEditor on the OptionsUIBuilder object in your module.ts file. Configure the editor to use by setting the editor property to the SimpleEditor component.
The tutorial in the Grafana Docs explains more about what I'm doing, but I believe the issue is just with the arrow function I use at line 195.
Is there a different way I should be retrieving my editor property?
My nav items need to have colour and icon changes.
I'm finding however that the set of icons I seem to have and the iconClassName do not seem to be being shown
{
key: 'upload',
name: 'MAU',
icon: 'AlertSolid',
iconClassName: 'bg-90',
onClick: () => { return; },
['data-automation-id']: 'uploadNonFocusButton'
}
It appears that there is a limited set of icons supported within the Nav and CommandBar. Is this correct? I'm also surprised that the iconClassName is not being picked up.