Plugin with id 'kotlin-android' not found on OnboardingScreens

Question

I am new to react native and was trying to create a Onboarding Screen for an app. After adding the code for onboarding screen and importing it into App.js file. I tried to run the application.

However, the app failed to install on my emulator.

The error:

What went wrong: A problem occurred evaluating project ':react-native-navigation'.

Plugin with id 'kotlin-android' not found.

Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

2: Task failed with an exception.

What went wrong: A problem occurred configuring project ':react-native-navigation'.

compileSdkVersion is not specified. Please add it to build.gradle

My build.gradle file looks like this:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 16
        compileSdkVersion = 29
        targetSdkVersion = 29
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath('com.android.tools.build:gradle:4.1.1')
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()
        maven { url 'https://www.jitpack.io' }
    }
}

This is my App.js file

import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';



//import Screens
import onboardingScreen from './screens/onboardingScreen';

import {
  Platform,
  StyleSheet,
  Text,
  View,
  StatusBar
} from 'react-native';

const AppStack = createStackNavigator();

export default class App extends Component {

  componentDidMount() {
    SplashScreen.hide()
  }
  render() {
    return (
      <NavigationContainer>
        <AppStack.Navigator
          headermode="none">

          <AppStack.Screen name="onboardingScreen" Component={onboardingScreen} />



        </AppStack.Navigator>
      </NavigationContainer>
    );
  }
}

package.json:

{
  "name": "Reactnative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-navigation": "^7.6.0",
    "react-native-onboarding-swiper": "^1.1.4",
    "react-native-splash-screen": "^3.2.0",
    "react-navigation-stack": "^2.10.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

onboardingScreen.js:

import React from 'react';
import { view, Button, Text, Image, StyleSheet} from 'react-native';

import Onboarding from 'react-native-onboarding-swiper';


const Dots = ({selected}) => {
    let backgroundColor;

    backgroundColor = selected ? 'rgba(0, 0, 0, 0.8)' : 'rgba(0, 0, 0, 0.3)';

    return (
        <View 
            style={{
                width:6,
                height: 6,
                marginHorizontal: 3,
                backgroundColor
            }}
        />
    );
}

const Skip = ({...props}) => (
    <TouchableOpacity
        style={{marginHorizontal:10}}
        {...props}
    >
        <Text style={{fontSize:16}}>Skip</Text>
    </TouchableOpacity>
);

const Next = ({...props}) => (
    <TouchableOpacity
        style={{marginHorizontal:10}}
        {...props}
    >
        <Text style={{fontSize:16}}>Next</Text>
    </TouchableOpacity>
);

const Done = ({...props}) => (
    <TouchableOpacity
        style={{marginHorizontal:10}}
        {...props}
    >
        <Text style={{fontSize:16}}>Done</Text>
    </TouchableOpacity>
);



<Onboarding
   SkipButtonComponent={Skip}
        NextButtonComponent={Next}
        DoneButtonComponent={Done}
        DotComponent={Dots}
        onSkip={() => navigation.replace("Login")}
        onDone={() => navigation.navigate("Login")}
  pages={[
    {
      backgroundColor: '#fff',
      image: <Image source={require('../assets/img/slider1.png')} />,
      title: 'Enabling Collaboration',
      subtitle: 'We connect local shoppers to online buyers',
    },
      {
      backgroundColor: '#fff',
      image: <Image source={require('../assets/img/slider2.png')} />,
      title: 'Peer Up',
      subtitle: 'Going home? Ready to help? Drop Orders Get Compensated',
    },
      {
      backgroundColor: '#fff',
      image: <Image source={require('../assets/img/slider3.png')} />,
      title: 'Enabling Collaboration',
      subtitle: 'Busy at home? Need groceries quickly? Want low service fees 0% Mark-up as well? Just make a list',
    },
  ]}
/>

export default onboardingScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center'
  },
});

I tried googling the error as well, but couldn't find anything related to react-native-onboarding-swiper.

score 2 · Answer 1 · answered Dec 27 '21 at 08:15

I thought another library produced the error. Try this

android/build.gradle

buildscript {
ext {
    minSdkVersion = 21 
    // kotlinVersion = "1.3.72" 
    kotlinVersion = "1.6.0"
}

dependencies {
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion" // add this line 
}
}

i p · Answer 2 · 2020-12-25T10:33:13.830

0

Your App, js import package react-navigation

https://reactnavigation.org/

But, your error shows package resct-native-navigation

https://github.com/wix/react-native-navigation

Be sure about your packages and follow installation guide

Edit:

According to your source code in github

You don't need react-navigation-stack package
You must add some package required

According to doc of react-navigation version 5.x

When you using @react-navigation/stack, you must ensure that you have installed the @react-navigation/native

https://reactnavigation.org/docs/stack-navigator/

Then, when you using @react-navigation/stack, you must install some react-native packages

https://reactnavigation.org/docs/getting-started/#installation
Splash screen freeze because onboardingScreen not found

There are some mistakes when import and export file

So, you can fix it like this:

Number 1 and 2:

package.json

change the package.json, then delete node_modules folder and $ npm install

Number 3:

On screens/onboardingScreen.js you must fix the export

screens/onboardingScreen.js

On App.js you must fix the import

App.js

edited Dec 25 '20 at 10:33

answered Dec 25 '20 at 00:45

i p

24
4

I was following this tutorial and did what he was doing exactly. – Syed Mohammad Ammar Dec 25 '20 at 01:02
Please edit & add your package.json source code in your question – i p Dec 25 '20 at 01:11
Please check again, I have added the package.json && onboardingScreen.js file code as well. – Syed Mohammad Ammar Dec 25 '20 at 01:20
Accroding to your code, there is no need of react-native-navigation, try remove the package. $ npm remove react-native-navigation – i p Dec 25 '20 at 01:28
[Fri Dec 25 2020 06:42:13.485] ERROR TypeError: null is not an object (evaluating '_RNGestureHandlerModule.default.Direction') [Fri Dec 25 2020 06:42:13.487] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication) [Fri Dec 25 2020 06:42:13.500] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication) [Fri Dec 25 2020 06:42:13.775] BUNDLE ./index.js – Syed Mohammad Ammar Dec 25 '20 at 01:42
This is what I am getting after my build has installed and the screen freezes on the splash screen on my emulator. – Syed Mohammad Ammar Dec 25 '20 at 01:43
Clean android project https://stackoverflow.com/a/48019133/12645152 – i p Dec 25 '20 at 01:49
Sorry to disturb you so many times, but the same error persists. I cleaned the build. – Syed Mohammad Ammar Dec 25 '20 at 03:26
After the splash screen duration, it is showing refreshing nothing else. – Syed Mohammad Ammar Dec 25 '20 at 03:27
No problem, please add your index.js or if the source code doesn't have sensitive data, you can post it on github and share the link – i p Dec 25 '20 at 06:27
Link to the git repo. – Syed Mohammad Ammar Dec 25 '20 at 08:14

Plugin with id 'kotlin-android' not found on OnboardingScreens

Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

2: Task failed with an exception.

2 Answers2