Giter Club home page Giter Club logo

reactnativedropdownandroid's Introduction

react-native-dropdown-android

A simple wrapper for Android's Spinner

Installation Android

  1. npm install --save react-native-dropdown-android

  2. In android/settings.gradle

    ...
    include ':ReactNativeDropdownAndroid', ':app'
    project(':ReactNativeDropdownAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dropdown-android/android')
  3. In android/app/build.gradle

    ...
    dependencies {
        ...
        compile project(':ReactNativeDropdownAndroid')
    }
  4. Register module (in MainActivity.java)

    4.1. With RN < 0.19.0

     ```java
     import com.chymtt.reactnativedropdown.DropdownPackage; // <----- import
    
     public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
       ......
    
       @Override
       protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         mReactRootView = new ReactRootView(this);
    
         mReactInstanceManager = ReactInstanceManager.builder()
           .setApplication(getApplication())
           .setBundleAssetName("index.android.bundle")
           .setJSMainModuleName("index.android")
           .addPackage(new MainReactPackage())
           .addPackage(new DropdownPackage())              // <------ add here
           .setUseDeveloperSupport(BuildConfig.DEBUG)
           .setInitialLifecycleState(LifecycleState.RESUMED)
           .build();
    
         mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
    
         setContentView(mReactRootView);
       }
       ......
     }
     ```
    

    4.2. With RN >= 0.19.0

     ```java
     import com.chymtt.reactnativedropdown.DropdownPackage; // <----- import
    
     public class MainActivity extends ReactActivity {
         ...
    
         @Override
         protected List<ReactPackage> getPackages() {
           return Arrays.<ReactPackage>asList(
             new MainReactPackage(),
             new DropdownPackage() // <------ add here
           );
         }
     }
     ```
    

Usage

var Dropdown = require('react-native-dropdown-android');
...

  render() {
    return (
      <Dropdown
        style={{ height: 20, width: 200}}
        values={[ '--Choose--', 'one', 2, 3.5, { four: 4 }, [ 5, 6, 7 ], false ]}
        selected={1} onChange={(data) => { console.log(data); }} />
    );
  }

Props

style

Right now you should always and only provide its height and width, otherwise the dropdown won't show up at all

values

An array of options. This should be provided with an array of strings. Any type other than string will be converted to its string representation

selected

An int indicating which option (zero-based) is currently selected

onChange(data)

Callback with data in the form data = { selected: 1, value: 'one' }

Questions or suggestions?

Feel free to open an issue Pull requests are also welcome

reactnativedropdownandroid's People

Contributors

briandeweese avatar chymtt avatar javamonn avatar mohamed-amin avatar ssommac avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

reactnativedropdownandroid's Issues

Adding Styles

Are there any plans to expose styling the dropdown menu (backgroundColor, fontSize,...) ?

Index and values

How I can set my custom unique index for each values, e.g.:
2 itme1
5 item2
6 item3
9 item4

Thanks,
Luca.

Open via button

Hi. Thank you for your work!

I'm searching for Spinner component which can be opened by button instead text spinner.
Is it possible to do with your component?

reactNative module getting crash after selecting the value in dropDown

Hai i tried like this:

export default class sidemenu extends Component {
  render() {
    return (
     <Dropdown
        style={{ height: 20, width: 200}}
        values={[ '--Choose--', 'one', 2, 3.5, { four: 4 }, [ 5, 6, 7 ], false ]}
        selected={1} onChange={(data) => { console.log(data); }} />
    );
  }
    
}

after selecting the value in dropDown app getting crashes in android please give me suggestions that how to resolve it
react-native version:0.35.0
react-native-dropdown-android: 0.0.12

Selected option

When I am trying the sample code:

<Dropdown
        style={{ height: 20, width: 200}}
        values={[ '--Choose--', 'one', 2, 3.5, { four: 4 }, [ 5, 6, 7 ], false ]} 
        selected={1} onChange={(data) => { console.log(data); }} />

selected value in list is always 1st item, whatever passed as selected property.
Could you please advice the correct way to set selected element in Dropdown list?

react-native run-android build fails

I've made the changes to the appropriate files you mention in your instructions. When I try to run: react-native run-android I get the following errors:

myProject/node_modules/react-native-dropdown-android/android/src/main/java/com/chymtt/reactnativedropdown/Dropdown.java:31: illegal start of type
        ArrayList<String> spinnerArray = new ArrayList<>();
                                                       ^
myProject/node_modules/react-native-dropdown-android/android/src/main/java/com/chymtt/reactnativedropdown/Dropdown.java:53: illegal start of type
        ArrayAdapter<String> spinnerArrayAdapter = new ArrayAdapter<>(mContext,
                                                                    ^
myProject/node_modules/react-native-dropdown-android/android/src/main/java/com/chymtt/reactnativedropdown/DropdownPackage.java:16: illegal start of type
        return new ArrayList<>();
                             ^
3 errors
:ReactNativeDropdownAndroid:compileReleaseJavaWithJavac FAILED

Not sure if this a known issue, however I can't do any work without changing to

new ArrayList<String>()

for the first two, and for the third:

return new ArrayList<NativeModule>();

Any thoughts on an alternative solution?

Could not find method compile()

When I try to implement this module I get compile errors:

FAILURE: Build failed with an exception.

  • Where:
    Build file '/Users/bomalley/Documents/React/Acthar/android/build.gradle' line: 9
  • What went wrong:
    A problem occurred evaluating root project 'Acthar'.
    Could not find method compile() for arguments [project ':ReactNativeDropdownAndroid'] on >org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler_Decorated@2f98635e.

Here's the build.gradle:

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

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.3.1'

        compile project(':ReactNativeDropdownAndroid')

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
    }
}

Not sure how to proceed. Any ideas?

Right-to-left dropdown

Is there a way to change the position of the dropdown arrow to be at left hand side instead of right side?
I don't have any experience in native android to figure it out myself so I'll appreciate any directions to edit the code and make it support right-to-left direction.

getValue() method

I'm using Redux so I prefer not to set a state variable to hold the selected value. Can a method be added to get the current value of the dropdown when an action is dispatched.

like so this.refs.myDropdown.getValue();

Dropdown value failed to be changed

Dropdown style={{ height: 20, width: 300,marginTop:5}}
values={this.state.countryList} onChange={this.onChangeCountry.bind(this)}
selected={this.state.selectedCountryNumber}

Dropdown style={{ height: 20, width: 300,marginTop:5}} values={this.state.clubList} onChange={this.onChangeClubList.bind(this)} selected={0}

I got two dropdown and after I select another value of the country dropdown, I do the following action:

setState({clubList: change some array items });

but then the items of dropdown for clublist are still the same with previous items, no change. How to make it change?

onChange not being called when selected prop change via setState

render() {
    return (
      <Dropdown
        style={{ height: 20, width: 200}}
        values={[ '--Choose--', 'one', 2, 3.5, { four: 4 }, [ 5, 6, 7 ], false ]} 
        selected={this.state.selected} onChange={(data) => { console.log(data); }} />
    );
  }

somewhere else in the code

this.setState({selected: 3})

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.