Apart from basic, intermediate and advanced courses we also provided on demand training on below hottest topics:
These topics will add weightage on your knowledge and employability.
This course consists of basic python language fundamental and user interface creation.
User Interface – Basic UI creation like buttons, text fields, labels, frame etc. Using these classes to draw user interface.
Swift-Basics – Very important part as swift language is the backbone of iOS app development.
This course contains swift language fundamentals and user interface. Below are the course content:
Swift-Basics – Very important part as swift language is the backbone of iOS app development.
User Interface – Designing user interface like buttons, labels, custom/complex views etc.
Advance course contains language basics, user interface creation, network calling and database integration. Below are details of course:
Swift-Basics – Very important part as swift language is the backbone of iOS app development.
User Interface – Designing user interface like buttons, labels, custom/complex views etc.
Data Management – Saving/persisting data in iOS apps
API – Getting data from external servers in iOS apps
Hello guys, hope you are doing good. It is suggested to have a look at previous tutorials:
React Native Day 1, Understanding Technology, Fundamentals and React
React Native Day 2, Creating first React Native App
React Native, Day 3, Running app on iOS simulator and exploring some cool stuffs
Please support us by comment, like and share our facebook page.
Folder structure and modules.
Imports like importing React, { Component }, { View, Text} etc.
Subclassing/extending.
Styling using StyleSheet.create
Exporting – export default, to make our component importable.
Creating a component which contains basic text.
We will understand that JSX is mixing xml/html with javascript.
We learn about render() function.
In react native we have different classes in different files. These files then can be put into different folders. Basically we follow a module structure by grouping related javascript files in folder. We can then use app.js file to import them and reuse them.
Note : I will use this code for reference.
If you look at above folders structures node_modules contains sub modules. “react” module contains javascript files related to React library.
If you guys are coming from swift background you must have heard about swift high order functions like map, flatmap, filter etc. You want similar functionalities in javascript? Yes javascript have these functionalities in form of modules. Go to node_modules > array-filter. Similarly go to node_modules > array-flatten. Similarly we have array-map, array-filter etc.
I am not a javascript programmer & I have understood it my way, hope you guys also get some idea about modules. Now if i have to use these modules some where in my code, i have to import them as simple as it is.
|
1 2 3 4 5 6 |
{ "expo": { "sdkVersion": "26.0.0", "name": "AwesomeProject" } } |
Note : If you are not aware of how to launch and run app on iOS simulator, please read it here.
Here is the complete details of what you can do with app.json file.
|
1 |
import React from 'react'; |
Here we are creating a variable named React of ‘react’ library. By using this variable i will be able to use methods, properties of ‘react’ library.
Remind : React is a JavaScript library to create user interface. Let’s say you want to create some user interface with labels, text fields, alerts, buttons, square, circle, rectangle etc., then you can use this React library. React have components which can be rendered by calling render() method.
In javascript we can use component to create new components. We have the React variable and we can call React.Component to create new components. We subclass React.Component to create new components.
|
1 |
class App extends React.Component |
Here we are creating a new component named “App” by subclassing React.Component.
We have subclassed React.Component but still we have not written any code related to user interface like label, text, button etc. So where to write code for it?
Here is the answer:
|
1 2 3 4 5 6 7 8 9 |
import React from 'react'; class App extends React.Component{ render(){ return (/*write piece of code related to UI*/) } } |
React components implement a render() method that takes input data (generally JSX) and return what to display.
It was the basic building block to understand the structure of component in javascript.
Please support us by comment, like and share our facebook page.
Let’s explore it more with some more code in place:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import React from 'react'; import { Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu. Running on simulator. Hello every one. </Text> </View> ); } } |
|
1 |
import { Text, View } from 'react-native'; |
This time we have provided proper code for creating some user interface using View and Text.
|
1 2 3 4 5 6 7 8 9 10 11 |
{ return ( <View> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu. Running on simulator. Hello every one. </Text> </View> ); } |
We are rendering a View which contains text. Let’s run it and see output:
So do not worry about the layout as we have not used any styles, so our text is overlapping with status bar.
Create style using StyleSheet.create() method. For example below code creates a style named “style1” which centers the content and provide background color to be white.:
|
1 2 3 4 5 6 7 |
const styles = StyleSheet.create({ style1: { backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); |
The complete App.js file looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={styles.style1}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu. Running on simulator. Hello every one. </Text> </View> ); } } const styles = StyleSheet.create({ style1: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); |
Again gotcha, 😳 😳 !!!!
Now
|
1 |
export default |
What it have to do with our code? 😳 😳
If you see till now we have only created a component, we need to make it exportable so that it can be imported and run by npm.
The same code above can also be written as:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; class App extends React.Component { render() { return ( <View style={styles.style1}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu. Running on simulator. Hello every one. </Text> </View> ); } } const styles = StyleSheet.create({ style1: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); export default App; |
We learned about folder structure and modules.
We need imports like importing React, { Component }, { View, Text} etc.
We learned about subclassing.
We learn about styling using StyleSheet.create
We learn about export default, to make our component importable.
We learn about creating a component which contains basic text.
We also understand that JSX is mixing xml/html with javascript.
We learn about render() function.
Happy coding!!! 🙂
Please support us by comment, like and share our facebook page.
We will learn about Optionals?, their unwrapping, implicitly unwrapped optional!, optional binding and automatic unwrapping.
Normal Optionals :
What : Optionals (normal) are data types, which have value or nothing. ? mark is used to denote optional. Optional means , it may have or may not have any value. think optional(?) as as box (which can contain some thing or nothing) and ! exclamation mark as key of the box. To fetch value from optional var we need operator exclamation mark !
When : when you want to declare a variable, which may or may not have value in future. Suppose you get API response which “may” have person’s first name, middle name and last name. you can simply use optional data type(?) for all three variables.
Declaration : var nameOfYourVariable : Type?
Implicitly Unwrapped Optional :
What : “implicitly unwrapped” optional, meaning that you do not have to unwrap it to access the value.
When : To make sure it must not be nil, and you do not need to deal with unwrapping.
Declaration : var nameOfYourVariable : Type!
/**************example************************************/
|
1 2 3 4 5 6 7 8 9 10 11 |
/*name has nil value by default and it's type is optional string*/ var name : NSString? /*check if name is not equal to nil*/ if (name != nil) { /*unbox it to get value using exclamation mark, guranteed not nil, technically called Forced Unwrapping*/ let nameV = name! //(name! - this is called forced unwrapping) }else{ print("name is nil") } Output : name is nil |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*declare a variable as name1 of optional type*/ var name1 : String?/*it has nil value by default*/ name1 = "alok"/*assign a string as alok*/ /*check if name is not equal to nil, guranteed not nil*/ if (name1 != nil) { /*unbox it to get value, technically called Forced Unwrapping*/ let nameV = name1!//(name! >> this is called forced unwrapping) print(nameV) }else{ print("name1 is nil") } Output : alok |
What : To find out whether an optional contains a value, and if so, to make that value available as a temporary constant or variable.
When : Most recommended way to unwrap optionals.
Syntax :
if let someValue = someOptional{
//…………use this someValue variable
}else{
//……it means someOptional is nil, it has no value.
}
/**************example************************************/
|
1 2 3 4 5 6 7 8 9 10 |
/*declare optional string*/ var str1 : String? if let str1Value = str1{//trying to unwrap str1 and get value in str1Value print(str1Value) print(str1) }else{ print("str1Value is nil") } Output :str1Value is nil |
|
1 2 3 4 5 6 7 8 9 10 |
var str2 : String? str2 = "10"//assign some value this time if let strValue2 = str2{//trying to unwrap str2 and get value in strValue2 print(strValue2) print(str2) }else{ print("str2 is nil") } Output : "10" Output : "Optional("10")" |
What : Sometimes it is clear from a program’s structure that an optional will always have a value, after that value is first set. In these cases, it is useful to remove the need to check and unwrap the optional’s value every time it is accessed, because it can be safely assumed to have a value all of the time.
These kinds of optionals are defined as implicitly unwrapped optionals. You write an implicitly unwrapped optional by placing an exclamation mark (String!) rather than a question mark (String?) after the type that you want to make optional.
When : Implicitly unwrapped optionals are useful when an optional’s value is confirmed to exist immediately after the optional is first defined and can definitely be assumed to exist at every point thereafter.
/**************example************************************/
|
1 2 3 4 5 6 |
let animal : String!/*It is called implicitely unwrapped optional, notice we have already declared it with ! exclamation mark, so animal variable is automatically unwrapped. Critical note that a variable which is declared automatically unwrap must - must not be nil (guranteed non nil), otherwise will crash*/ animal = "tiger" //assign some value print(animal) /*notice here we do not need to unbox/unwrap it, it is automatic unwrapped*/ Output : tiger |
