Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

adding selection menu to fields in react-native form

I want to input data to fields day and time using a dropdown
selection menu .Please guide me how can I do that .I am new to react-native I have used the tcomb-form-native module from github. Please guide me through this.

'use strict';

var React = require('react-native');
//importing the react-native module
var t = require('tcomb-form-native');
//importing thetcomb-form-native module
var { AppRegistry, StyleSheet, Text, View, TouchableHighlight } =     React;

var Form = t.form.Form;

//  here we are: define your domain model
var timeSlot = t.struct({
day: t.String,             
time:t.String   
});

var options = {}; // optional rendering options (see documentation)

var AwesomeProject = React.createClass({

onPress: function () {
                    // call getValue() to get the values of the form
var value = this.refs.form.getValue();
if (value) {            // if validation fails, value will be null
  console.log(value);    // value here is an instance of Person
  }
},

render: function() {
return (
  <View style={styles.container}>
    {/* display */}
    <Form
      ref="form"
      type={timeSlot}
      options={options}
    />
    <TouchableHighlight style={styles.button} onPress={this.onPress}          underlayColor='#99d9f4'>
      <Text style={styles.buttonText}>continue</Text>
    </TouchableHighlight>
  </View>
  );
 }
});



var styles = StyleSheet.create({
 container: {
    justifyContent: 'center',
    marginTop: 50,
    padding: 20,
    backgroundColor: '#ffffff',
 },
 title: {
   fontSize: 30,
   alignSelf: 'center',
   marginBottom: 30
 },
 buttonText: {
   fontSize: 18,
   color: 'white',
   alignSelf: 'center'
 },
 button: {
   height: 36,
   backgroundColor: '#48BBEC',
   borderColor: '#48BBEC',
   borderWidth: 1,
   borderRadius: 8,
   marginBottom: 10,
   alignSelf: 'stretch',
   justifyContent: 'center'
 }
});


 module.exports=AwesomeProject
like image 688
shrey mahajan Avatar asked Dec 15 '25 19:12

shrey mahajan


1 Answers

This is an older question, and I'm sure you already found a solution that works for you...but there's actually really good documentation for how to implement select with tcomb-form-native. The stuff on the github page is just a starting point. Check out the extended documentation here

The github page also has additional documentation about Select if you scroll down toward the bottom under Select component: https://github.com/gcanti/tcomb-form-native

like image 199
toddmetheny Avatar answered Dec 18 '25 12:12

toddmetheny



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!