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.

Answer 1

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

1. You don't need react-navigation-stack package

2. 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

3. 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

Answer 2

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