React Select Example not displaying dropdown

Question

I am just trying a React Select Dropdown Example using the below code:

import React from 'react';
import Select from 'react-select';
import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'; 

const techCompanies = [
{ label: "Apple", value: 1 },
{ label: "Facebook", value: 2 },
{ label: "Netflix", value: 3 },
{ label: "Tesla", value: 4 },
{ label: "Amazon", value: 5 },
{ label: "Alphabet", value: 6 },
]
const App = () => {
return (
  <div className="container">
      <div className="row">
          <div className="col-md-4" />
          <div className="col-md-4">
              <Select options={ techCompanies } />
          </div>
          <div className="col-md-4" />
      </div>
  </div>
 )    
 };

 export default App

Before this , I installed react select

npm i react-select

also installed bootstrap

npm install bootstrap --save

But after running I am getting the error:

Unable to resolve "../../../node_modules/bootstrap/dist/css/bootstrap.min.css" from "components/university/App.js" Failed building JavaScript bundle.

I can see the bootstrap.min.css under node_modules folder.

If I comment the import I am get the following : View config not found for name div. Make sure to start component names with a capital letter.

Can anyone tell where am I going wrong?Thanks in Advance.

Leo Leo · Accepted Answer · 2020-07-23T18:14:47

You can't use html components or the usual web css in react-native. In contrast to react web, react-native will map your components to native android, ios or windows ui components. Therefore your components must be composited of react-native components. I think you should check out this answer which explains the difference between react and react-native in more depth.

In your case you could start with an App Component similiar to this:

import React, { useState } from "react";
import { View, Picker, StyleSheet } from "react-native";

const techCompanies = [
{ label: "Apple", value: 1 },
{ label: "Facebook", value: 2 },
{ label: "Netflix", value: 3 },
{ label: "Tesla", value: 4 },
{ label: "Amazon", value: 5 },
{ label: "Alphabet", value: 6 },
]

const App = () => {
  const [selectedValue, setSelectedValue] = useState(1);
  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={itemValue => setSelectedValue(itemValue)}
      >
        {techCompanies.map(({ label, value }) =>
           <Picker.Item label={label} value={value} key={value} />)}
      </Picker>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    alignItems: "center"
  }
});

export default App;

see https://reactnative.dev/docs/picker for reference.

Old answer, before we learned that this is about react-native:

Your original code actually looked fine and should work.

However the css import should usually be your first import, because you want styles inside imported components to take precedence over the default styles. source

The added braces and return are not needed at all...

Also I would recommend using import 'bootstrap/dist/css/bootstrap.min.css' instead of import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'. The Babel+Webpack setup of create-react-app will take care of figuring out the location of the bootstrap module. If you use a relative path instead, there will be errors as soon as you move the file with the import...

Maybe something went wrong during your package installation? I'd suggest that you just try this:

rm -rf ./node_modules
npm install
npm run start

You can verify that your code was working in this sandbox: https://codesandbox.io/s/react-select-bootstrap-sample-g2264?file=/src/App.js

React Select Example not displaying dropdown

2 Answers