{"id":1102,"date":"2020-08-05T20:39:02","date_gmt":"2020-08-05T15:09:02","guid":{"rendered":"http:\/\/www.prasadk.com\/my-press\/?p=1102"},"modified":"2020-08-05T20:39:08","modified_gmt":"2020-08-05T15:09:08","slug":"kick-start-react-native-with-basics-stack-navigation","status":"publish","type":"post","link":"https:\/\/www.prasadk.com\/my-press\/kick-start-react-native-with-basics-stack-navigation\/","title":{"rendered":"Kick Start – React Native with Basics – Stack Navigation"},"content":{"rendered":"\n

We have seen different choices to work on hybrid mobile apps in the previous post, ‘http:\/\/www.prasadk.com\/my-press\/hybrid-mobile-apps-react-native-ionic-capacitor-more-to-choose-from\/<\/a>‘.<\/p>\n\n\n\n

More on what is react native, pros, cons, detailed blog posts on React Native here –
<\/a>https:\/\/www.oreilly.com\/library\/view\/learning-react-native\/9781491929049\/ch01.html<\/a>
https:\/\/www.weblineindia.com\/blog\/react-native-development-pros-cons\/<\/a>
https:\/\/medium.com\/weblineindia\/what-is-react-native-development-advantages-and-disadvantages-e5bf052473a7<\/a> <\/em><\/p>\n\n\n\n

Now, let’s look at some basics of React Native(going forward, I may refer it as – RN) and kick off our learning RN!<\/p>\n\n\n\n

The most frequently asked question – ‘where and how do I get started’?!
It depends on person to person and the prior experience, competency in JavaScript etc. I can tell about how I have started it with.
I did not have any prior knowledge on React. I wanted a quick start but needed to understand the basics.
I love simple tutorial with hands-on or immediate place where I can try something. So, I went ahead with – my all time favorite place – W3Cschools (https:\/\/www.w3schools.com\/react\/<\/a>)<\/p>\n\n\n\n

After that, you can get started with any basic React Native tutorial or the react documentation itself.
https:\/\/reactnative.dev\/docs\/tutorial<\/a>. <\/p>\n\n\n\n

Okay, let’s move on with the coding part of it. Since, this is not a getting started tutorial or a basic RN tutorial post, I will leave it to get going with whatever you like from RN official docs to get started with.
This is just a quick introduction on couple of basic topics on recent change.
Based on my initial learning, I would like to highlight an important change\/update.
Recently, React Native has changes on usage of react navigation.
Hope this helps someone looking for a single source of ‘how to’ tutorial section on using stack navigator.<\/p>\n\n\n\n

I have spent almost a day figuring out the recent changes\/updates on this!
Its already given in the recent react navigation docs, but for me, it was little confusing, as I had referred other React Native courses\/video tutorials which are not upgraded with recent changes!<\/p>\n\n\n\n

I am not going in depth of what is react navigation etc., but a quick thing on how to navigate between 2 screens using React Native’s stack navigator with component approach.<\/p>\n\n\n\n

First step is to install react-navigation – To use React Native Stack Navigation – following dependencies to be installed –
(note – I used npm and non-expo managed as I use Android studio with emulator for my testing. If you
are on expo – please do check docs and use ‘expo’).<\/p>\n\n\n\n

npm install @react-navigation\/native
npm install react-native-reanimated react-native-handler react-native-screens react-native-safe-area-context @react-native-community\/masked-view
npm install @react-navigation\/stack<\/code><\/p>\n\n\n\n

Once you are done with the installation, use the following to navigate between screens –
import { NavigationContainer } from '@react-navigation\/native';
import { createStackNavigator } from '@reactnavigation\/stack';<\/code><\/p>\n\n\n\n

const Stack = createStackNavigator();
<Stack.Navigator initialRouteName='FruitList' > <Stack.Screen name='FruitList' component={FruitList} options={{ title: 'Fruits List'}} \/>
<Stack.Screen name='FruitDetails' component={FruitDetails} options={{ title: 'Fruits Image'}} \/> <\/Stack.Navigator> <\/code><\/p>\n\n\n\n

So, the above code is self-explanatory, if you are already familiar with the react documentation.<\/p>\n\n\n\n

From – https:\/\/reactnavigation.org\/docs\/hello-react-navigation<\/a>,
Stack.Navigator is a component that takes route configuration as its children with additional props for configuration and renders our content.
Each Stack.Screen component takes a name prop which refers to the name of the route and component prop which specifies the component to render for the route. These are the 2 required props.
To specify what the initial route in a stack is, provide an initialRouteName as the prop for the navigator.
To specify screen-specific options, we can pass an options prop to Stack.Screen, and for common options, we can pass screenOptions to Stack.Navigator.<\/p>\n\n\n\n

Also another recent change to note is old RN cli has been now moved to community\/cli. So, if you would like to update to latest RN, please uninstall old cli and upgrade to new one as below –
npm uninstall -g react-native-cli
npm (or yarn) global add @react-native-community\/ <\/code> <\/p>\n\n\n\n

Bonus Point -I wanted to use ListItem from react-native-elements, so I have used the following.
Just posting here as additional item for reference, as installing this too, is not straightforward to get the ListItem working! <\/p>\n\n\n\n

React Native Elements –
npm i react-native-elements --save
npm i --save react-native-vector-icons<\/code><\/p>\n\n\n\n

With your learning, you may soon figure it out why did I mention -‘extensively changing, less resources to work on’ etc. in my previous post.<\/p>\n","protected":false},"excerpt":{"rendered":"

We have seen different choices to work on hybrid mobile apps in the previous post, ‘http:\/\/www.prasadk.com\/my-press\/hybrid-mobile-apps-react-native-ionic-capacitor-more-to-choose-from\/‘. More on what is react native, pros, cons, detailed […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[7,6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/1102"}],"collection":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/comments?post=1102"}],"version-history":[{"count":13,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/1102\/revisions"}],"predecessor-version":[{"id":1116,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/1102\/revisions\/1116"}],"wp:attachment":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/media?parent=1102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/categories?post=1102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/tags?post=1102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}