You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Those who come from web development background knows the power of svg icons. We always prefer svg\(for icons, images\)and what not. Benefits of SVGs are:
3
+
Those who come from a web development background know the power of SVG icons. We prefer using SVGs \(for icons, images\)because of the following reasons:
4
4
5
-
* They are resolution independent\(scalable\)
6
-
* They provide you more flexibility in changing color etc.
7
-
* They are lesser in size as compared to an image.
8
-
* They are written in XML syntax so you can put directly inside your html without worrying about bundling your assets.
5
+
* They are resolution independent\(scalable\).
6
+
* They provide us more flexibility in changing color.
7
+
* They are smaller in size as compared to images.
8
+
* They are written in XML syntax so they can be inserted directly into HTML without worrying about bundling assets.
9
9
10
-
### That was about web, does react-native support SVGs?
10
+
### That was on the web. Does react-native support SVGs?
11
11
12
-
Unfortunately, rendering SVGs in native is not as simple as it is in HTML/WEB, where you can just use SVG as image IMG or copy paste svg content inside your HTML. Unlike web, react-native doesn't support SVGs out of the box. Though there are some plugins which lets you render SVGs, but they do not support all SVG elements and it is not very easy to use.
12
+
Unfortunately, rendering SVGs in native is not as simple as it is in HTML/Web, where you can use SVG as an image or copy paste SVG content inside your HTML. Unlike the web, react-native doesn't support SVG out of the box. Though there are some plugins which let you render SVG, they do not support all SVG elements and are not very easy to use.
13
13
14
-
### How do you get the power of SVG in native environment?
14
+
### How do you get the power of SVG in a native environment?
15
15
16
-
Let me introduce you to this amazing library called [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons). It comes bundled with a bunch of icon sets\(default is [`FontAwesome`](https://fontawesome.com/icons)\).
16
+
Let me introduce you to this amazing library called [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons). It comes bundled with a bunch of icon sets\(default is [`FontAwesome`](https://fontawesome.com/icons)\).
17
17
18
-
* All the fonts are scalable and you can style them just like SVGs.
19
-
* It returns a react component which accepts name, etc. as prop. After integration, the usage will be as simple as `<Icon name="rocket" size={30} color="#900" />`
18
+
* All the fonts are scalable and you can style them just like SVG.
19
+
* It returns a React component which accepts name, etc. as prop. After integration, the usage will be as simple as `<Icon name="rocket" size={30} color="#900" />`
20
20
* You can pass custom style.
21
-
* It also supports a couple of other components which might be useful. Ex, Button with an icon \(`<Icon.Button />`\)
22
-
* You can also create your own iconset if you want to use custom icons.
23
-
* Installation is a 2 step process if you wish to use the icons provided by FontAwesome or other similar font libraries. (yarn add and react-native link)
24
-
* If you wish to use custom fonts(made in svg), please read the next chapter.
21
+
* It also supports a couple of other components which might be useful. Example: button with an icon \(`<Icon.Button />`\)
22
+
* You can also create your own icon set if you want to use custom icons.
23
+
* Installation is a 2 step process if you wish to use the icons provided by FontAwesome or other similar font libraries. (`yarn add` and `react-native link`)
24
+
* If you wish to use custom fonts(made in SVG), please read the next chapter.
`react-native-vector-icons`support using custom icon sets if you do not want to use the icons which come bundled or if you want to add your own icons. It supports Fontello and IcoMoon to create custom fonts. We used icomoon to convert our svgs to a config which is readable by the library.
3
+
`react-native-vector-icons`supports using custom icon sets if you do not want to use the icons which come bundled with it or if you want to add your own icons. It supports Fontello and IcoMoon to create custom fonts. We used IcoMoon to convert our SVGs to a config which is readable by the library.
4
4
5
5
6
6
### Setting up the framework
7
-
Install the NPM module using NPM or Yarn.
7
+
Install the npm module using npm or Yarn.
8
8
```js
9
9
npm install --save react-native-vector-icons
10
10
```
11
-
OR
11
+
or
12
12
```js
13
13
yarn add react-native-vector-icons
14
14
```
15
15
16
16
17
-
### Configuring your project to support custom iconsets.
17
+
### Configuring your project to support custom icon sets.
18
18
19
-
We will use IcoMoon to support custom icons/fonts. Icomoon is free and open source application which lets you convert a set of svg icons to fonts. It is a front end only app and does not upload your icons anywhere, so no privacy concerns!
19
+
We will use IcoMoon to support custom icons/fonts. Icomoon is a free and open source application which lets you convert a set of SVG icons to fonts. It is a front end only app and does not upload your icons anywhere, so there will be no privacy concerns!
20
20
21
21
The steps for the configuration are as follows:
22
22
23
-
* Create a resources folder where we will keep our custom fontfile(.ttf).
23
+
* Create a resources folder where we will keep our custom font file (.ttf).
24
24
25
-
* Do `react-native link react-native-vector-icons`. This will setup the vector icons framework for you.
25
+
* Do `react-native link react-native-vector-icons`. This will set up the vector icons framework for you.
26
26
27
-
That's it, you are done with the setup. Now we need to get the ttf file and place it inside the `resources/fonts` that we just created.
27
+
That's it, you are done with the setup. Now we need to get the TTF file and place it in the `resources/fonts` folder that we just created.
28
28
29
-
### How to generate .ttf fonts using icomoon:
29
+
### How to generate .ttf fonts using IcoMoon:
30
30
31
-
1. Open the [iconmoon application.](https://icomoon.io/app)
31
+
1. Open the [IcoMoon application.](https://icomoon.io/app)
32
32
33
-
2. Remove the current set(if there is one) and create a new empty set and give your preferred name(Remember to give same name everywhere).
33
+
2. Remove the current set(if there is one) and create a new empty set and give your preferred name (remember to give the same name everywhere).
6. The zip file will contain a selection.json file fonts folder containing a .ttf file. We only need these two files to use fonts in react-native.
67
+
6. The zip file will contain a selection.json file and a fonts folder containing a .ttf file. We only need these two files to use fonts in react-native.
7. Put the fontfile(.ttf) in `resources/fonts` folder and add the following script to the package.json:
75
+
7. Put the font file (.ttf) in the`resources/fonts` folder and add the following script to the package.json:
76
76
77
77
```
78
78
"rnpm": {
@@ -82,17 +82,17 @@ That's it, you are done with the setup. Now we need to get the ttf file and plac
82
82
]
83
83
}
84
84
```
85
-
This script will copy the font files to both android and iOS folders. After this, whenever we want to update the fonts, we will do `react-native link react-native-vector-icons` and the fonts will be copied/updated automatically to both android and iOS projects.
85
+
This script will copy the font files to both Android and iOS folders. After this, whenever we want to update the fonts, we will do `react-native link react-native-vector-icons` and the fonts will be copied/updated automatically to both Android and iOS projects.
86
86
87
-
8. Put the JSON file (selection.json) in your app and create a file called CustomIcon.js and import the selection.json which you exported in the previous step.
87
+
8. Put the JSON file (selection.json) in your app and create a file called CustomIcon.js. Import the selection.json in CustomIcon.js.
9. That's it, to use a font simply import the file as a react component and pass the icon name and size(optional) or even style.
95
+
9. That's it! To use a font simply import the file as a React component and pass the icon name and size(optional) or even style.
96
96
97
97
```js
98
98
importCustomIconfrom'./components/CustomIcon.js'
@@ -102,14 +102,14 @@ That's it, you are done with the setup. Now we need to get the ttf file and plac
102
102
<CustomIcon name='android' style={styles.androidIcon} />// To pass custom tyle
103
103
```
104
104
105
-
### Changing file names of the fontfile
106
-
The default name of the fontfile is `icomoon.ttf`. If you want to give a different name, go to Preferences after step 5 and change the name there before downloading. Also, make sure that if you change the fontfile name, give the same name to the set as well(by default its "Untitled Set")
105
+
### Changing file names of the font file
106
+
The default name of the font file is `icomoon.ttf`. If you want to give it a different name, go to Preferences after step 5 and change the name there before downloading. Also, make sure that if you change the font file name, give the same name to the set as well(by default it is "Untitled Set").
107
107
108
-
It is not recommended to change the filename of `.ttf`fontfile after the setup/native linking. The filename gets written in `project.pbxproj` and `Info.plist` and the file gets copied to ` android/app/src/main/assets/fonts/` once you run the link command. If you wish to change the filename, you would need to take care of changing the above 2 files as well, and removing the unused icon from android folder which might cause problems if not done properly._
108
+
It is not recommended to change the filename of `.ttf`font file after the setup/native linking. The filename gets written in `project.pbxproj` and `Info.plist` and the file gets copied to ` android/app/src/main/assets/fonts/` once you run the link command. If you wish to change the filename, you would need to take care of changing the above 2 files as well, and removing the unused icon from the android folder which might cause problems if not done properly.
109
109
110
-
### How do I add/delete icons from the fontfile(.ttf)
110
+
### How do I add/delete icons from the font file (.ttf)
111
111
112
-
You can easily change/delete the contents of fontfile. The tool just needs `selection.json` file, which defines the font configuration. The steps for the same are as follows:
112
+
You can easily change/delete the contents of the font file. The tool only needs the`selection.json` file, which defines the font configuration. The steps for the same are as follows:
113
113
114
114
1. Open [IcoMoon App](https://icomoon.io/app/#/select)
115
115
@@ -120,22 +120,22 @@ You can easily change/delete the contents of fontfile. The tool just needs `sele
120
120
</div>
121
121
<br>
122
122
123
-
* Edit/Delete the icon using the tools on top. (Adding the Icon is same as step 3 mentioned above)
123
+
* Edit/delete the icon using the tools on top. (Adding an icon is the same as step 3 mentioned above)
* After the editing is complete, generate a new fontfile by following the steps 5 and 6 mentioned above. Once you have the new fontfile and the new selection.json file, place them in their locations and do `react-native link react-native-vector-icons`.
130
+
* After the editing is complete, generate a new font file by following the steps 5 and 6 mentioned above. Once you have the new font file and the new selection.json file, place them in their appropriate locations in the app and do `react-native link react-native-vector-icons`.
131
131
132
-
That's how you you change the icons. Pretty neat huh?
132
+
That's how you change the icons. Pretty neat huh?
133
133
134
134
135
-
###### This will let us convert any svg image to font which is scalable, platform independent and easy to style. What else can you ask for, right?
135
+
###### This will let us convert any SVG image to a font which is scalable, platform independent and easy to style. What else can you ask for, right?
Copy file name to clipboardExpand all lines: 13-internationalization/13.1-framework-intro.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,27 +1,27 @@
1
1
# Internationalization
2
2
3
-
For application developers, internationalizing an application means abstracting all of the strings and other localespecific things like date, currency etc.
3
+
For application developers, internationalizing an application means abstracting all of the strings and other locale-specific things like date, currency etc.
4
4
5
-
We will create a file called `en.js` and `hi.js` containing all the strings in a flat JSON format. Our Presentational components will import the string from one of these files depending on the current language. Both the language files will contain same keys at any point of time.
5
+
We will create a file called `en.js` and `hi.js` containing all the strings in a flat JSON format. Our presentational components will import the strings from one of these files depending on the current language. Both the language files will contain the same keys at any point in time.
6
6
7
7
8
8
### Framework for Internationalization
9
9
10
-
We will be using [react-native-i18n](https://www.npmjs.com/package/react-native-i18n). It integrates [I18n.js](https://github.com/fnando/i18n-js) with React Native and uses the user preferred locale as default. `I18n.js` is a very famous vanilla JS library which supports features like Date/Time localization, Number localization, Locale fallback, etc. You can find more info about i18n.js [here](https://github.com/fnando/i18n-js);
10
+
We will be using [react-native-i18n](https://www.npmjs.com/package/react-native-i18n). It integrates [i18n.js](https://github.com/fnando/i18n-js) with React Native and uses the user preferred locale as default. `I18n.js` is a very famous vanilla JS library which supports features like date/time localization, number localization, locale fallback, etc. You can find more info about i18n.js [here](https://github.com/fnando/i18n-js).
11
11
12
-
Note that the only feature this module gives us is getting the device locale as default app locale. If you do not need this feature, you may skip installing the native module and use [i18n-js](https://www.npmjs.com/package/i18n-js) module instead.
12
+
Note that the only feature this module gives us is setting the device locale as default app locale. If you do not need this feature, you may skip installing the native module and use the[i18n-js](https://www.npmjs.com/package/i18n-js) module instead.
13
13
14
14
### Setting up the framework
15
15
16
-
1.Lets start by installing the NPM module.
16
+
1.Let's start by installing the npm module.
17
17
18
18
`yarn add react-native-i18n`
19
19
20
20
2. After this is done, we would need to link it to our app using
21
21
22
22
`react-native link react-native-i18n`
23
23
24
-
3. Create language js files containing language strings in flat JSON format. We will follow the convention of `<PAGENAME>_contentTypeInCameCase`. Reason for this convention is it will be easier of the testers/devs to know if a translation is missing, considering, we will be having `guess` mode ON(explained later).
24
+
3. Create language js files containing language strings in flat JSON format. We will follow the convention of `<PAGENAME>_contentTypeInCameCase`. The reason for this convention is that it will be easier for the testers/devs to know if a translation is missing considering we will be having `guess` mode enabled (explained later).
25
25
26
26
>Example: config/language/en.js
27
27
@@ -39,7 +39,7 @@ Note that the only feature this module gives us is getting the device locale as
39
39
ABOUT_theCreatorsDesc:'About the Creators',
40
40
};
41
41
```
42
-
4. Create a utility file which will exportatranslatefunction and a some other utility functions.
42
+
4. Create a utility file which will exportatranslatefunction and some other utility functions.
43
43
44
44
*Refer to the comments to know what each line/function does*
45
45
>utils/language.utils.js
@@ -49,7 +49,7 @@ Note that the only feature this module gives us is getting the device locale as
49
49
import en from '../config/language/en';
50
50
import hi from '../config/language/hi';
51
51
52
-
I18n.fallbacks = true; // If an english translation is not available in en.js, it will look inside hi.js
52
+
I18n.fallbacks = true; // If an English translation is not available in en.js, it will look inside hi.js
53
53
I18n.missingBehaviour = 'guess'; // It will convert HOME_noteTitle to "HOME note title" if the value of HOME_noteTitle doesn't exist in any of the translation files.
54
54
I18n.defaultLocale = 'en'; // If the current locale in device is not en or hi
55
55
I18n.locale = 'en'; // If we do not want the framework to use the phone's locale by default
@@ -66,7 +66,7 @@ Note that the only feature this module gives us is getting the device locale as
66
66
exportconstgetCurrentLocale= () =>I18n.locale; // It will be used to define intial language state in reducer.
67
67
68
68
/* translateHeaderText:
69
-
screenProps => coming from react-navigation(defined in app.container.js)
69
+
screenProps => coming from react-navigation(defined in app.container.js)
70
70
langKey => will be passed from the routes file depending on the screen.(We will explain the usage later int the coming topics)
0 commit comments