Why the component react-native-typewriter doesn't work?

Question

I followed the istruction here, but it still doesn't work.

I am trying this external component: https://www.npmjs.com/package/react-native-typewriter

So, I have installed it with:

npm install --save react-native-typewriter

and then I have wrote this code:

index.android.js

'use strict';

import {AppRegistry} from 'react-native';
import TypingText from './app/textanimation.js';

AppRegistry.registerComponent('AwesomeProject', () => TypingText );

textanimation.js

import React, {Component} from 'react'
import TypeWriter from 'react-native-typewriter';

class TypingText extends Component {
  render() {
     return <TypeWriter typing={1}>Hello World!</TypeWriter>
  }
}

export default TypingText;

package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-push-notification": "^2.2.1",
    "react-native-sound": "^0.9.0",
    "react-native-typewriter": "^0.3.0",
    "react-native-vector-icons": "^4.0.0"
  },
  "devDependencies": {
    "babel-jest": "18.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "18.1.0",
    "react-test-renderer": "15.4.2"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "assets/fonts/04b03"
    ]
  }
}

But I get the error below:

Seems you're trying to access 'ReactNative.Component' from the 'react-native' package. Perhaps you meant to access 'React.Component' from the 'react' package instead?
For example, instead of:

  import React, { Component, View } from 'react-native';

You should now do:

  import React, { Component } from 'react';
  import { View } from 'react-native';

Check the release notes on how to upgrade your code - https://github.com/facebook/react-native/releases/tag/v0.25.1

Hi, looking onto your code seems you have imported wrong component name. Instead of TextAnimation it should be TypingText in index.android.js — Neel Gala
your textanimation.js is totally right, check your index.android.js where you have imported on 2nd line TextAnimation it should be TypingText — Neel Gala

Neel Gala Neel Gala · Accepted Answer · 2017-03-03T08:00:04

Ok, I finally got the solution on the issue of react-native-typewriter package.

Navigate to node_modules> react-native-typewriter> index.js Edit the following header from

import React, {
  Component,
  Text,
  PropTypes,
} from 'react'

to

import React, {
  Component,
  PropTypes,
} from 'react'

import {
  Text,
} from 'react-native'

Working short Example

import React,{Component} from 'react';
import{AppRegistry,} from 'react-native';
import TypeWriter from 'react-native-typewriter';
export default class HelloWorld extends Component{
    constructor(){
    super();
    }
    render() {
           return <TypeWriter typing={1}>Hello World!</TypeWriter>
        }
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

Working Example for R-N 0.42.0

Why the component react-native-typewriter doesn't work?

1 Answers