How to resolve "requireNativeComponent: "BVLinearGradient" was not found in the UIManager" error message in React Native project?

Software Required
-NPM version 6.4.1
-expo version 2.6.14
-Atom 1.34.0

Problems

• During my development, encounter error as shown below when try to test it on Expo client.

Invariant Violation: requireNativeComponent: "BVLinearGradient" was not found in the UIManager.

Steps

Import "LinearGradient" class from expo. It will work like a charm.

 import { LinearGradient } from 'expo';

How to resolve Expo client hanging issue when follow the NativeBase ReactNavigation tutorial?

Software Required
- NPM version 6.4.1
- expo version 2.6.14
- Atom 1.34.0
- NativeBase 2.10.0. Please refer to link

Problems

• Follow the sample tutorial provided by NativeBase and it hang my Expo client.
  

• Below are the sample code that I used from NativeBased tutorial.

import React, { Component } from "react";
import Expo from "expo";
import HomeScreen from "./src/HomeScreen/index.js";
export default class AwesomeApp extends Component {
  constructor() {
    super();
    this.state = {
      isReady: false
    };
  }
  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("native-base/Fonts/Ionicons.ttf")
    });
    this.setState({ isReady: true });
  }
  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }
    return <HomeScreen />;
  }
}

Steps

• After a long troubleshooting, I manage to identify the line as shown below that caused the hang.

...
    await Expo.Font.loadAsync({
...

• Replace App.js with the sample source as shown, remove "Expo." before the Font.loadAsync, it just working great. No more hanging in my Expo client.

import React, { Component } from "react";
import HomeScreen from "./src/HomeScreen/index.js";
import {Font, Expo, AppLoading} from 'expo';
export default class AwesomeApp extends Component {
  state={
    isReady: false
  }

  constructor() {
    super();
  }

  async componentWillMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("native-base/Fonts/Ionicons.ttf")
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
          return <AppLoading />;
    }

    return <HomeScreen />;
  }
}

How to resolve "The Image component cannot contain children." error message when follow the NativeBase ReactNavigation tutorial?

Software Required
- NPM version 6.4.1
- expo version 2.6.14
- Atom 1.34.0
- NativeBase 2.10.0. Please refer to link

Problems

• Follow the sample tutorial provided by NativeBase and encounter error message as shown below.

Error: Error: The <image> component cannot contain children. If you want to render content on top of image, consider using the <ImageBackground> component or absolute positioning.

• Troubleshoot the source code and discovered that the Image component in SideBar.js that caused the error message

import React from "react";
import { AppRegistry, Image, StatusBar } from "react-native";
import { Container, Content, Text, List, ListItem } from "native-base";
const routes = ["Home", "Chat", "Profile"];
export default class SideBar extends React.Component {
  render() {
    return (
      <Container>
        <Content>
          <Image
            source={{
              uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png"
            }}
            style={{
              height: 120,
              alignSelf: "stretch",
              justifyContent: "center",
              alignItems: "center"
            }}>
            <Image
              square
              style={{ height: 80, width: 70 }}
              source={{
                uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/logo.png"
              }}
            />
          </Image>
          <List
            dataArray={routes}
            renderRow={data => {
              return (
                <ListItem
                  button
                  onPress={() => this.props.navigation.navigate(data)}>
                  <Text>{data}</Text>
                </ListItem>
              );
            }}
          />
        </Content>
      </Container>
    );
  }
}

Steps

• Obviously, Image component as shown in the section below that caused the problem.

  render() {
...
          <Image
            source={{
              uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png"
            }}
            style={{
              height: 120,
              alignSelf: "stretch",
              justifyContent: "center",
              alignItems: "center"
            }}>
...
    );
  }
}

• I fixed the issue with ImageBackground as shown in the section below, it works like a charm

import React from "react";
import { AppRegistry, Image, StatusBar, ImageBackground } from "react-native";
import { Container, Content, Text, List, ListItem } from "native-base";
const routes = ["Home", "Chat", "Profile"];

export default class SideBar extends React.Component {
  render() {
    return (
      <Container>
        <Content>
          <ImageBackground
            source={require("../../images/drawer-cover.png")}
            style={{
              height: 120,
              alignSelf: "stretch",
              justifyContent: "center",
              alignItems: "center"
            }}>
            <Image
              square
              style={{ height: 80, width: 70 }}
              source={require("../../images/logo.png")}
            />
          </ImageBackground>
          <List
            dataArray={routes}
            renderRow={data => {
              return (
                <ListItem
                  button
                  onPress={() => this.props.navigation.navigate(data)}>
                  <Text>{data}</Text>
                </ListItem>
              );
            }}
          />
        </Content>
      </Container>
    );
  }
}

How to resolve "Invariant Violation: Text strings must be rendered within a component" error message during the React development?

Software Required
- NPM version 6.4.1
- expo version 2.6.14
- Atom 1.34.0
- NativeBase 2.10.0. Please refer to link

Problems

• Run through NativeBase tutorial on Button, encounter the error message . Please refer to the screenshot below.

• Below are my original source code
  

import React, { Component } from 'react';
import { Container, Header, Content, Button, Text } from 'native-base';
import {Font, Expo, AppLoading} from 'expo';

class ButtonSizeExample extends Component {
  state={
    isReady: false
  }

  async componentWillMount() {
    await Font.loadAsync({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    });
    this.setState({isReady:true})
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <Container>
        <Header />
        <Content>
          /*Small size button*/
          <Button small primary>
            <Text>Default Small</Text>
          </Button>
          /*Regular size button*/
          <Button success>
            <Text>Success Default</Text>
          </Button>
          /*Large size button*/
          <Button large dark>
            <Text>Dark Large</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}
export default ButtonSizeExample;

Steps

• The root cause of the problem is caused by the comment /* Small ...*/ in the source code.

    return (
      <Container>
        <Header />
        <Content>
          /*Small size button*/
          ...
          /*Regular size button*/
          ...
          /*Large size button*/
          ...
        </Content>
      </Container>
    );
  }
}
export default ButtonSizeExample;

• Remove those comment, it will work like a charm.

import React, { Component } from 'react';
import { Container, Header, Content, Button, Text } from 'native-base';
import {Font, Expo, AppLoading} from 'expo';

class ButtonSizeExample extends Component {
  state={
    isReady: false
  }

  async componentWillMount() {
    await Font.loadAsync({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    });
    this.setState({isReady:true})
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <Container>
        <Header />
        <Content>
          <Button small primary>
            <Text>Default Small</Text>
          </Button>
          <Button success>
            <Text>Success Default</Text>
          </Button>
          <Button large dark>
            <Text>Dark Large</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}
export default ButtonSizeExample;

How to resolve header gap when integrate "NativeBase" ActionSheet into React Native project?

Software Required
- NPM version 6.4.1
- expo version 2.6.14
- Atom 1.34.0
- NativeBase 2.10.0. Please refer to link
- react-navigation version 3.1.2

Problems

• Run through NativeBase tutorial on ActionSheet, encounter the gap at the header. Please refer to the screenshot below.

Steps

• Below are the source code of my App.js

import React from "react";
import { Root } from "native-base";
import {createStackNavigator, createAppContainer} from "react-navigation";
import ActionSheetIconExample from './src/component/ActionSheetIconExample';

const NavStack = createStackNavigator(
  {
    Home: { screen: ActionSheetIconExample }
  }
);

const AppNavigator = createAppContainer(NavStack);

export default () =>
  <Root>
    <AppNavigator />
  </Root>;

• In order to resolve this issue, added a new code as shown below

headerMode: 'none',

• Below are the final source code that work

import React from "react";
import { Root } from "native-base";
import {createStackNavigator, createAppContainer} from "react-navigation";
import ActionSheetIconExample from './src/component/ActionSheetIconExample';

const NavStack = createStackNavigator(
  {
    Home: { screen: ActionSheetIconExample }
  },
  {
    headerMode: 'none',
  }
);

const AppNavigator = createAppContainer(NavStack);

export default () =>
  <Root>
    <AppNavigator />
  </Root>;

• It will work like a charm after the single line of code being inserted. The while gap is missing.

How to start your first React project?

Software Required
-NPM version 6.4.1
-expo version 2.6.14
-Atom 1.34.0
-NativeBase 2.10.0. Please refer to link

Note: React Native has too many dependencies and issues for a beginner like me. I have gone through those and it has burnt my many precious hours. Even though I decided to use NativeBase framework to speed up my development cycle but I still need to clear those hurdle that blocked me to get to the end result. I reused sample code from NativeBase as a very simple kickstart for beginners like me to avoid those unnecessary frustration.

Steps

• Run command below to create your first React navigation project.

$ expo init AwesomeNativeBase

• During the prompt of the "Choose a template", choose "> blank minimum dependencies to run and an empty root component" option

• When project creation process is completed, change to "AwesomeNativeBase" directory, run the command below to install native-base component.

$ npm install native-base --save

• Run command below to install vector-icons.

$ npm install @expo/vector-icons --save

• Launch App.js using the Atom IDE. Paste the sample code as shown below

import React, { Component } from 'react';
import { StatusBar } from 'react-native';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
import {Font, Expo, AppLoading} from 'expo';

export default class AnatomyExample extends Component {
  state={
    isReady: false
  }

  async componentWillMount() {
    await Font.loadAsync({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    });
    this.setState({isReady:true})
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
        <Container>
          <Header>
            <Left>
              <Button transparent>
                <Icon name='menu' />
                </Button>
            </Left>
            <Body>
              <Title>Header</Title>
            </Body>
            <Right />
          </Header>
          <Content>
            <Text>
              This is Content Section
            </Text>
          </Content>
          <Footer>
            <FooterTab>
              <Button full>
                <Text>Footer</Text>
              </Button>
            </FooterTab>
          </Footer>
          <StatusBar hidden />
        </Container>
    );
  }
}

• Back to your command prompt, enter command below to start your CLI.

$ expo start

• Expo Metro bundler will be launched. 

• I'm using Expo Android client to conduct my testing. Please refer to link.
• Make sure "Tunnel" is selected at the "Connection" field. Use the Expo Android client to scan the QR code, your application will be launched as shown in the screenshot below. 

How to resolve "Missing write access to /usr/local/lib/node_modules" when install expo-cli?

Software Required
- NPM version 6.4.1

Problems

• I'm exploring React and try to install expo-cli by executing command "npm install -g expo-cli", error as shown below is displayed

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user

• I know this is a common problem and solutions is available over the internet, I think this is necessary to write a small little note for my own jot down.

Steps

• Run command below to resolve the permission problem

$ mkdir ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ export PATH=~/.npm-global/bin:$PATH
$ source ~/.profile

• Run command below to install expo-cli

$ mkdir ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ export PATH=~/.npm-global/bin:$PATH
$ source ~/.profile
$ npm install -g expo-cli

• You are good to create your React project now.