CODEWITHSUNDEEP
reactjsreact-nativecompiler-errorsandroid-viewpager
Sabuj Sarker
Sabuj Sarker

Reputation: 39

View Pager In React native

enter image description here

I am Trying Install React Native View Pager. But This Kind Of Error show When I run the app. My code

import {StyleSheet, View, Text} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';

export default class ViewPagerPage extends Component {
    render() {
        return (
        <View style={{flex:1}}>
            <IndicatorViewPager
                style={{height:200}}
                indicator={this._renderDotIndicator()}
            >
                <View style={{backgroundColor:'cadetblue'}}>
                    <Text>page one</Text>
                </View>
                <View style={{backgroundColor:'cornflowerblue'}}>
                    <Text>page two</Text>
                </View>
                <View style={{backgroundColor:'#1AA094'}}>
                    <Text>page three</Text>
                </View>
            </IndicatorViewPager>

            <IndicatorViewPager
                style={{flex:1, paddingTop:20, backgroundColor:'white'}}
                indicator={this._renderTitleIndicator()}
            >
                <View style={{backgroundColor:'cadetblue'}}>
                    <Text>page one</Text>
                </View>
                <View style={{backgroundColor:'cornflowerblue'}}>
                    <Text>page two</Text>
                </View>
                <View style={{backgroundColor:'#1AA094'}}>
                    <Text>page three</Text>
                </View>
            </IndicatorViewPager>

            <IndicatorViewPager
                style={{flex:1, paddingTop:20, backgroundColor:'white'}}
                indicator={this._renderTabIndicator()}
            >
                <View style={{backgroundColor:'cadetblue'}}>
                    <Text>page one</Text>
                </View>
                <View style={{backgroundColor:'cornflowerblue'}}>
                    <Text>page two</Text>
                </View>
                <View style={{backgroundColor:'#1AA094'}}>
                    <Text>page three</Text>
                </View>
            </IndicatorViewPager>
        </View>
    );
}

_renderTitleIndicator() {
    return <PagerTitleIndicator titles={['one', 'two', 'three']} />;
}

_renderDotIndicator() {
    return <PagerDotIndicator pageCount={3} />;
}

_renderTabIndicator() {
    let tabs = [{
            text: 'Home',
            iconSource: require('../imgs/ic_tab_home_normal.png'),
            selectedIconSource: require('../imgs/ic_tab_home_click.png')
        },{
            text: 'Message',
            iconSource: require('../imgs/ic_tab_task_normal.png'),
            selectedIconSource: require('../imgs/ic_tab_task_click.png')
        },{
            text: 'Profile',
            iconSource: require('../imgs/ic_tab_my_normal.png'),
            selectedIconSource: require('../imgs/ic_tab_my_click.png')
    }];
    return <PagerTabIndicator tabs={tabs} />;
}

}

Upvotes: 0

Views: 1369

Answers (2)

Amit Kumar Trivedi
Amit Kumar Trivedi

Reputation: 543

You should install new package with below command npm install --save @shankarmorwal/rn-viewpager

and replace your below line from import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from '@shankarmorwal/rn-viewpager';

to

import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from '@shankarmorwal/rn-viewpager';

Everything should work properly.

Upvotes: 1

Zeeshan Ansari
Zeeshan Ansari

Reputation: 10858

You have forgotten to install rn-viewpager just install it then run

yarn add rn-viewpager
react-native run-android

Upvotes: 0

Related Questions