Site Loader

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 blog posts on React Native here –
https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch01.html
https://www.weblineindia.com/blog/react-native-development-pros-cons/
https://medium.com/weblineindia/what-is-react-native-development-advantages-and-disadvantages-e5bf052473a7

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

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/)

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

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.

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!

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.

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’).

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

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';

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>

So, the above code is self-explanatory, if you are already familiar with the react documentation.

From – https://reactnavigation.org/docs/hello-react-navigation,
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.

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/

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!

React Native Elements –
npm i react-native-elements --save
npm i --save react-native-vector-icons

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.

Smitha Prasad

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.