Wednesday, February 13, 2019

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

    Monday, February 11, 2019

    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>
        );
      }
    }
    
    

    Wednesday, February 6, 2019

    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;
    
    

    Friday, February 1, 2019

    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.