Embarking on the journey with react-native

My journey with react-native has just begun as I embark on the path of developing apps for both Android and iOS. Following this tutorial got me started, where I installed react version "react": "16.8.6" and successfully tried out some basic concepts. However, when it came to working on more complex projects, I noticed that almost every example called for the use of "expo".

Browsing through the documentation on Facebook's website, I came across references to expo-constants.

import Constants from 'expo-constants';

This raised a question in my mind - is react tightly coupled with expo? While I could give expo a shot, I read about potential limitations that made me hesitant. At this moment, I'm keen on creating a simple app in react-native without relying on expo. Where can I find the right resources and documentation for this?

Furthermore, my attempts at implementing a side menu using

  • DrawerNavigator, and
  • StackNavigator

following steps outlined in this tutorial hit a roadblock with an error message stating **undefined is not a function ** pointing towards the code snippet below:

const FirstActivity_StackNavigator = StackNavigator({

The code segment looks something like this

    const FirstActivity_StackNavigator = StackNavigator({
    First: {
        screen: MainActivity,
        navigationOptions: ({ navigation }) => ({
        title: 'MainActivity',
        headerLeft: <HamburgerIcon navigationProps={navigation} />,

        headerStyle: {
            backgroundColor: '#FF9800'
        },
        headerTintColor: '#fff',
        })
    },
    });

Later on, I discovered that StackNavigator is no longer part of "react-navigation", leaving me puzzled. Can someone guide me on starting fresh with react-native-cli sans expo or any other dependencies? Is expo a mandatory requirement even with react-native-cli? If there is a sample application showcasing all fundamental components of a typical app, it would greatly enhance my understanding. Grateful for any form of assistance rendered.

Answer №1

If you want to develop plain React Native apps, it is possible, but I highly suggest using the expo-cli as it offers simplicity and allows you to achieve more with less effort.

Regarding your navigator issue, here's a solution:

import { createStackNavigator } from 'react-navigation-stack';

createStackNavigator(RouteConfigs, StackNavigatorConfig);

createStackNavigator({
   First: {
    screen: MainActivity,
    navigationOptions: ({ navigation }) => ({
    title: 'MainActivity',
    headerLeft: <HamburgerIcon navigationProps={navigation} />,

    headerStyle: {
        backgroundColor: '#FF9800'
    },
    headerTintColor: '#fff',
    })
  },
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to modify the 'src' attribute of an Iframe using JavaScript

I've been working on a project using coinhive, but I encountered some difficulties. My initial goal was to display a webpage in an iframe while coinhive mined (don't worry, I'm only using it for personal purposes and not for anything illega ...

On the initial click of the button, the color will switch, and on the subsequent click,

I have created a basic HTML structure with a paragraph and a button. Upon clicking the button, I need different actions to take place. Specifically, on the first click, I want to change the color of the paragraph. On the second click, I aim to alter the fo ...

What is the correct way to handle fetch timeouts in a React component?

Utilizing a JavaScript timeout, I am able to fetch Dogs from my API successfully. However, there are instances where the timeout fails to clear properly: import { useState, useEffect, useCallback } from 'react'; const DogsPage = () => { c ...

Passing byte arrays between Java and JavaScript: A comprehensive guide

My current objective involves accessing a SecureRandom Java Object from Javascript. I aim to extract 4 bytes from the PRNG and convert it into a Javascript integer variable. The documentation states that the following two lines of Java code can be used to ...

What are the steps to utilize the .find() method to search for documents in a database that belong to the current user

My back-end code for the 'get' request to my '/logs' collection returns data in an array labeled "times": router.get('/', (req, res) => { time .find({'userName': req.params.userName}) .exec() .then(times => ...

Whenever I navigate to this specific route, I consistently encounter an error message in my console

VM28353:1 Error: Unexpected token 'o' found in JSON at position 1 at JSON.parse (<anonymous>) at getUser (auth.js?c7d4:11) at wrappedGetter (vuex.esm-browser.js?5502:335) at Object.eval [as getUser] (vuex.esm-browser.js?5502 ...

Error with JavaScript slideshow The slideshow using JavaScript seems to

I'm currently utilizing a script from the WOW Slider (free version) that looks like this: var slideIndex = 0; function showSlides() { var i; slides = document.getElementsByClassName("mySlides"); dots = document.getEle ...

Add the user's input text to a modal in C# MVC 5

If my status changes, I want to add another text box or text area for additional comments. In the photo provided, this has been implemented but the positioning is not quite right due to issues with the modal. Below is a snippet of my code where you can ta ...

Get updated with the latest information through notification messages

When I receive a notification from Twitter, I am interested in extracting all the text from it. Specifically, if the tweet is posted by user "ABCD" (@abcd) and contains the word "Hello," then I want to perform certain actions. Is there a notification rece ...

Switching View Content with a Click - React Native Tutorial

I have been struggling to switch out a view in React Native, but so far, I haven't been able to make it work. Whenever I attempt <TouchableOpacity onPress={() => {handleChangeMyView();}}>, the app closes without any error messages: What coul ...

A guide on leveraging console.log in Next.js

I'm having trouble displaying the output of an API call using console.log. The issue is that nothing appears in the console (both in the browser and Visual Studio Code). The only console.log that seems to work is within the RouteStatus function, but i ...

Interpreting Json data and converting it into State

Having some trouble parsing the JSON returned in my code snippet below. Specifically, I am attempting to extract the 'name' values and add them to the component state. Currently, I have managed to use this.setState({results:res}), which adds the ...

Utilizing hooks to pass properties from a parent component to a child component

As someone who is new to react, I am currently facing an issue with passing props from a parent function to a child. It seems that the parameters "square_state" and "setSquare_state" are not being recognized in the useSquare or handle_square_click functi ...

Avoiding errors on the client side due to undefined levels in a specific response JSON can be achieved using the RESTful API

Below is a straightforward JSON response example: { "blog": { "title": "Blog", "paragraphs": [{ "title": "paragraph1", "content": "content1" }, { "title": "paragraph2", "content": "content2" }, { ...

Styling the jQuery location picker input with background and focus effects

While working on a web app using jQuery locationpicker, I noticed that it's causing some styling issues with the input. Despite being able to adjust properties like width, padding, and border, changing the background requires using jQuery. Here is th ...

Node -- error encountered: options parameter must be of type object

Encountering a frustrating issue with the error message TypeError: options must be an object. Currently delving into the State example in Chapter 4 of Node.js Design Patterns. Initially assumed it was a mistake on my end, but even after testing the file w ...

Launching the Skeleton feature in NextJS with React integration

I have been working on fetching a set of video links from an Amazon S3 bucket and displaying them in a video player component called HoverVideoPlayer. However, during the loading process, multiple images/videos scale up inside a Tailwind grid component, ca ...

JPlayer is unable to function in Internet Explorer 8

I'm facing an issue with jPplayer specifically in IE8. I'm currently developing an application that needs to be compatible with IE8. Interestingly, the player works perfectly fine on all other versions above 8 of Internet Explorer, as well as on ...

Send a Javascript variable to a Python controller using AJAX

Programming is still new to me and I find myself in unfamiliar territory... I am working on creating an app that relies on button clicks to gather information and provide data analysis based on those interactions. While this functionality works using pure ...

What is the method to retrieve the image's value after dropping it onto the droppable area?

I have implemented a drag and drop feature using jQuery, and I am trying to extract the value of an image and insert it into a database. Additionally, I want to update and remove the image value when it is removed from the droppable area. How can I achie ...